diff --git a/manage.html b/manage.html
index e3f9b794..4bb23c35 100644
--- a/manage.html
+++ b/manage.html
@@ -157,16 +157,16 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/manage/import-export.js b/manage/import-export.js
index dc94f9ed..08e5210b 100644
--- a/manage/import-export.js
+++ b/manage/import-export.js
@@ -1,10 +1,55 @@
-/* global messageBox styleSectionsEqual getOwnTab API
+/* global messageBox styleSectionsEqual getOwnTab API onDOMready
tryJSONparse scrollElementIntoView $ $$ API $create t animateElement */
'use strict';
const STYLISH_DUMP_FILE_EXT = '.txt';
const STYLUS_BACKUP_FILE_EXT = '.json';
+onDOMready().then(() => {
+ $('#file-all-styles').onclick = exportToFile;
+ $('#unfile-all-styles').onclick = () => {
+ importFromFile({fileTypeFilter: STYLUS_BACKUP_FILE_EXT});
+ };
+
+ Object.assign(document.body, {
+ ondragover(event) {
+ const hasFiles = event.dataTransfer.types.includes('Files');
+ event.dataTransfer.dropEffect = hasFiles || event.target.type === 'search' ? 'copy' : 'none';
+ this.classList.toggle('dropzone', hasFiles);
+ if (hasFiles) {
+ event.preventDefault();
+ clearTimeout(this.fadeoutTimer);
+ this.classList.remove('fadeout');
+ }
+ },
+ ondragend() {
+ animateElement(this, {className: 'fadeout', removeExtraClasses: ['dropzone']}).then(() => {
+ this.style.animationDuration = '';
+ });
+ },
+ ondragleave(event) {
+ 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();
+ }
+ },
+ ondrop(event) {
+ this.ondragend();
+ if (event.dataTransfer.files.length) {
+ event.preventDefault();
+ if ($('#only-updates input').checked) {
+ $('#only-updates input').click();
+ }
+ importFromFile({file: event.dataTransfer.files[0]});
+ }
+ },
+ });
+});
+
function importFromFile({fileTypeFilter, file} = {}) {
return new Promise(resolve => {
const fileInput = document.createElement('input');
@@ -244,7 +289,7 @@ function importFromString(jsonString) {
}
-$('#file-all-styles').onclick = () => {
+function exportToFile() {
API.getAllStyles().then(styles => {
// https://crbug.com/714373
document.documentElement.appendChild(
@@ -284,47 +329,4 @@ $('#file-all-styles').onclick = () => {
const yyyy = today.getFullYear();
return `stylus-${yyyy}-${mm}-${dd}${STYLUS_BACKUP_FILE_EXT}`;
}
-};
-
-
-$('#unfile-all-styles').onclick = () => {
- importFromFile({fileTypeFilter: STYLUS_BACKUP_FILE_EXT});
-};
-
-Object.assign(document.body, {
- ondragover(event) {
- const hasFiles = event.dataTransfer.types.includes('Files');
- event.dataTransfer.dropEffect = hasFiles || event.target.type === 'search' ? 'copy' : 'none';
- this.classList.toggle('dropzone', hasFiles);
- if (hasFiles) {
- event.preventDefault();
- clearTimeout(this.fadeoutTimer);
- this.classList.remove('fadeout');
- }
- },
- ondragend() {
- animateElement(this, {className: 'fadeout', removeExtraClasses: ['dropzone']}).then(() => {
- this.style.animationDuration = '';
- });
- },
- ondragleave(event) {
- 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();
- }
- },
- ondrop(event) {
- this.ondragend();
- if (event.dataTransfer.files.length) {
- event.preventDefault();
- if ($('#only-updates input').checked) {
- $('#only-updates input').click();
- }
- importFromFile({file: event.dataTransfer.files[0]});
- }
- },
-});
+}
diff --git a/manage/manage.js b/manage/manage.js
index a3819a83..517a54ca 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -26,7 +26,6 @@ const newUI = {
},
};
newUI.renderClass();
-requestAnimationFrame(usePrefsDuringPageLoad);
const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
const GET_FAVICON_URL = 'https://www.google.com/s2/favicons?domain=';
@@ -37,7 +36,21 @@ const handleEvent = {};
Promise.all([
API.getAllStyles(true),
urlFilterParam && API.searchDB({query: 'url:' + urlFilterParam}),
- onDOMready().then(initGlobalEvents),
+ Promise.all([
+ onDOMready(),
+ prefs.initializing,
+ ])
+ .then(() => {
+ initGlobalEvents();
+ if (!VIVALDI) {
+ $$('#header select').forEach(el => el.adjustWidth());
+ }
+ if (FIREFOX && 'update' in (chrome.commands || {})) {
+ const btn = $('#manage-shortcuts-button');
+ btn.classList.remove('chromium-only');
+ btn.onclick = API.optionsCustomizeHotkeys;
+ }
+ }),
]).then(args => {
showStyles(...args);
});
@@ -682,30 +695,3 @@ function highlightEditedStyle() {
requestAnimationFrame(() => scrollElementIntoView(entry));
}
}
-
-
-function usePrefsDuringPageLoad() {
- for (const id of Object.getOwnPropertyNames(prefs.defaults)) {
- const value = prefs.get(id);
- if (value !== true) continue;
- const el = document.getElementById(id) ||
- id.includes('expanded') && $(`details[data-pref="${id}"]`);
- if (!el) continue;
- if (el.type === 'checkbox') {
- el.checked = value;
- } else if (el.localName === 'details') {
- el.open = value;
- } else {
- el.value = value;
- }
- }
- if (!VIVALDI) {
- $$('#header select').forEach(el => el.adjustWidth());
- }
-
- if (FIREFOX && 'update' in (chrome.commands || {})) {
- const btn = $('#manage-shortcuts-button');
- btn.classList.remove('chromium-only');
- btn.onclick = API.optionsCustomizeHotkeys;
- }
-}