329 lines
11 KiB
JavaScript
329 lines
11 KiB
JavaScript
/* global prefs: true, contextMenus, FIREFOX_NO_DOM_STORAGE */
|
|
'use strict';
|
|
|
|
// eslint-disable-next-line no-var
|
|
var prefs = (() => {
|
|
const defaults = {
|
|
'openEditInWindow': false, // new editor opens in a own browser window
|
|
'windowPosition': {}, // detached window position
|
|
'show-badge': true, // display text on popup menu icon
|
|
'disableAll': false, // boss key
|
|
'exposeIframes': false, // Add 'stylus-iframe' attribute to HTML element in all iframes
|
|
'newStyleAsUsercss': false, // create new style in usercss format
|
|
|
|
// checkbox in style config dialog
|
|
'config.autosave': true,
|
|
|
|
'popup.breadcrumbs': true, // display 'New style' links as URL breadcrumbs
|
|
'popup.breadcrumbs.usePath': false, // use URL path for 'this URL'
|
|
'popup.enabledFirst': true, // display enabled styles before disabled styles
|
|
'popup.stylesFirst': true, // display enabled styles before disabled styles
|
|
'popup.borders': false, // add white borders on the sides
|
|
'popup.findStylesInline': true, // use the inline style search
|
|
|
|
'manage.onlyEnabled': false, // display only enabled styles
|
|
'manage.onlyLocal': false, // display only styles created locally
|
|
'manage.onlyUsercss': false, // display only usercss styles
|
|
'manage.onlyEnabled.invert': false, // display only disabled styles
|
|
'manage.onlyLocal.invert': false, // display only externally installed styles
|
|
'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
|
|
// UI element state: expanded/collapsed
|
|
'manage.backup.expanded': true,
|
|
'manage.filters.expanded': true,
|
|
'manage.options.expanded': true,
|
|
// the new compact layout doesn't look good on Android yet
|
|
'manage.newUI': !navigator.appVersion.includes('Android'),
|
|
'manage.newUI.favicons': false, // show favicons for the sites in applies-to
|
|
'manage.newUI.faviconsGray': true, // gray out favicons
|
|
'manage.newUI.targets': 3, // max number of applies-to targets visible: 0 = none
|
|
'manage.newUI.sort': 'title,asc',
|
|
|
|
'editor.options': {}, // CodeMirror.defaults.*
|
|
'editor.options.expanded': true, // UI element state: expanded/collapsed
|
|
'editor.lint.expanded': true, // UI element state: expanded/collapsed
|
|
'editor.lineWrapping': true, // word wrap
|
|
'editor.smartIndent': true, // 'smart' indent
|
|
'editor.indentWithTabs': false, // smart indent with tabs
|
|
'editor.tabSize': 4, // tab width, in spaces
|
|
'editor.keyMap': navigator.appVersion.indexOf('Windows') > 0 ? 'sublime' : 'default',
|
|
'editor.theme': 'default', // CSS theme
|
|
'editor.beautify': { // CSS beautifier
|
|
selector_separator_newline: true,
|
|
newline_before_open_brace: false,
|
|
newline_after_open_brace: true,
|
|
newline_between_properties: true,
|
|
newline_before_close_brace: true,
|
|
newline_between_rules: false,
|
|
preserve_newlines: true,
|
|
end_with_newline: false,
|
|
indent_conditional: true,
|
|
},
|
|
'editor.lintDelay': 300, // lint gutter marker update delay, ms
|
|
'editor.linter': 'csslint', // 'csslint' or 'stylelint' or ''
|
|
'editor.lintReportDelay': 500, // lint report update delay, ms
|
|
'editor.matchHighlight': 'token', // token = token/word under cursor even if nothing is selected
|
|
// selection = only when something is selected
|
|
// '' (empty string) = disabled
|
|
'editor.autoCloseBrackets': true, // auto-add a closing pair when typing an opening one of ()[]{}''""
|
|
'editor.autocompleteOnTyping': false, // show autocomplete dropdown on typing a word token
|
|
'editor.contextDelete': contextDeleteMissing(), // "Delete" item in context menu
|
|
'editor.selectByTokens': true,
|
|
|
|
'editor.appliesToLineWidget': true, // show applies-to line widget on the editor
|
|
'editor.livePreview': true,
|
|
|
|
// show CSS colors as clickable colored rectangles
|
|
'editor.colorpicker': true,
|
|
// #DEAD or #beef
|
|
'editor.colorpicker.hexUppercase': false,
|
|
// default hotkey
|
|
'editor.colorpicker.hotkey': '',
|
|
// last color
|
|
'editor.colorpicker.color': '',
|
|
|
|
// Firefox-only chrome.commands.update
|
|
'hotkey._execute_browser_action': '',
|
|
'hotkey.openManage': '',
|
|
'hotkey.styleDisableAll': '',
|
|
|
|
'iconset': 0, // 0 = dark-themed icon
|
|
// 1 = light-themed icon
|
|
|
|
'badgeDisabled': '#8B0000', // badge background color when disabled
|
|
'badgeNormal': '#006666', // badge background color
|
|
|
|
'popupWidth': 246, // popup width in pixels
|
|
|
|
'updateInterval': 24, // user-style automatic update interval, hours (0 = disable)
|
|
};
|
|
const values = deepCopy(defaults);
|
|
|
|
const onChange = {
|
|
any: new Set(),
|
|
specific: new Map(),
|
|
};
|
|
|
|
const initializing = promisify(chrome.storage.sync.get.bind(chrome.storage.sync))('settings')
|
|
.then(result => setAll(result.settings, true));
|
|
|
|
chrome.storage.onChanged.addListener((changes, area) => {
|
|
if (area !== 'sync' || !changes.settings || !changes.settings.newValue) {
|
|
return;
|
|
}
|
|
initializing.then(() => setAll(changes.settings.newValue, true));
|
|
});
|
|
|
|
// coalesce multiple pref changes in broadcast
|
|
// let changes = {};
|
|
|
|
return {
|
|
initializing,
|
|
defaults,
|
|
get(key, defaultValue) {
|
|
if (key in values) {
|
|
return values[key];
|
|
}
|
|
if (defaultValue !== undefined) {
|
|
return defaultValue;
|
|
}
|
|
if (key in defaults) {
|
|
return defaults[key];
|
|
}
|
|
console.warn("No default preference for '%s'", key);
|
|
},
|
|
getAll() {
|
|
return deepCopy(values);
|
|
},
|
|
set,
|
|
reset: key => set(key, deepCopy(defaults[key])),
|
|
subscribe(keys, listener) {
|
|
// keys: string[] ids
|
|
// or a falsy value to subscribe to everything
|
|
// listener: function (key, value)
|
|
if (keys) {
|
|
for (const key of keys) {
|
|
const existing = onChange.specific.get(key);
|
|
if (!existing) {
|
|
onChange.specific.set(key, listener);
|
|
} else if (existing instanceof Set) {
|
|
existing.add(listener);
|
|
} else {
|
|
onChange.specific.set(key, new Set([existing, listener]));
|
|
}
|
|
}
|
|
} else {
|
|
onChange.any.add(listener);
|
|
}
|
|
},
|
|
unsubscribe(keys, listener) {
|
|
if (keys) {
|
|
for (const key of keys) {
|
|
const existing = onChange.specific.get(key);
|
|
if (existing instanceof Set) {
|
|
existing.delete(listener);
|
|
if (!existing.size) {
|
|
onChange.specific.delete(key);
|
|
}
|
|
} else if (existing) {
|
|
onChange.specific.delete(key);
|
|
}
|
|
}
|
|
} else {
|
|
onChange.all.remove(listener);
|
|
}
|
|
},
|
|
};
|
|
|
|
function promisify(fn) {
|
|
return (...args) =>
|
|
new Promise((resolve, reject) => {
|
|
fn(...args, (...result) => {
|
|
if (chrome.runtime.lastError) {
|
|
reject(chrome.runtime.lastError);
|
|
} else if (result.length === 0) {
|
|
resolve(undefined);
|
|
} else if (result.length === 1) {
|
|
resolve(result[0]);
|
|
} else {
|
|
resolve(result);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function setAll(settings, synced) {
|
|
for (const [key, value] of Object.entries(settings)) {
|
|
set(key, value, synced);
|
|
}
|
|
}
|
|
|
|
function set(key, value, synced = false) {
|
|
const oldValue = values[key];
|
|
switch (typeof defaults[key]) {
|
|
case typeof value:
|
|
break;
|
|
case 'string':
|
|
value = String(value);
|
|
break;
|
|
case 'number':
|
|
value |= 0;
|
|
break;
|
|
case 'boolean':
|
|
value = value === true || value === 'true';
|
|
break;
|
|
}
|
|
if (equal(value, oldValue)) {
|
|
return;
|
|
}
|
|
values[key] = value;
|
|
emitChange(key, value);
|
|
if (synced) {
|
|
return;
|
|
}
|
|
// changes[key] = value;
|
|
debounce(syncPrefs);
|
|
}
|
|
|
|
function emitChange(key, value) {
|
|
const specific = onChange.specific.get(key);
|
|
if (typeof specific === 'function') {
|
|
specific(key, value);
|
|
} else if (specific instanceof Set) {
|
|
for (const listener of specific.values()) {
|
|
listener(key, value);
|
|
}
|
|
}
|
|
for (const listener of onChange.any.values()) {
|
|
listener(key, value);
|
|
}
|
|
}
|
|
|
|
function syncPrefs() {
|
|
// FIXME: we always set the entire object? Ideally, this should only use `changes`.
|
|
chrome.sync.set('settings', values);
|
|
}
|
|
|
|
function equal(a, b) {
|
|
if (!a || !b || typeof a !== 'object' || typeof b !== 'object') {
|
|
return a === b;
|
|
}
|
|
if (Object.keys(a).length !== Object.keys(b).length) {
|
|
return false;
|
|
}
|
|
for (const k in a) {
|
|
if (typeof a[k] === 'object') {
|
|
if (!equal(a[k], b[k])) {
|
|
return false;
|
|
}
|
|
} else if (a[k] !== b[k]) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function contextDeleteMissing() {
|
|
return CHROME && (
|
|
// detect browsers without Delete by looking at the end of UA string
|
|
/Vivaldi\/[\d.]+$/.test(navigator.userAgent) ||
|
|
// Chrome and co.
|
|
/Safari\/[\d.]+$/.test(navigator.userAgent) &&
|
|
// skip forks with Flash as those are likely to have the menu e.g. CentBrowser
|
|
!Array.from(navigator.plugins).some(p => p.name === 'Shockwave Flash')
|
|
);
|
|
}
|
|
})();
|
|
|
|
|
|
// Accepts an array of pref names (values are fetched via prefs.get)
|
|
// and establishes a two-way connection between the document elements and the actual prefs
|
|
function setupLivePrefs(
|
|
IDs = Object.getOwnPropertyNames(prefs.defaults)
|
|
.filter(id => $('#' + id))
|
|
) {
|
|
for (const id of IDs) {
|
|
const element = $('#' + id);
|
|
updateElement({id, element, force: true});
|
|
element.addEventListener('change', onChange);
|
|
}
|
|
prefs.subscribe(IDs, (id, value) => updateElement({id, value}));
|
|
|
|
function onChange() {
|
|
const value = getInputValue(this);
|
|
if (prefs.get(this.id) !== value) {
|
|
prefs.set(this.id, value);
|
|
}
|
|
}
|
|
function updateElement({
|
|
id,
|
|
value = prefs.get(id),
|
|
element = $('#' + id),
|
|
force,
|
|
}) {
|
|
if (!element) {
|
|
prefs.unsubscribe(IDs, updateElement);
|
|
return;
|
|
}
|
|
setInputValue(element, value, force);
|
|
}
|
|
function getInputValue(input) {
|
|
if (input.type === 'checkbox') {
|
|
return input.checked;
|
|
}
|
|
if (input.type === 'number') {
|
|
return Number(input.value);
|
|
}
|
|
return input.value;
|
|
}
|
|
function setInputValue(input, value, force = false) {
|
|
if (force || getInputValue(input) !== value) {
|
|
if (input.type === 'checkbox') {
|
|
input.checked = value;
|
|
} else {
|
|
input.value = value;
|
|
}
|
|
input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
|
|
}
|
|
}
|
|
}
|