a few Firefox related compatibility fixes

backup/fileSaveLoad.js

@@ -321,14 +321,18 @@ Object.assign(document.body, {
     }
   },
   ondragend(event) {
-    animateElement(this, {className: 'fadeout'}).then(() => {
+    animateElement(this, {className: 'fadeout', removeExtraClasses: ['dropzone']}).then(() => {
       this.style.animationDuration = '';
-      this.classList.remove('dropzone');
     });
   },
   ondragleave(event) {
-    // Chrome sets screen coords to 0 on Escape key pressed or mouse out of document bounds
-    if (!event.screenX && !event.screenX) {
+    try {
+      // in Firefox event.target could be XUL browser and hence there is no permission to access it
+      if (event.target === this) {
+        this.ondragend();
+      }
+    }
+    catch (e) {
       this.ondragend();
     }
   },

dom.js

@@ -34,11 +34,14 @@ function scrollElementIntoView(element) {
 }
 
 
-function animateElement(element, {className, remove = false}) {
+function animateElement(element, {className, removeExtraClasses = [], remove = false}) {
   return new Promise(resolve => {
     element.addEventListener('animationend', function _() {
       element.removeEventListener('animationend', _);
-      element.classList.remove(className);
+      element.classList.remove(
+        className,
+        ...removeExtraClasses // In Firefox, `resolve()` might be called one frame later. This is helpful to clean-up on the same frame
+      );
       // TODO: investigate why animation restarts if the elements is removed in .then()
       if (remove) {
         element.remove();

edit.js

@@ -1872,7 +1872,7 @@ function getComputedHeight(el) {
 
 function getCodeMirrorThemes() {
 	if (!chrome.runtime.getPackageDirectoryEntry) {
-		const themes = Promise.resolve([
+		const themes = [
 			chrome.i18n.getMessage('defaultTheme'),
 			'3024-day',
 			'3024-night',
@@ -1922,8 +1922,9 @@ function getCodeMirrorThemes() {
 			'xq-light',
 			'yeti',
 			'zenburn',
-		]);
+		];
 		localStorage.codeMirrorThemes = themes.join(' ');
+		return Promise.resolve(themes);
 	}
 	return new Promise(resolve => {
 		chrome.runtime.getPackageDirectoryEntry(rootDir => {

popup.css

@@ -4,6 +4,9 @@ body {
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   margin: 0;
 }
+.firefox body {
+  background-color: #fff;
+}
 
 body > div:not(#installed) {
   margin-left: 0.75em;
@@ -119,7 +122,6 @@ body.blocked > DIV {
 
 .entry .main-controls {
   display: flex;
-  flex: 1;
   width: calc(100% - 20px);
   align-items: center;
 }