a few Firefox related compatibility fixes

This commit is contained in:
Jeremy Schomery 2017-05-14 15:56:51 +04:30
parent 497756d838
commit ab63f028eb
4 changed files with 19 additions and 9 deletions

View File

@ -321,14 +321,18 @@ Object.assign(document.body, {
} }
}, },
ondragend(event) { ondragend(event) {
animateElement(this, {className: 'fadeout'}).then(() => { animateElement(this, {className: 'fadeout', removeExtraClasses: ['dropzone']}).then(() => {
this.style.animationDuration = ''; this.style.animationDuration = '';
this.classList.remove('dropzone');
}); });
}, },
ondragleave(event) { ondragleave(event) {
// Chrome sets screen coords to 0 on Escape key pressed or mouse out of document bounds try {
if (!event.screenX && !event.screenX) { // 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(); this.ondragend();
} }
}, },

7
dom.js
View File

@ -34,11 +34,14 @@ function scrollElementIntoView(element) {
} }
function animateElement(element, {className, remove = false}) { function animateElement(element, {className, removeExtraClasses = [], remove = false}) {
return new Promise(resolve => { return new Promise(resolve => {
element.addEventListener('animationend', function _() { element.addEventListener('animationend', function _() {
element.removeEventListener('animationend', _); 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() // TODO: investigate why animation restarts if the elements is removed in .then()
if (remove) { if (remove) {
element.remove(); element.remove();

View File

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

View File

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