+ + +
++ + +
++ + - + + + + + + +
++
-
+
+
+
+
diff --git a/edit.js b/edit.js
index d07c759f..b9575c18 100644
--- a/edit.js
+++ b/edit.js
@@ -1,4 +1,5 @@
-/* globals stringAsRegExp */
+/* eslint no-tabs: 0, no-var: 0, indent: [2, tab, {VariableDeclarator: 0, SwitchCase: 1}], quotes: 0 */
+/* global CodeMirror */
"use strict";
var styleId = null;
@@ -11,6 +12,9 @@ var useHistoryBack; // use browser history back when "back to manage" is click
var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain", regexps: "regexp"};
var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"};
+// if background page hasn't been loaded yet, increase the chances it has before DOMContentLoaded
+onBackgroundReady();
+
// make querySelectorAll enumeration code readable
["forEach", "some", "indexOf", "map"].forEach(function(method) {
NodeList.prototype[method]= Array.prototype[method];
@@ -29,10 +33,22 @@ Array.prototype.rotate = function(amount) { // negative amount == rotate left
var r = this.slice(-amount, this.length);
Array.prototype.push.apply(r, this.slice(0, this.length - r.length));
return r;
-}
+};
Object.defineProperty(Array.prototype, "last", {get: function() { return this[this.length - 1]; }});
+// preload the theme so that CodeMirror can calculate its metrics in DOMContentLoaded->setupLivePrefs()
+new MutationObserver((mutations, observer) => {
+ const themeElement = document.getElementById("cm-theme");
+ if (themeElement) {
+ themeElement.href = prefs.get("editor.theme") == "default" ? ""
+ : "codemirror/theme/" + prefs.get("editor.theme") + ".css";
+ observer.disconnect();
+ }
+}).observe(document, {subtree: true, childList: true});
+
+getCodeMirrorThemes();
+
// reroute handling to nearest editor when keypress resolves to one of these commands
var hotkeyRerouter = {
commands: {
@@ -130,6 +146,11 @@ function initCodeMirror() {
var CM = CodeMirror;
var isWindowsOS = navigator.appVersion.indexOf("Windows") > 0;
+ // CodeMirror miserably fails on keyMap="" so let's ensure it's not
+ if (!prefs.get('editor.keyMap')) {
+ prefs.reset('editor.keyMap');
+ }
+
// default option values
Object.assign(CM.defaults, {
mode: 'css',
@@ -138,6 +159,7 @@ function initCodeMirror() {
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
matchBrackets: true,
+ highlightSelectionMatches: {showToken: /[#.\-\w]/, annotateScrollbar: true},
lint: {getAnnotations: CodeMirror.lint.css, delay: prefs.get("editor.lintDelay")},
lintReportDelay: prefs.get("editor.lintReportDelay"),
styleActiveLine: true,
@@ -229,38 +251,30 @@ function initCodeMirror() {
return this.display.wrapper.parentNode;
};
- // preload the theme so that CodeMirror can calculate its metrics in DOMContentLoaded->setupLivePrefs()
- var theme = prefs.get("editor.theme");
- document.getElementById("cm-theme").href = theme == "default" ? "" : "codemirror/theme/" + theme + ".css";
-
// initialize global editor controls
- document.addEventListener("DOMContentLoaded", function() {
- function optionsHtmlFromArray(options) {
- return options.map(function(opt) { return ""; }).join("");
- }
- var themeControl = document.getElementById("editor.theme");
- var bg = chrome.extension.getBackgroundPage();
- if (bg && bg.codeMirrorThemes) {
- themeControl.innerHTML = optionsHtmlFromArray(bg.codeMirrorThemes);
- } else {
- // Chrome is starting up and shows our edit.html, but the background page isn't loaded yet
- themeControl.innerHTML = optionsHtmlFromArray([theme == "default" ? t("defaultTheme") : theme]);
- getCodeMirrorThemes(function(themes) {
- themeControl.innerHTML = optionsHtmlFromArray(themes);
- themeControl.selectedIndex = Math.max(0, themes.indexOf(theme));
- });
- }
- document.getElementById("editor.keyMap").innerHTML = optionsHtmlFromArray(Object.keys(CM.keyMap).sort());
- document.getElementById("options").addEventListener("change", acmeEventListener, false);
- setupLivePrefs(
- document.querySelectorAll("#options *[data-option][id^='editor.']")
- .map(function(option) { return option.id })
- );
- });
+ function optionsHtmlFromArray(options) {
+ return options.map(function(opt) { return ""; }).join("");
+ }
+ var themeControl = document.getElementById("editor.theme");
+ const themeList = localStorage.codeMirrorThemes;
+ if (themeList) {
+ themeControl.innerHTML = optionsHtmlFromArray(themeList.split(/\s+/));
+ } else {
+ // Chrome is starting up and shows our edit.html, but the background page isn't loaded yet
+ const theme = prefs.get("editor.theme");
+ themeControl.innerHTML = optionsHtmlFromArray([theme == "default" ? t("defaultTheme") : theme]);
+ getCodeMirrorThemes().then(() => {
+ const themes = (localStorage.codeMirrorThemes || '').split(/\s+/);
+ themeControl.innerHTML = optionsHtmlFromArray(themes);
+ themeControl.selectedIndex = Math.max(0, themes.indexOf(theme));
+ });
+ }
+ document.getElementById("editor.keyMap").innerHTML = optionsHtmlFromArray(Object.keys(CM.keyMap).sort());
+ document.getElementById("options").addEventListener("change", acmeEventListener, false);
+ setupLivePrefs();
hotkeyRerouter.setState(true);
}
-initCodeMirror();
function acmeEventListener(event) {
var el = event.target;
@@ -287,7 +301,7 @@ function acmeEventListener(event) {
el.selectedIndex = 0;
break;
}
- var url = chrome.extension.getURL("codemirror/theme/" + value + ".css");
+ var url = chrome.runtime.getURL("codemirror/theme/" + value + ".css");
if (themeLink.href == url) { // preloaded in initCodeMirror()
break;
}
@@ -302,13 +316,23 @@ function acmeEventListener(event) {
}, 100);
})();
return;
+ case "highlightSelectionMatches":
+ switch (value) {
+ case 'token':
+ case 'selection':
+ document.body.dataset[option] = value;
+ value = {showToken: value == 'token' && /[#.\-\w]/, annotateScrollbar: true};
+ break;
+ default:
+ value = null;
+ }
}
CodeMirror.setOption(option, value);
}
// replace given textarea with the CodeMirror editor
function setupCodeMirror(textarea, index) {
- var cm = CodeMirror.fromTextArea(textarea);
+ var cm = CodeMirror.fromTextArea(textarea, {lint: null});
cm.on("change", indicateCodeChange);
cm.on("blur", function(cm) {
@@ -324,6 +348,7 @@ function setupCodeMirror(textarea, index) {
hotkeyRerouter.setState(false);
cm.display.wrapper.classList.add("CodeMirror-active");
});
+ cm.on('mousedown', (cm, event) => toggleContextMenuDelete.call(cm, event));
var resizeGrip = cm.display.wrapper.appendChild(document.createElement("div"));
resizeGrip.className = "resize-grip";
@@ -395,6 +420,10 @@ document.addEventListener("wheel", function(event) {
chrome.tabs.query({currentWindow: true}, function(tabs) {
var windowId = tabs[0].windowId;
if (prefs.get("openEditInWindow")) {
+ if (sessionStorage.saveSizeOnClose && 'left' in prefs.get('windowPosition', {})) {
+ // window was reopened via Ctrl-Shift-T etc.
+ chrome.windows.update(windowId, prefs.get('windowPosition'));
+ }
if (tabs.length == 1 && window.history.length == 1) {
chrome.windows.getAll(function(windows) {
if (windows.length > 1) {
@@ -414,7 +443,7 @@ chrome.tabs.query({currentWindow: true}, function(tabs) {
});
});
-getActiveTab(function(tab) {
+getActiveTab().then(tab => {
useHistoryBack = sessionStorageHash("manageStylesHistory").value[tab.id] == location.href;
});
@@ -497,6 +526,23 @@ function addSection(event, section) {
appliesTo.addEventListener("change", onChange);
appliesTo.addEventListener("input", onChange);
+ toggleTestRegExpVisibility();
+ appliesTo.addEventListener('change', toggleTestRegExpVisibility);
+ div.querySelector('.test-regexp').onclick = showRegExpTester;
+ function toggleTestRegExpVisibility() {
+ const show = [...appliesTo.children].some(item =>
+ !item.matches('.applies-to-everything') &&
+ item.querySelector('.applies-type').value == 'regexp' &&
+ item.querySelector('.applies-value').value.trim());
+ div.classList.toggle('has-regexp', show);
+ appliesTo.oninput = appliesTo.oninput || show && (event => {
+ if (event.target.matches('.applies-value')
+ && event.target.parentElement.querySelector('.applies-type').value == 'regexp') {
+ showRegExpTester(null, div);
+ }
+ });
+ }
+
var sections = document.getElementById("sections");
if (event) {
var clickedSection = getSectionForChild(event.target);
@@ -857,36 +903,32 @@ function getEditorInSight(nearbyElement) {
function updateLintReport(cm, delay) {
if (delay == 0) {
// immediately show pending csslint messages in onbeforeunload and save
- update.call(cm);
+ update(cm);
return;
}
if (delay > 0) {
- // give csslint some time to find the issues, e.g. 500 (1/10 of our default 5s)
- // by settings its internal delay to 1ms and restoring it back later
- var lintOpt = editors[0].state.lint.options;
- setTimeout((function(opt, delay) {
- opt.delay = delay == 1 ? opt.delay : delay; // options object is shared between editors
- update(this);
- }).bind(cm, lintOpt, lintOpt.delay), delay);
- lintOpt.delay = 1;
+ setTimeout(cm => { cm.performLint(); update(cm) }, delay, cm);
+ return;
+ }
+ var state = cm.state.lint;
+ if (!state) {
return;
}
// user is editing right now: postpone updating the report for the new issues (default: 500ms lint + 4500ms)
// or update it as soon as possible (default: 500ms lint + 100ms) in case an existing issue was just fixed
- var state = cm.state.lint;
clearTimeout(state.reportTimeout);
- state.reportTimeout = setTimeout(update.bind(cm), state.options.delay + 100);
+ state.reportTimeout = setTimeout(update, state.options.delay + 100, cm);
state.postponeNewIssues = delay == undefined || delay == null;
- function update() { // this == cm
- var scope = this ? [this] : editors;
+ function update(cm) {
+ var scope = cm ? [cm] : editors;
var changed = false;
var fixedOldIssues = false;
scope.forEach(function(cm) {
- var state = cm.state.lint;
+ var state = cm.state.lint || {};
var oldMarkers = state.markedLast || {};
var newMarkers = {};
- var html = state.marked.length == 0 ? "" : "" +
+ var html = !state.marked || state.marked.length == 0 ? "" : "" +
state.marked.map(function(mark) {
var info = mark.__annotation;
var isActiveLine = info.from.line == cm.getCursor().line;
@@ -938,7 +980,7 @@ function renderLintReport(someBlockChanged) {
var newContent = content.cloneNode(false);
var issueCount = 0;
editors.forEach(function(cm, index) {
- if (cm.state.lint.html) {
+ if (cm.state.lint && cm.state.lint.html) {
var newBlock = newContent.appendChild(document.createElement("table"));
var html = "${icon + url}
`);
+ } else {
+ partial.push(`${icon}${match}` +
+ url.substr(match.length) + '
');
+ }
+ }
+ if (full.length) {
+ stats.full.data.push({text, urls: full});
+ }
+ if (partial.length) {
+ stats.partial.data.push({text, urls: partial});
+ }
+ }
+ showHelp(t('styleRegexpTestTitle'),
+ '' +
+ Object.keys(stats).map(type => (!stats[type].data.length ? '' :
+ `
');
+ document.querySelector('.regexp-report').onclick = event => {
+ const target = event.target.closest('a, .regexp-report div');
+ if (target) {
+ openURL({url: target.href || target.textContent});
+ event.preventDefault();
+ }
+ };
+ });
+}
+
function showHelp(title, text) {
var div = document.getElementById("help-popup");
div.classList.remove("big");
@@ -1575,14 +1776,16 @@ function showHelp(title, text) {
if (getComputedStyle(div).display == "none") {
document.addEventListener("keydown", closeHelp);
- div.querySelector(".close-icon").onclick = closeHelp; // avoid chaining on multiple showHelp() calls
+ div.querySelector(".dismiss").onclick = closeHelp; // avoid chaining on multiple showHelp() calls
}
div.style.display = "block";
return div;
function closeHelp(e) {
- if (e.type == "click" || (e.keyCode == 27 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
+ if (!e
+ || e.type == "click"
+ || ((e.keyCode || e.which) == 27 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey)) {
div.style.display = "";
document.querySelector(".contents").innerHTML = "";
document.removeEventListener("keydown", closeHelp);
@@ -1625,11 +1828,21 @@ function getParams() {
return params;
}
-chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+chrome.runtime.onMessage.addListener(onRuntimeMessage);
+
+function onRuntimeMessage(request) {
switch (request.method) {
case "styleUpdated":
- if (styleId && styleId == request.id) {
- initWithStyle(request.style);
+ if (styleId && styleId == request.style.id && request.reason != 'editSave') {
+ if ((request.style.sections[0] || {}).code === null) {
+ // the code-less style came from notifyAllTabs
+ onBackgroundReady().then(() => {
+ request.style = BG.cachedStyles.byId.get(request.style.id);
+ initWithStyle(request);
+ });
+ } else {
+ initWithStyle(request);
+ }
}
break;
case "styleDeleted":
@@ -1640,14 +1853,93 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
}
break;
case "prefChanged":
- if (request.prefName == "editor.smartIndent") {
- CodeMirror.setOption("smartIndent", request.value);
+ if ('editor.smartIndent' in request.prefs) {
+ CodeMirror.setOption('smartIndent', request.prefs['editor.smartIndent']);
}
+ break;
+ case 'editDeleteText':
+ document.execCommand('delete');
+ break;
}
-});
+}
function getComputedHeight(el) {
var compStyle = getComputedStyle(el);
return el.getBoundingClientRect().height +
parseFloat(compStyle.marginTop) + parseFloat(compStyle.marginBottom);
}
+
+
+function getCodeMirrorThemes() {
+ if (!chrome.runtime.getPackageDirectoryEntry) {
+ const themes = Promise.resolve([
+ chrome.i18n.getMessage('defaultTheme'),
+ '3024-day',
+ '3024-night',
+ 'abcdef',
+ 'ambiance',
+ 'ambiance-mobile',
+ 'base16-dark',
+ 'base16-light',
+ 'bespin',
+ 'blackboard',
+ 'cobalt',
+ 'colorforth',
+ 'dracula',
+ 'duotone-dark',
+ 'duotone-light',
+ 'eclipse',
+ 'elegant',
+ 'erlang-dark',
+ 'hopscotch',
+ 'icecoder',
+ 'isotope',
+ 'lesser-dark',
+ 'liquibyte',
+ 'material',
+ 'mbo',
+ 'mdn-like',
+ 'midnight',
+ 'monokai',
+ 'neat',
+ 'neo',
+ 'night',
+ 'panda-syntax',
+ 'paraiso-dark',
+ 'paraiso-light',
+ 'pastel-on-dark',
+ 'railscasts',
+ 'rubyblue',
+ 'seti',
+ 'solarized',
+ 'the-matrix',
+ 'tomorrow-night-bright',
+ 'tomorrow-night-eighties',
+ 'ttcn',
+ 'twilight',
+ 'vibrant-ink',
+ 'xq-dark',
+ 'xq-light',
+ 'yeti',
+ 'zenburn',
+ ]);
+ localStorage.codeMirrorThemes = themes.join(' ');
+ }
+ return new Promise(resolve => {
+ chrome.runtime.getPackageDirectoryEntry(rootDir => {
+ rootDir.getDirectory('codemirror/theme', {create: false}, themeDir => {
+ themeDir.createReader().readEntries(entries => {
+ const themes = [
+ chrome.i18n.getMessage('defaultTheme')
+ ].concat(
+ entries.filter(entry => entry.isFile)
+ .sort((a, b) => (a.name < b.name ? -1 : 1))
+ .map(entry => entry.name.replace(/\.css$/, ''))
+ );
+ localStorage.codeMirrorThemes = themes.join(' ');
+ resolve(themes);
+ });
+ });
+ });
+ });
+}
diff --git a/health.js b/health.js
deleted file mode 100644
index 857e0736..00000000
--- a/health.js
+++ /dev/null
@@ -1,11 +0,0 @@
-healthCheck();
-
-function healthCheck() {
- chrome.runtime.sendMessage({method: "healthCheck"}, function(ok) {
- if (ok === undefined) { // Chrome is starting up
- healthCheck();
- } else if (!ok && confirm(t("dbError"))) {
- window.open("http://userstyles.org/dberror");
- }
- });
-}
diff --git a/help.png b/images/help.png
similarity index 100%
rename from help.png
rename to images/help.png
diff --git a/128.png b/images/icon/128.png
similarity index 100%
rename from 128.png
rename to images/icon/128.png
diff --git a/16.png b/images/icon/16.png
similarity index 100%
rename from 16.png
rename to images/icon/16.png
diff --git a/16w.png b/images/icon/16w.png
similarity index 100%
rename from 16w.png
rename to images/icon/16w.png
diff --git a/16x.png b/images/icon/16x.png
similarity index 100%
rename from 16x.png
rename to images/icon/16x.png
diff --git a/19.png b/images/icon/19.png
similarity index 100%
rename from 19.png
rename to images/icon/19.png
diff --git a/19w.png b/images/icon/19w.png
similarity index 100%
rename from 19w.png
rename to images/icon/19w.png
diff --git a/19x.png b/images/icon/19x.png
similarity index 100%
rename from 19x.png
rename to images/icon/19x.png
diff --git a/32.png b/images/icon/32.png
similarity index 100%
rename from 32.png
rename to images/icon/32.png
diff --git a/32w.png b/images/icon/32w.png
similarity index 100%
rename from 32w.png
rename to images/icon/32w.png
diff --git a/32x.png b/images/icon/32x.png
similarity index 100%
rename from 32x.png
rename to images/icon/32x.png
diff --git a/38.png b/images/icon/38.png
similarity index 100%
rename from 38.png
rename to images/icon/38.png
diff --git a/38w.png b/images/icon/38w.png
similarity index 100%
rename from 38w.png
rename to images/icon/38w.png
diff --git a/38x.png b/images/icon/38x.png
similarity index 100%
rename from 38x.png
rename to images/icon/38x.png
diff --git a/48.png b/images/icon/48.png
similarity index 100%
rename from 48.png
rename to images/icon/48.png
diff --git a/images/world_go.png b/images/world_go.png
new file mode 100644
index 00000000..79239a2c
Binary files /dev/null and b/images/world_go.png differ
diff --git a/install.js b/install.js
index cc1ffb7d..61d031c5 100644
--- a/install.js
+++ b/install.js
@@ -1,180 +1,212 @@
-chrome.runtime.sendMessage({method: "getStyles", url: getMeta("stylish-id-url") || location.href}, function(response) {
- if (response.length == 0) {
- sendEvent("styleCanBeInstalledChrome");
- } else {
- var installedStyle = response[0];
- // maybe an update is needed
- // use the md5 if available
- var md5Url = getMeta("stylish-md5-url");
- if (md5Url && installedStyle.md5Url && installedStyle.originalMd5) {
- getResource(md5Url, function(md5) {
- if (md5 == installedStyle.originalMd5) {
- sendEvent("styleAlreadyInstalledChrome", {updateUrl: installedStyle.updateUrl});
- } else {
- sendEvent("styleCanBeUpdatedChrome", {updateUrl: installedStyle.updateUrl});
- }
- });
- } else {
- getResource(getMeta("stylish-code-chrome"), function(code) {
- // this would indicate a failure (a style with settings?).
- if (code == null) {
- sendEvent("styleCanBeUpdatedChrome", {updateUrl: installedStyle.updateUrl});
- }
- var json = JSON.parse(code);
- if (json.sections.length == installedStyle.sections.length) {
- if (json.sections.every(function(section) {
- return installedStyle.sections.some(function(installedSection) {
- return sectionsAreEqual(section, installedSection);
- });
- })) {
- // everything's the same
- sendEvent("styleAlreadyInstalledChrome", {updateUrl: installedStyle.updateUrl});
- return;
- };
- }
- sendEvent("styleCanBeUpdatedChrome", {updateUrl: installedStyle.updateUrl});
- });
- }
- }
+'use strict';
+
+document.addEventListener('stylishUpdateChrome', onUpdateClicked);
+document.addEventListener('stylishInstallChrome', onInstallClicked);
+
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+ // orphaned content script check
+ if (msg.method == 'ping') {
+ sendResponse(true);
+ }
});
-function sectionsAreEqual(a, b) {
- if (a.code != b.code) {
- return false;
- }
- return ["urls", "urlPrefixes", "domains", "regexps"].every(function(attribute) {
- return arraysAreEqual(a[attribute], b[attribute]);
- });
+new MutationObserver((mutations, observer) => {
+ if (document.body) {
+ observer.disconnect();
+ chrome.runtime.sendMessage({
+ method: 'getStyles',
+ url: getMeta('stylish-id-url') || location.href
+ }, checkUpdatability);
+ }
+}).observe(document.documentElement, {childList: true});
+
+
+function checkUpdatability([installedStyle]) {
+ if (!installedStyle) {
+ sendEvent('styleCanBeInstalledChrome');
+ return;
+ }
+ const md5Url = getMeta('stylish-md5-url');
+ if (md5Url && installedStyle.md5Url && installedStyle.originalMd5) {
+ getResource(md5Url).then(md5 => {
+ reportUpdatable(md5 != installedStyle.originalMd5);
+ });
+ } else {
+ getResource(getMeta('stylish-code-chrome')).then(code => {
+ reportUpdatable(code === null ||
+ !styleSectionsEqual(JSON.parse(code), installedStyle));
+ });
+ }
+
+ function reportUpdatable(isUpdatable) {
+ sendEvent(
+ isUpdatable
+ ? 'styleCanBeUpdatedChrome'
+ : 'styleAlreadyInstalledChrome',
+ {
+ updateUrl: installedStyle.updateUrl
+ }
+ );
+ }
}
-function arraysAreEqual(a, b) {
- // treat empty array and undefined as equivalent
- if (typeof a == "undefined")
- return (typeof b == "undefined") || (b.length == 0);
- if (typeof b == "undefined")
- return (typeof a == "undefined") || (a.length == 0);
- if (a.length != b.length) {
- return false;
- }
- return a.every(function(entry) {
- return b.indexOf(entry) != -1;
- });
+
+function sendEvent(type, detail = null) {
+ detail = {detail};
+ if (typeof cloneInto != 'undefined') {
+ // Firefox requires explicit cloning, however USO can't process our messages anyway
+ // because USO tries to use a global "event" variable deprecated in Firefox
+ detail = cloneInto(detail, document); // eslint-disable-line no-undef
+ }
+ onDOMready().then(() => {
+ document.dispatchEvent(new CustomEvent(type, detail));
+ });
}
-function sendEvent(type, data) {
- if (typeof data == "undefined") {
- data = null;
- }
- var stylishEvent = new CustomEvent(type, {detail: data});
- document.dispatchEvent(stylishEvent);
+
+function onInstallClicked() {
+ if (!orphanCheck || !orphanCheck()) {
+ return;
+ }
+ getResource(getMeta('stylish-description'))
+ .then(name => saveStyleCode('styleInstall', name))
+ .then(() => getResource(getMeta('stylish-install-ping-url-chrome')));
}
-document.addEventListener("stylishUpdateChrome", stylishUpdateChrome);
-function stylishInstallChrome() {
- orphanCheck();
- getResource(getMeta("stylish-description"), function(name) {
- if (confirm(chrome.i18n.getMessage('styleInstall', [name]))) {
- getResource(getMeta("stylish-code-chrome"), function(code) {
- // check for old style json
- var json = JSON.parse(code);
- json.method = "saveStyle";
- chrome.runtime.sendMessage(json, function(response) {
- sendEvent("styleInstalledChrome");
- });
- });
- getResource(getMeta("stylish-install-ping-url-chrome"));
- }
- });
+
+function onUpdateClicked() {
+ if (!orphanCheck || !orphanCheck()) {
+ return;
+ }
+ chrome.runtime.sendMessage({
+ method: 'getStyles',
+ url: getMeta('stylish-id-url') || location.href,
+ }, ([style]) => {
+ saveStyleCode('styleUpdate', style.name, {id: style.id});
+ });
}
-document.addEventListener("stylishInstallChrome", stylishInstallChrome);
-function stylishUpdateChrome() {
- orphanCheck();
- chrome.runtime.sendMessage({method: "getStyles", url: getMeta("stylish-id-url") || location.href}, function(response) {
- var style = response[0];
- if (confirm(chrome.i18n.getMessage('styleUpdate', [style.name]))) {
- getResource(getMeta("stylish-code-chrome"), function(code) {
- var json = JSON.parse(code);
- json.method = "saveStyle";
- json.id = style.id;
- chrome.runtime.sendMessage(json, function() {
- sendEvent("styleInstalledChrome");
- });
- });
- }
- });
+
+function saveStyleCode(message, name, addProps) {
+ return new Promise(resolve => {
+ if (!confirm(chrome.i18n.getMessage(message, [name]))) {
+ return;
+ }
+ getResource(getMeta('stylish-code-chrome')).then(code => {
+ chrome.runtime.sendMessage(
+ Object.assign(JSON.parse(code), addProps, {
+ method: 'saveStyle',
+ reason: 'update',
+ }),
+ () => sendEvent('styleInstalledChrome')
+ );
+ resolve();
+ });
+ });
}
+
function getMeta(name) {
- var e = document.querySelector("link[rel='" + name + "']");
- return e ? e.getAttribute("href") : null;
+ const e = document.querySelector(`link[rel="${name}"]`);
+ return e ? e.getAttribute('href') : null;
}
-function getResource(url, callback) {
- if (url.indexOf("#") == 0) {
- if (callback) {
- callback(document.getElementById(url.substring(1)).innerText);
- }
- return;
- }
- var xhr = new XMLHttpRequest();
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4 && callback) {
- if (xhr.status >= 400) {
- callback(null);
- } else {
- callback(xhr.responseText);
- }
- }
- }
- if (url.length > 2000) {
- var parts = url.split("?");
- xhr.open("POST", parts[0], true);
- xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- xhr.send(parts[1]);
- } else {
- xhr.open("GET", url, true);
- xhr.send();
- }
+
+function getResource(url) {
+ return new Promise(resolve => {
+ if (url.startsWith('#')) {
+ resolve(document.getElementById(url.slice(1)).textContent);
+ } else {
+ chrome.runtime.sendMessage({method: 'download', url}, resolve);
+ }
+ });
}
-/* stylish to stylus; https://github.com/schomery/stylish-chrome/issues/12 */
-(function (es) {
- es.forEach(e => {
- [...e.childNodes].filter(n => n.nodeType == 3).forEach(n => {
- n.nodeValue = n.nodeValue.replace('Stylish', 'Stylus');
- });
- });
-})([
- ...document.querySelectorAll('div[id^="stylish-installed-style-not-installed-"]'),
- ...document.querySelectorAll('div[id^="stylish-installed-style-needs-update-"]')
-]);
-// orphaned content script check
+function styleSectionsEqual({sections: a}, {sections: b}) {
+ if (!a || !b) {
+ return undefined;
+ }
+ if (a.length != b.length) {
+ return false;
+ }
+ const checkedInB = [];
+ return a.every(sectionA => b.some(sectionB => {
+ if (!checkedInB.includes(sectionB) && propertiesEqual(sectionA, sectionB)) {
+ checkedInB.push(sectionB);
+ return true;
+ }
+ }));
+
+ function propertiesEqual(secA, secB) {
+ for (const name of ['urlPrefixes', 'urls', 'domains', 'regexps']) {
+ if (!equalOrEmpty(secA[name], secB[name], 'every', arrayMirrors)) {
+ return false;
+ }
+ }
+ return equalOrEmpty(secA.code, secB.code, 'substr', (a, b) => a == b);
+ }
+
+ function equalOrEmpty(a, b, telltale, comparator) {
+ const typeA = a && typeof a[telltale] == 'function';
+ const typeB = b && typeof b[telltale] == 'function';
+ return (
+ (a === null || a === undefined || (typeA && !a.length)) &&
+ (b === null || b === undefined || (typeB && !b.length))
+ ) || typeA && typeB && a.length == b.length && comparator(a, b);
+ }
+
+ function arrayMirrors(array1, array2) {
+ for (const el of array1) {
+ if (array2.indexOf(el) < 0) {
+ return false;
+ }
+ }
+ for (const el of array2) {
+ if (array1.indexOf(el) < 0) {
+ return false;
+ }
+ }
+ return true;
+ }
+}
+
+
+function onDOMready() {
+ if (document.readyState != 'loading') {
+ return Promise.resolve();
+ }
+ return new Promise(resolve => {
+ document.addEventListener('DOMContentLoaded', function _() {
+ document.removeEventListener('DOMContentLoaded', _);
+ resolve();
+ });
+ });
+}
-chrome.runtime.onMessage.addListener((msg, sender, sendResponse) =>
- msg.method == 'ping' && sendResponse(true));
function orphanCheck() {
- var port = chrome.runtime.connect();
- if (port) {
- port.disconnect();
- return;
- }
- // we're orphaned due to an extension update
- // we can detach event listeners
- document.removeEventListener('stylishUpdateChrome', stylishUpdateChrome);
- document.removeEventListener('stylishInstallChrome', stylishInstallChrome);
- // we can't detach chrome.runtime.onMessage because it's no longer connected internally
- // we can destroy global functions in this context to free up memory
- [
- 'arraysAreEqual',
- 'getMeta',
- 'getResource',
- 'orphanCheck',
- 'sectionsAreEqual',
- 'sendEvent',
- 'stylishUpdateChrome',
- 'stylishInstallChrome'
- ].forEach(fn => window[fn] = null);
+ const port = chrome.runtime.connect();
+ if (port) {
+ port.disconnect();
+ return true;
+ }
+ // we're orphaned due to an extension update
+ // we can detach event listeners
+ document.removeEventListener('stylishUpdateChrome', onUpdateClicked);
+ document.removeEventListener('stylishInstallChrome', onInstallClicked);
+ // we can't detach chrome.runtime.onMessage because it's no longer connected internally
+ // we can destroy global functions in this context to free up memory
+ [
+ 'checkUpdatability',
+ 'getMeta',
+ 'getResource',
+ 'onDOMready',
+ 'onInstallClicked',
+ 'onUpdateClicked',
+ 'orphanCheck',
+ 'saveStyleCode',
+ 'sendEvent',
+ 'styleSectionsEqual',
+ ].forEach(fn => (window[fn] = null));
}
diff --git a/localization.js b/localization.js
index f30f814c..2a6ac4c4 100644
--- a/localization.js
+++ b/localization.js
@@ -1,82 +1,121 @@
-var template = {};
+'use strict';
+
+const template = {};
tDocLoader();
+
function t(key, params) {
- var s = chrome.i18n.getMessage(key, params)
- if (s == "") {
- throw "Missing string '" + key + "'.";
- }
- return s;
-}
-function o(key) {
- document.write(t(key));
+ const cache = !params && t.cache[key];
+ const s = cache || chrome.i18n.getMessage(key, params);
+ if (s == '') {
+ throw `Missing string "${key}"`;
+ }
+ if (!params && !cache) {
+ t.cache[key] = s;
+ }
+ return s;
}
+
+
function tE(id, key, attr, esc) {
- if (attr) {
- document.getElementById(id).setAttribute(attr, t(key));
- } else if (typeof esc == "undefined" || esc) {
- document.getElementById(id).appendChild(document.createTextNode(t(key)));
- } else {
- document.getElementById(id).innerHTML = t(key);
- }
+ if (attr) {
+ document.getElementById(id).setAttribute(attr, t(key));
+ } else if (typeof esc == 'undefined' || esc) {
+ document.getElementById(id).appendChild(document.createTextNode(t(key)));
+ } else {
+ document.getElementById(id).innerHTML = t(key);
+ }
}
+
function tHTML(html) {
- var node = document.createElement("div");
- node.innerHTML = html.replace(/>\s+<'); // spaces are removed; use for an explicit space
- tNodeList(node.querySelectorAll("*"));
- var child = node.removeChild(node.firstElementChild);
- node.remove();
- return child;
+ const node = document.createElement('div');
+ node.innerHTML = html.replace(/>\s+<'); // spaces are removed; use for an explicit space
+ if (html.includes('i18n-')) {
+ tNodeList(node.getElementsByTagName('*'));
+ }
+ return node.firstElementChild;
}
+
function tNodeList(nodes) {
- for (var n = 0; n < nodes.length; n++) {
- var node = nodes[n];
- if (node.nodeType != 1) { // not an ELEMENT_NODE
- continue;
- }
- if (node.localName == "template") {
- tNodeList(node.content.querySelectorAll("*"));
- template[node.dataset.id] = node.content.firstElementChild;
- continue;
- }
- for (var a = node.attributes.length - 1; a >= 0; a--) {
- var attr = node.attributes[a];
- var name = attr.nodeName;
- if (name.indexOf("i18n-") != 0) {
- continue;
- }
- name = name.substr(5); // "i18n-".length
- var value = t(attr.value);
- switch (name) {
- case "text":
- node.insertBefore(document.createTextNode(value), node.firstChild);
- break;
- case "html":
- node.insertAdjacentHTML("afterbegin", value);
- break;
- default:
- node.setAttribute(name, value);
- }
- node.removeAttribute(attr.nodeName);
- }
- }
+ const PREFIX = 'i18n-';
+ for (let n = nodes.length; --n >= 0;) {
+ const node = nodes[n];
+ // skip non-ELEMENT_NODE
+ if (node.nodeType != 1) {
+ continue;
+ }
+ if (node.localName == 'template') {
+ const elements = node.content.querySelectorAll('*');
+ tNodeList(elements);
+ template[node.dataset.id] = elements[0];
+ // compress inter-tag whitespace to reduce number of DOM nodes by 25%
+ const walker = document.createTreeWalker(elements[0], NodeFilter.SHOW_TEXT);
+ const toRemove = [];
+ while (walker.nextNode()) {
+ const textNode = walker.currentNode;
+ if (!textNode.nodeValue.trim()) {
+ toRemove.push(textNode);
+ }
+ }
+ toRemove.forEach(el => el.remove());
+ continue;
+ }
+ for (let a = node.attributes.length; --a >= 0;) {
+ const attr = node.attributes[a];
+ const name = attr.nodeName;
+ if (!name.startsWith(PREFIX)) {
+ continue;
+ }
+ const type = name.substr(PREFIX.length);
+ const value = t(attr.value);
+ switch (type) {
+ case 'text':
+ node.insertBefore(document.createTextNode(value), node.firstChild);
+ break;
+ case 'text-append':
+ node.appendChild(document.createTextNode(value));
+ break;
+ case 'html':
+ node.insertAdjacentHTML('afterbegin', value);
+ break;
+ default:
+ node.setAttribute(type, value);
+ }
+ node.removeAttribute(name);
+ }
+ }
}
+
function tDocLoader() {
- // localize HEAD
- tNodeList(document.querySelectorAll("*"));
+ t.cache = tryJSONparse(localStorage.L10N) || {};
+ const cacheLength = Object.keys(t.cache).length;
+ // localize HEAD
+ tNodeList(document.getElementsByTagName('*'));
- // localize BODY
- var observer = new MutationObserver(function(mutations) {
- for (var m = 0; m < mutations.length; m++) {
- tNodeList(mutations[m].addedNodes);
- }
- });
- observer.observe(document, {subtree: true, childList: true});
- document.addEventListener("DOMContentLoaded", function() {
- observer.disconnect();
- tNodeList(document.querySelectorAll("*"));
- });
+ // localize BODY
+ const process = mutations => {
+ for (const mutation of mutations) {
+ tNodeList(mutation.addedNodes);
+ }
+ };
+ const observer = new MutationObserver(process);
+ const onLoad = () => {
+ tDocLoader.stop();
+ process(observer.takeRecords());
+ if (cacheLength != Object.keys(t.cache).length) {
+ localStorage.L10N = JSON.stringify(t.cache);
+ }
+ };
+ tDocLoader.start = () => {
+ observer.observe(document, {subtree: true, childList: true});
+ };
+ tDocLoader.stop = () => {
+ observer.disconnect();
+ document.removeEventListener('DOMContentLoaded', onLoad);
+ };
+ tDocLoader.start();
+ document.addEventListener('DOMContentLoaded', onLoad);
}
diff --git a/manage.css b/manage.css
new file mode 100644
index 00000000..f576411e
--- /dev/null
+++ b/manage.css
@@ -0,0 +1,779 @@
+body {
+ margin: 0;
+ font: 12px arial, sans-serif;
+ /* Firefox: fill the entire page for drag'n'drop to work */
+ display: flex;
+ height: 100%;
+}
+
+a {
+ color: #000;
+ transition: color .5s;
+ text-decoration-skip: ink;
+}
+
+a:hover {
+ color: #666;
+}
+
+#header {
+ width: 280px;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ padding: 15px;
+ border-right: 1px dashed #AAA;
+ -webkit-box-shadow: 0 0 50px -18px black;
+ overflow: auto;
+ box-sizing: border-box;
+ z-index: 9;
+}
+
+#header h1 {
+ margin-top: 0;
+}
+
+#header a[href^="edit"] {
+ text-decoration: none;
+}
+
+.firefox .chromium-only {
+ display: none;
+}
+
+#installed {
+ position: relative;
+ padding-left: 280px;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+.entry {
+ margin: 0;
+ padding: 1.25em 2em;
+ border-top: 1px solid #ddd;
+}
+
+.entry:first-child {
+ border-top: none;
+}
+
+.svg-icon {
+ cursor: pointer;
+ vertical-align: middle;
+ transition: fill .5s;
+ width: 20px;
+ height: 20px;
+}
+
+.svg-icon:hover {
+ fill: #000;
+}
+
+.svg-icon {
+ fill: #666;
+}
+
+.svg-icon.info {
+ width: 14px;
+ height: 16px;
+ margin-left: .5ex;
+}
+
+.homepage {
+ margin-left: 0.1em;
+ margin-right: 0.1em;
+}
+
+.homepage[href=""] {
+ display: none;
+}
+
+.homepage .svg-icon {
+ margin-top: -4px;
+ margin-left: .5ex;
+}
+
+.style-name {
+ margin-top: .25em;
+ word-break: break-word;
+}
+
+.style-name a, .style-edit-link {
+ text-decoration: none;
+}
+
+.style-name-link:hover {
+ text-decoration: underline;
+ color: #000;
+}
+
+.applies-to {
+ word-break: break-word;
+}
+
+.applies-to,
+.actions {
+ padding-left: 15px;
+ margin-bottom: 0;
+}
+
+.actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.actions > * {
+ margin-bottom: .25rem;
+}
+
+.actions > *:not(:last-child) {
+ margin-right: .25rem;
+}
+
+.applies-to label {
+ margin-right: .5ex;
+}
+
+.applies-to .target:hover {
+ background-color: rgba(128, 128, 128, .15);
+}
+
+.applies-to-extra:not([open]) {
+ display: inline;
+ margin-left: 1ex;
+}
+
+summary {
+ font-weight: bold;
+ cursor: pointer;
+ outline: none;
+}
+
+.applies-to-extra summary {
+ list-style-type: none; /* for FF, allegedly */
+}
+
+.applies-to-extra summary::-webkit-details-marker {
+ display: none;
+}
+
+.disabled h2::after {
+ content: "__MSG_genericDisabledLabel__";
+ font-weight: normal;
+ font-size: 11px;
+ text-transform: lowercase;
+ background: rgba(128, 128, 128, .2);
+ padding: 2px 5px 3px;
+ border-radius: 4px;
+ margin-left: 1ex;
+}
+
+.disabled {
+ opacity: 0.5;
+}
+
+.disabled .disable {
+ display: none;
+}
+
+.enabled .enable {
+ display: none;
+}
+
+/* compact layout */
+
+.newUI #installed {
+ display: table;
+ margin-top: .75rem;
+ margin-bottom: .75rem;
+}
+
+.newUI .disabled {
+ opacity: 1;
+}
+
+.newUI .disabled .style-name,
+.newUI .disabled .applies-to {
+ opacity: .5;
+}
+
+.newUI .entry {
+ display: table-row;
+}
+
+.newUI .entry:nth-child(2n) {
+ background-color: rgba(128, 128, 128, 0.05);
+}
+
+.newUI .entry > * {
+ padding: .9rem 0 1rem;
+ margin: 0;
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.newUI .checker {
+ position: relative;
+ top: 1px;
+ margin-right: 1ex;
+}
+
+.newUI .style-name {
+ font-size: 14px;
+ font-family: sans-serif;
+ text-indent: -2em;
+ padding-left: 3em;
+ padding-right: 30px;
+}
+
+.newUI .homepage .svg-icon {
+ position: absolute;
+ margin-top: 0;
+ margin-left: -28px;
+}
+
+.newUI .actions {
+ width: 60px;
+ height: 20px;
+ white-space: nowrap;
+}
+
+.newUI .actions > * {
+ margin: 0;
+}
+
+.newUI .actions .svg-icon {
+ margin-right: 8px;
+}
+
+.newUI .updater-icons > * {
+ transition: opacity 1s;
+ display: none;
+}
+
+.newUI .entry .svg-icon {
+ fill: #999;
+}
+
+.newUI .entry:hover .svg-icon {
+ fill: #666;
+}
+
+.newUI .entry:hover .svg-icon:hover {
+ fill: #000;
+}
+
+.newUI .checking-update .check-update {
+ opacity: 0;
+ display: inline;
+ pointer-events: none;
+}
+
+.newUI .can-update .update,
+.newUI .no-update:not(.update-problem):not(.update-done) .up-to-date,
+.newUI .no-update.update-problem .check-update,
+.newUI .update-done .updated {
+ display: inline;
+}
+
+.newUI .update-done .updated svg {
+ top: -4px;
+ position: relative;
+ /* unprefixed since Chrome 53 */
+ -webkit-filter: drop-shadow(0 4px 0 currentColor);
+ filter: drop-shadow(0 5px 0 currentColor);
+}
+
+.newUI .can-update .update,
+.newUI .no-update.update-problem .check-update {
+ cursor: pointer;
+}
+
+.newUI .can-update[data-details$="locally edited"] .update svg,
+.newUI .update-problem .check-update svg {
+ fill: #ef6969;
+}
+
+.newUI .can-update[data-details$="locally edited"]:hover .update svg,
+.newUI .entry.update-problem:hover .check-update svg {
+ fill: #fd4040;
+}
+
+.newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
+.newUI .entry.update-problem:hover .check-update svg:hover {
+ fill: red;
+}
+
+.newUI .updater-icons > :not(.check-update):after {
+ content: attr(title);
+ position: absolute;
+ margin-top: 18px;
+ margin-left: -36px;
+ padding: 1ex 1.5ex;
+ border: 1px solid #ded597;
+ background-color: #fffbd6;
+ border-radius: 4px;
+ box-shadow: 2px 3px 10px rgba(0,0,0,.25);
+ font-size: 90%;
+ animation: fadeout 10s;
+ animation-fill-mode: both;
+ z-index: 999;
+}
+
+.newUI .update-problem .check-update:after {
+ background-color: red;
+ border: 1px solid #d40000;
+ color: white;
+ animation: none;
+}
+
+.newUI .can-update .update:after {
+ animation: none;
+}
+
+.newUI .can-update:not([data-details$="locally edited"]) .update:after {
+ background-color: #c0fff0;
+ border: 1px solid #89cac9;
+}
+
+.newUI .applies-to {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+}
+
+.newUI .targets {
+ overflow: hidden;
+}
+
+.newUI .applies-to.expanded .targets {
+ max-height: 100vh;
+}
+
+.newUI .target {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: calc(100vw - 280px - 60px - 25vw - 3rem);
+ box-sizing: border-box;
+ padding-right: 1rem;
+ line-height: 18px;
+}
+
+.newUI .applies-to .expander {
+ margin: 0;
+ cursor: pointer;
+ font-size: 3ex;
+ line-height: .5ex;
+ vertical-align: super;
+ letter-spacing: .1ex;
+}
+
+.newUI .applies-to:not(.has-more) .expander {
+ display: none;
+}
+
+.newUI .has-favicons .applies-to .expander {
+ padding-left: 20px;
+}
+
+.newUI .target:hover {
+ background-color: inherit;
+}
+
+.newUI .target img {
+ width: 16px;
+ height: 16px;
+ vertical-align: sub;
+ margin-left: -20px;
+ margin-right: 4px;
+ transition: opacity .5s, filter .5s;
+ /* unprefixed since Chrome 53 */
+ -webkit-filter: grayscale(1);
+ filter: grayscale(1);
+ /* workaround for the buggy CSS filter: images in the hidden overflow are shown on Mac */
+ backface-visibility: hidden;
+ opacity: .25;
+ display: none;
+}
+
+.newUI .has-favicons .target {
+ padding-left: 20px;
+}
+
+.newUI .has-favicons .target img[src] {
+ display: inline;
+}
+
+.newUI .entry:hover .target img {
+ opacity: 1;
+ /* unprefixed since Chrome 53 */
+ -webkit-filter: grayscale(0);
+ filter: grayscale(0);
+}
+
+#newUIoptions {
+ display: none;
+}
+
+.newUI #newUIoptions {
+ display: initial;
+}
+
+#newUIoptions > * {
+ display: flex;
+ align-items: center;
+ margin-bottom: auto;
+ flex-wrap: wrap;
+}
+
+#newUIoptions input[type="number"] {
+ width: 3em;
+ margin-right: .5em;
+}
+
+input[id^="manage.newUI"] {
+ margin-left: 0;
+}
+
+#faviconsHelp {
+ overflow-y: auto;
+ font-size: 90%;
+ padding: 1ex 0 2ex 16px;
+}
+
+#faviconsHelp div {
+ display: flex;
+ align-items: center;
+ margin-top: 1ex;
+}
+
+/* Default, no update buttons */
+.update,
+.check-update {
+ display: none;
+}
+
+/* Check update button for things that can*/
+.updatable .check-update {
+ display: inline;
+}
+
+/* Update check in progress */
+.checking-update .check-update {
+ display: none;
+}
+
+/* Updates available */
+.can-update .update {
+ display: inline;
+}
+
+.can-update[data-details$="locally edited"] button.update:after {
+ content: "*";
+}
+
+.can-update .check-update {
+ display: none;
+}
+
+/* Updates not available */
+.no-update:not(.update-problem) .check-update {
+ display: none;
+}
+
+/* Updates done */
+.update-done .check-update {
+ display: none;
+}
+
+#apply-all-updates:after {
+ content: " (" attr(data-value) ")";
+}
+
+.update-in-progress #check-all-updates {
+ position: relative;
+}
+
+.update-in-progress #update-progress {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ background-color: currentColor;
+ content: "";
+ opacity: .35;
+}
+
+#update-all-no-updates[data-skipped-edited="true"]:after {
+ content: " __MSG_updateAllCheckSucceededSomeEdited__";
+}
+
+#check-all-updates-force {
+ margin-top: 1ex;
+}
+
+/* highlight updated/added styles */
+.highlight {
+ animation: highlight 10s cubic-bezier(0,.82,.47,.98);
+}
+
+@keyframes highlight {
+ from {
+ background-color: rgba(128, 128, 128, .5);
+ }
+ to {
+ background-color: none;
+ }
+}
+
+.hidden {
+ display: none !important;
+}
+
+fieldset {
+ border-width: 1px;
+ border-radius: 6px;
+ margin: 1em 0;
+}
+
+fieldset > * {
+ display: flex;
+ align-items: center;
+}
+
+#search {
+ width: calc(100% - 4px);
+ margin: 0.25rem 4px 0;
+ border-radius: 0.25rem;
+ padding-left: 0.25rem;
+ border-width: 1px;
+}
+
+#import ul {
+ margin-left: 0;
+ padding-left: 0;
+ list-style: none;
+}
+
+#import li {
+ margin-bottom: .5em;
+}
+
+#import pre {
+ background: #eee;
+ overflow: auto;
+ margin: 0 0 .5em 0;
+}
+
+/* drag-n-drop on import button */
+.dropzone:after {
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1000;
+ position: fixed;
+ padding: calc(50vh - 3em) calc(50vw - 5em);
+ content: attr(dragndrop-hint);
+ text-shadow: 1px 1px 10px black;
+ font-size: xx-large;
+ text-align: center;
+ animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
+ animation-fill-mode: both;
+}
+
+.fadeout.dropzone:after {
+ animation: fadeout .25s ease-in-out;
+ animation-fill-mode: both;
+}
+
+/* post-import report */
+#message-box details:not([data-id="invalid"]) div:hover {
+ background-color: rgba(128, 128, 128, .3);
+}
+
+#message-box details:not(:last-child) {
+ margin-bottom: 1em;
+}
+
+#message-box details small div {
+ margin-left: 1.5em;
+}
+
+.update-history-log {
+ font-size: 11px;
+ white-space: pre;
+ overflow-x: hidden;
+ text-overflow: ellipsis;
+}
+
+@keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes fadein-25pct {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: .25;
+ }
+}
+
+@media (max-width: 675px) {
+ #header {
+ height: auto;
+ position: static;
+ width: auto;
+ border-right: none;
+ border-bottom: 1px dashed #AAA;
+ }
+
+ #installed {
+ position: static;
+ padding-left: 0;
+ overflow: visible;
+ }
+
+ #header h1,
+ #header h2,
+ #header h3,
+ #backup-message {
+ display: none;
+ }
+
+ #header p,
+ #header fieldset div,
+ #backup {
+ display: inline-block;
+ }
+
+ #find-editor-styles {
+ display: inline-block;
+ }
+
+ #backup {
+ margin-right: 1em;
+ }
+
+ #backup p,
+ #header fieldset {
+ margin: 0;
+ }
+
+ .entry {
+ margin: 0;
+ }
+}
+
+@media (max-width: 800px) {
+ body {
+ flex-direction: column;
+ }
+
+ .newUI #header {
+ height: auto;
+ position: static;
+ width: auto;
+ border-right: none;
+ border-bottom: 1px dashed #AAA;
+ overflow: visible;
+ }
+
+ .newUI #installed {
+ padding-left: 0;
+ }
+
+ .newUI #header h1,
+ .newUI #header h2,
+ .newUI #header h3,
+ .newUI #header legend,
+ .newUI #backup-message {
+ display: none;
+ }
+
+ .newUI #header p,
+ .newUI #header fieldset div,
+ .newUI #options,
+ .newUI #backup,
+ .newUI #find-editor-styles,
+ .newUI #header fieldset label,
+ .newUI #header fieldset input,
+ .newUI #newUIoptions > * {
+ display: inline;
+ vertical-align: middle;
+ margin-top: 1ex;
+ margin-bottom: 1ex;
+ }
+
+ .newUI #header > * {
+ display: inline-block
+ }
+
+ .newUI #header button,
+ .newUI #header span,
+ .newUI #header div {
+ margin-right: 1ex;
+ }
+
+ .newUI #header label,
+ .newUI #header a {
+ white-space: nowrap
+ }
+
+ .newUI #backup p,
+ .newUI #header fieldset {
+ margin: 0;
+ padding: 0;
+ border: none;
+ }
+
+ .newUI #header fieldset input {
+ margin-left: 0;
+ }
+
+ .newUI #search {
+ width: auto;
+ }
+
+ .newUI .entry {
+ margin: 0;
+ }
+
+ .newUI .style-name {
+ width: 50%;
+ }
+
+ .newUI .target {
+ max-width: calc(50vw - 60px);
+ }
+}
+
+@media (max-width: 500px) {
+ .newUI #header > * {
+ display: inline;
+ }
+
+ .newUI .style-name {
+ word-break: break-all;
+ }
+}
diff --git a/manage.html b/manage.html
index 798a4eab..eb405e0a 100644
--- a/manage.html
+++ b/manage.html
@@ -1,300 +1,223 @@
-
+
-
-
+ `
+ )).join('
') + + '
'
+ )).join('') +
+ '${stats[type].label}
` + + stats[type].data.map(({text, urls}) => (!urls ? text : + `${text}
${urls.join('')}') + + '
+
+
+
+
+
+
+
+
+
- +
-
-
-
- -
-- - -
-- - - -
-
-
- "
],
"background": {
- "scripts": ["messaging.js", "storage-websql.js", "storage.js", "background.js", "update.js"]
+ "scripts": ["messaging.js", "storage.js", "prefs.js", "background.js", "update.js"]
},
"commands": {
"openManage": {
@@ -32,21 +34,22 @@
"matches": [""],
"run_at": "document_start",
"all_frames": true,
+ "match_about_blank": true,
"js": ["apply.js"]
},
{
"matches": ["http://userstyles.org/*", "https://userstyles.org/*"],
- "run_at": "document_end",
+ "run_at": "document_start",
"all_frames": false,
"js": ["install.js"]
}
],
"browser_action": {
"default_icon": {
- "16": "16w.png",
- "32": "32w.png",
- "19": "19w.png",
- "38": "38w.png"
+ "16": "/images/icon/16w.png",
+ "32": "/images/icon/32w.png",
+ "19": "/images/icon/19w.png",
+ "38": "/images/icon/38w.png"
},
"default_title": "Stylus",
"default_popup": "popup.html"
diff --git a/messaging.js b/messaging.js
index 379eace0..5c95ad33 100644
--- a/messaging.js
+++ b/messaging.js
@@ -1,146 +1,328 @@
+/* global BG: true, onRuntimeMessage, applyOnMessage, handleUpdate, handleDelete */
+'use strict';
+
// keep message channel open for sendResponse in chrome.runtime.onMessage listener
const KEEP_CHANNEL_OPEN = true;
-const OWN_ORIGIN = chrome.runtime.getURL('');
-function notifyAllTabs(request) {
- // list all tabs including chrome-extension:// which can be ours
- chrome.tabs.query({}, tabs => {
- for (let tab of tabs) {
- if (request.codeIsUpdated !== false || tab.url.startsWith(OWN_ORIGIN)) {
- chrome.tabs.sendMessage(tab.id, request);
- updateIcon(tab);
- }
- }
- });
- // notify all open popups
- const reqPopup = Object.assign({}, request, {method: 'updatePopup', reason: request.method});
- chrome.runtime.sendMessage(reqPopup);
- // notify self: the message no longer is sent to the origin in new Chrome
- if (typeof applyOnMessage !== 'undefined') {
- applyOnMessage(reqPopup);
- }
+const FIREFOX = /Firefox/.test(navigator.userAgent);
+const OPERA = /OPR/.test(navigator.userAgent);
+
+const URLS = {
+ ownOrigin: chrome.runtime.getURL(''),
+
+ optionsUI: [
+ chrome.runtime.getURL('options/index.html'),
+ 'chrome://extensions/?options=' + chrome.runtime.id,
+ ],
+
+ configureCommands:
+ OPERA ? 'opera://settings/configureCommands'
+ : 'chrome://extensions/configureCommands',
+
+ // CWS cannot be scripted in chromium, see ChromeExtensionsClient::IsScriptableURL
+ // https://cs.chromium.org/chromium/src/chrome/common/extensions/chrome_extensions_client.cc
+ chromeWebStore: FIREFOX ? 'N/A' : 'https://chrome.google.com/webstore/',
+
+ supported: new RegExp(
+ '^(file|ftps?|http)://|' +
+ `^https://${FIREFOX ? '' : '(?!chrome\\.google\\.com/webstore)'}|` +
+ '^' + chrome.runtime.getURL('')),
+};
+
+let BG = chrome.extension.getBackgroundPage();
+
+if (!BG || BG != window) {
+ document.documentElement.classList.toggle('firefox', FIREFOX);
+ document.documentElement.classList.toggle('opera', OPERA);
+ // TODO: remove once our manifest's minimum_chrome_version is 50+
+ // Chrome 49 doesn't report own extension pages in webNavigation apparently
+ if (navigator.userAgent.includes('Chrome/49.')) {
+ getActiveTab().then(BG.updateIcon);
+ }
}
-function refreshAllTabs() {
- return new Promise(resolve => {
- // list all tabs including chrome-extension:// which can be ours
- chrome.tabs.query({}, tabs => {
- const lastTab = tabs[tabs.length - 1];
- for (let tab of tabs) {
- getStyles({matchUrl: tab.url, enabled: true, asHash: true}, styles => {
- const message = {method: 'styleReplaceAll', styles};
- if (tab.url == location.href && typeof applyOnMessage !== 'undefined') {
- applyOnMessage(message);
- } else {
- chrome.tabs.sendMessage(tab.id, message);
- }
- updateIcon(tab, styles);
- if (tab == lastTab) {
- resolve();
- }
- });
- }
- });
- });
+function notifyAllTabs(msg) {
+ const originalMessage = msg;
+ if (msg.method == 'styleUpdated' || msg.method == 'styleAdded') {
+ // apply/popup/manage use only meta for these two methods,
+ // editor may need the full code but can fetch it directly,
+ // so we send just the meta to avoid spamming lots of tabs with huge styles
+ msg = Object.assign({}, msg, {
+ style: getStyleWithNoCode(msg.style)
+ });
+ }
+ const affectsAll = !msg.affects || msg.affects.all;
+ const affectsOwnOriginOnly = !affectsAll && (msg.affects.editor || msg.affects.manager);
+ const affectsTabs = affectsAll || affectsOwnOriginOnly;
+ const affectsIcon = affectsAll || msg.affects.icon;
+ const affectsPopup = affectsAll || msg.affects.popup;
+ const affectsSelf = affectsPopup || msg.prefs;
+ if (affectsTabs || affectsIcon) {
+ // list all tabs including chrome-extension:// which can be ours
+ chrome.tabs.query(affectsOwnOriginOnly ? {url: URLS.ownOrigin + '*'} : {}, tabs => {
+ for (const tab of tabs) {
+ // own pages will be notified via runtime.sendMessage later
+ if ((affectsTabs || URLS.optionsUI.includes(tab.url))
+ && !(affectsSelf && tab.url.startsWith(URLS.ownOrigin))) {
+ chrome.tabs.sendMessage(tab.id, msg);
+ }
+ if (affectsIcon && BG) {
+ BG.updateIcon(tab);
+ }
+ }
+ });
+ }
+ // notify self: the message no longer is sent to the origin in new Chrome
+ if (typeof onRuntimeMessage != 'undefined') {
+ onRuntimeMessage(originalMessage);
+ }
+ // notify apply.js on own pages
+ if (typeof applyOnMessage != 'undefined') {
+ applyOnMessage(originalMessage);
+ }
+ // notify background page and all open popups
+ if (affectsSelf) {
+ chrome.runtime.sendMessage(msg);
+ }
}
-function updateIcon(tab, styles) {
- // while NTP is still loading only process the request for its main frame with a real url
- // (but when it's loaded we should process style toggle requests from popups, for example)
- if (tab.url == "chrome://newtab/" && tab.status != "complete") {
- return;
- }
- if (styles) {
- // check for not-yet-existing tabs e.g. omnibox instant search
- chrome.tabs.get(tab.id, function() {
- if (!chrome.runtime.lastError) {
- // for 'styles' asHash:true fake the length by counting numeric ids manually
- if (styles.length === undefined) {
- styles.length = 0;
- for (var id in styles) {
- styles.length += id.match(/^\d+$/) ? 1 : 0;
- }
- }
- stylesReceived(styles);
- }
- });
- return;
- }
- getTabRealURL(tab, function(url) {
- // if we have access to this, call directly. a page sending a message to itself doesn't seem to work right.
- if (typeof getStyles != "undefined") {
- getStyles({matchUrl: url, enabled: true}, stylesReceived);
- } else {
- chrome.runtime.sendMessage({method: "getStyles", matchUrl: url, enabled: true}, stylesReceived);
- }
- });
- function stylesReceived(styles) {
- var disableAll = "disableAll" in styles ? styles.disableAll : prefs.get("disableAll");
- var postfix = disableAll ? "x" : styles.length == 0 ? "w" : "";
- chrome.browserAction.setIcon({
- path: {
- // Material Design 2016 new size is 16px
- 16: "16" + postfix + ".png", 32: "32" + postfix + ".png",
- // Chromium forks or non-chromium browsers may still use the traditional 19px
- 19: "19" + postfix + ".png", 38: "38" + postfix + ".png",
- },
- tabId: tab.id
- }, function() {
- // if the tab was just closed an error may occur,
- // e.g. 'windowPosition' pref updated in edit.js::window.onbeforeunload
- if (!chrome.runtime.lastError) {
- var t = prefs.get("show-badge") && styles.length ? ("" + styles.length) : "";
- chrome.browserAction.setBadgeText({text: t, tabId: tab.id});
- chrome.browserAction.setBadgeBackgroundColor({
- color: prefs.get(disableAll ? 'badgeDisabled' : 'badgeNormal')
- });
- }
- });
- //console.log("Tab " + tab.id + " (" + tab.url + ") badge text set to '" + t + "'.");
- }
+function getTab(id) {
+ return new Promise(resolve =>
+ chrome.tabs.get(id, tab =>
+ !chrome.runtime.lastError && resolve(tab)));
}
-function getActiveTab(callback) {
- chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
- callback(tabs[0]);
- });
+
+function getActiveTab() {
+ return new Promise(resolve =>
+ chrome.tabs.query({currentWindow: true, active: true}, tabs =>
+ resolve(tabs[0])));
}
-function getActiveTabRealURL(callback) {
- getActiveTab(function(tab) {
- getTabRealURL(tab, callback);
- });
+
+function getActiveTabRealURL() {
+ return getActiveTab()
+ .then(getTabRealURL);
}
-function getTabRealURL(tab, callback) {
- if (tab.url != "chrome://newtab/") {
- callback(tab.url);
- } else {
- chrome.webNavigation.getFrame({tabId: tab.id, frameId: 0, processId: -1}, function(frame) {
- frame && callback(frame.url);
- });
- }
+
+function getTabRealURL(tab) {
+ return new Promise(resolve => {
+ if (tab.url != 'chrome://newtab/') {
+ resolve(tab.url);
+ } else {
+ chrome.webNavigation.getFrame({tabId: tab.id, frameId: 0, processId: -1}, frame => {
+ resolve(frame && frame.url || '');
+ });
+ }
+ });
}
+
+// opens a tab or activates the already opened one,
+// reuses the New Tab page if it's focused now
+function openURL({url, currentWindow = true}) {
+ if (!url.includes('://')) {
+ url = chrome.runtime.getURL(url);
+ }
+ return new Promise(resolve => {
+ // [some] chromium forks don't handle their fake branded protocols
+ url = url.replace(/^(opera|vivaldi)/, 'chrome');
+ // API doesn't handle the hash-fragment part
+ chrome.tabs.query({url: url.replace(/#.*/, ''), currentWindow}, tabs => {
+ for (const tab of tabs) {
+ if (tab.url == url) {
+ activateTab(tab).then(resolve);
+ return;
+ }
+ }
+ getActiveTab().then(tab => {
+ if (tab && tab.url == 'chrome://newtab/') {
+ chrome.tabs.update({url}, resolve);
+ } else {
+ chrome.tabs.create(tab && !FIREFOX ? {url, openerTabId: tab.id} : {url}, resolve);
+ }
+ });
+ });
+ });
+}
+
+
+function activateTab(tab) {
+ return Promise.all([
+ new Promise(resolve => {
+ chrome.tabs.update(tab.id, {active: true}, resolve);
+ }),
+ new Promise(resolve => {
+ chrome.windows.update(tab.windowId, {focused: true}, resolve);
+ }),
+ ]);
+}
+
+
function stringAsRegExp(s, flags) {
- return new RegExp(s.replace(/[{}()\[\]\/\\.+?^$:=*!|]/g, "\\$&"), flags);
+ return new RegExp(s.replace(/[{}()[\]/\\.+?^$:=*!|]/g, '\\$&'), flags);
}
-// expands * as .*?
-function wildcardAsRegExp(s, flags) {
- return new RegExp(s.replace(/[{}()\[\]\/\\.+?^$:=!|]/g, "\\$&").replace(/\*/g, '.*?'), flags);
+
+function ignoreChromeError() {
+ chrome.runtime.lastError; // eslint-disable-line no-unused-expressions
}
-var configureCommands = {
- get url () {
- return navigator.userAgent.indexOf('OPR') > -1 ?
- 'opera://settings/configureCommands' :
- 'chrome://extensions/configureCommands'
- },
- open: () => {
- chrome.tabs.create({
- 'url': configureCommands.url
- });
- }
-};
+
+function getStyleWithNoCode(style) {
+ const stripped = Object.assign({}, style, {sections: []});
+ for (const section of style.sections) {
+ stripped.sections.push(Object.assign({}, section, {code: null}));
+ }
+ return stripped;
+}
+
+
+// js engine can't optimize the entire function if it contains try-catch
+// so we should keep it isolated from normal code in a minimal wrapper
+// Update: might get fixed in V8 TurboFan in the future
+function tryCatch(func, ...args) {
+ try {
+ return func(...args);
+ } catch (e) {}
+}
+
+
+function tryRegExp(regexp) {
+ try {
+ return new RegExp(regexp);
+ } catch (e) {}
+}
+
+
+function tryJSONparse(jsonString) {
+ try {
+ return JSON.parse(jsonString);
+ } catch (e) {}
+}
+
+
+const debounce = Object.assign((fn, delay, ...args) => {
+ clearTimeout(debounce.timers.get(fn));
+ debounce.timers.set(fn, setTimeout(debounce.run, delay, fn, ...args));
+}, {
+ timers: new Map(),
+ run(fn, ...args) {
+ debounce.timers.delete(fn);
+ fn(...args);
+ },
+ unregister(fn) {
+ clearTimeout(debounce.timers.get(fn));
+ debounce.timers.delete(fn);
+ },
+});
+
+
+function deepCopy(obj) {
+ return obj !== null && obj !== undefined && typeof obj == 'object'
+ ? deepMerge(typeof obj.slice == 'function' ? [] : {}, obj)
+ : obj;
+}
+
+
+function deepMerge(target, ...args) {
+ const isArray = typeof target.slice == 'function';
+ for (const obj of args) {
+ if (isArray && obj !== null && obj !== undefined) {
+ for (const element of obj) {
+ target.push(deepCopy(element));
+ }
+ continue;
+ }
+ for (const k in obj) {
+ const value = obj[k];
+ if (k in target && typeof value == 'object' && value !== null) {
+ deepMerge(target[k], value);
+ } else {
+ target[k] = deepCopy(value);
+ }
+ }
+ }
+ return target;
+}
+
+
+function sessionStorageHash(name) {
+ return {
+ name,
+ value: tryCatch(JSON.parse, sessionStorage[name]) || {},
+ set(k, v) {
+ this.value[k] = v;
+ this.updateStorage();
+ },
+ unset(k) {
+ delete this.value[k];
+ this.updateStorage();
+ },
+ updateStorage() {
+ sessionStorage[this.name] = JSON.stringify(this.value);
+ }
+ };
+}
+
+
+function onBackgroundReady(...dataPassthru) {
+ return BG ? Promise.resolve(...dataPassthru) : new Promise(ping);
+ function ping(resolve) {
+ chrome.runtime.sendMessage({method: 'healthCheck'}, health => {
+ if (health !== undefined) {
+ BG = chrome.extension.getBackgroundPage();
+ resolve(...dataPassthru);
+ } else {
+ ping(resolve);
+ }
+ });
+ }
+}
+
+
+// in case Chrome haven't yet loaded the bg page and displays our page like edit/manage
+function getStylesSafe(options) {
+ return onBackgroundReady(options).then(BG.getStyles);
+}
+
+
+function saveStyleSafe(style) {
+ return onBackgroundReady(BG.deepCopy(style))
+ .then(BG.saveStyle)
+ .then(savedStyle => {
+ if (style.notify === false) {
+ handleUpdate(savedStyle, style);
+ }
+ return savedStyle;
+ });
+}
+
+
+function deleteStyleSafe({id, notify = true} = {}) {
+ return onBackgroundReady({id, notify})
+ .then(BG.deleteStyle)
+ .then(() => {
+ if (!notify) {
+ handleDelete(id);
+ }
+ return id;
+ });
+}
+
+
+function download(url) {
+ return new Promise((resolve, reject) => {
+ const xhr = new XMLHttpRequest();
+ xhr.timeout = 10e3;
+ xhr.onloadend = () => (xhr.status == 200
+ ? resolve(xhr.responseText)
+ : reject(xhr.status));
+ const [mainUrl, query] = url.split('?');
+ xhr.open(query ? 'POST' : 'GET', mainUrl, true);
+ xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+ xhr.send(query);
+ });
+}
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
new file mode 100644
index 00000000..dc83e1e0
--- /dev/null
+++ b/msgbox/msgbox.css
@@ -0,0 +1,137 @@
+#message-box {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ position: fixed;
+ box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.35);
+ background-color: rgba(0, 0, 0, .25);
+ animation: fadein .25s ease-in-out;
+ z-index: 9999990;
+}
+
+#message-box > div {
+ top: 3rem;
+ right: 3rem;
+ min-width: 10rem;
+ max-width: 50vw;
+ min-height: 5rem;
+ max-height: 90vh;
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.35);
+ z-index: 9999991;
+}
+
+#message-box.fadeout {
+ animation: fadeout .5s ease-in-out;
+}
+
+#message-box.center {
+ align-items: center;
+ justify-content: center;
+}
+
+#message-box.center #message-box-contents {
+ text-align: center;
+}
+
+#message-box.center > div {
+ top: unset;
+ right: unset;
+}
+
+#message-box-title {
+ font-weight: bold;
+ background-color: rgb(145, 208, 198);
+ padding: .75rem 24px .75rem 52px;
+ font-size: 1rem;
+ position: relative;
+}
+
+#message-box-title::before {
+ content: "";
+ width: 0;
+ height: 0;
+ padding: 0 32px 32px 0;
+ background: url(/images/icon/32.png);
+ position: absolute;
+ left: .5rem;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+#message-box.danger #message-box-title {
+ background-color: firebrick;
+ color: white;
+}
+
+#message-box.danger #message-box-title::before {
+ background: url('/images/icon/32x.png');
+}
+
+#message-box.danger #message-box-contents {
+ font-weight: bold;
+}
+
+#message-box.danger #message-box-close-icon svg:hover {
+ fill: #600;
+}
+
+#message-box-close-icon {
+ cursor: pointer;
+ position: absolute;
+ right: 3px;
+ top: 4px;
+}
+
+#message-box-close-icon svg {
+ width: 16px;
+ height: 16px;
+}
+
+#message-box-contents {
+ overflow: auto;
+ padding: 1.5rem .75rem;
+ position: relative;
+ flex-grow: 9;
+ word-break: break-word;
+}
+
+#message-box-buttons {
+ padding: .75rem .375rem;
+ background-color: #f0f0f0;
+ text-align: center;
+}
+
+.non-windows #message-box-buttons {
+ text-align: right;
+ direction: rtl;
+}
+
+#message-box-buttons button {
+ margin: 0 .375rem;
+}
+
+@keyframes fadein {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeout {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
new file mode 100644
index 00000000..a7ebbe2a
--- /dev/null
+++ b/msgbox/msgbox.js
@@ -0,0 +1,96 @@
+'use strict';
+
+function messageBox({
+ title, // [mandatory] the title string for innerHTML
+ contents, // [mandatory] 1) DOM element 2) string for innerHTML
+ className = '', // string, CSS class name of the message box element
+ buttons = [], // array of strings used as labels
+ onshow, // function(messageboxElement) invoked after the messagebox is shown
+ blockScroll, // boolean, blocks the page scroll
+}) { // RETURNS: Promise resolved to {button[number], enter[boolean], esc[boolean]}
+ initOwnListeners();
+ bindGlobalListeners();
+ createElement();
+ document.body.appendChild(messageBox.element);
+ if (onshow) {
+ onshow(messageBox.element);
+ }
+ return new Promise(_resolve => {
+ messageBox.resolve = _resolve;
+ });
+
+ function initOwnListeners() {
+ messageBox.listeners = messageBox.listeners || {
+ closeIcon() {
+ resolveWith({button: -1});
+ },
+ button() {
+ resolveWith({button: this.buttonIndex});
+ },
+ key(event) {
+ const keyCode = event.keyCode || event.which;
+ if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
+ && (keyCode == 13 || keyCode == 27)) {
+ event.preventDefault();
+ resolveWith(keyCode == 13 ? {enter: true} : {esc: true});
+ }
+ },
+ scroll() {
+ scrollTo(blockScroll.x, blockScroll.y);
+ }
+ };
+ }
+
+ function resolveWith(value) {
+ setTimeout(messageBox.resolve, 0, value);
+ animateElement(messageBox.element, {className: 'fadeout', remove: true})
+ .then(unbindAndRemoveSelf);
+ }
+
+ function createElement() {
+ if (messageBox.element) {
+ unbindAndRemoveSelf();
+ }
+ const id = 'message-box';
+ const putAs = typeof contents == 'string' ? 'innerHTML' : 'appendChild';
+ messageBox.element = $element({id, className, appendChild: [
+ $element({appendChild: [
+ $element({id: `${id}-title`, innerHTML: title}),
+ $element({id: `${id}-close-icon`, appendChild:
+ $element({tag: 'SVG#svg', class: 'svg-icon', viewBox: '0 0 20 20', appendChild:
+ $element({tag: 'SVG#path', d: 'M11.69,10l4.55,4.55-1.69,1.69L10,11.69,' +
+ '5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z',
+ })
+ }),
+ onclick: messageBox.listeners.closeIcon}),
+ $element({id: `${id}-contents`, [putAs]: contents}),
+ $element({id: `${id}-buttons`, appendChild:
+ buttons.map((textContent, buttonIndex) => textContent &&
+ $element({
+ tag: 'button',
+ buttonIndex,
+ textContent,
+ onclick: messageBox.listeners.button,
+ })
+ )
+ }),
+ ]}),
+ ]});
+ }
+
+ function bindGlobalListeners() {
+ blockScroll = blockScroll && {x: scrollX, y: scrollY};
+ if (blockScroll) {
+ window.addEventListener('scroll', messageBox.listeners.scroll);
+ }
+ window.addEventListener('keydown', messageBox.listeners.key);
+ }
+
+ function unbindAndRemoveSelf() {
+ document.removeEventListener('keydown', messageBox.listeners.key);
+ window.removeEventListener('scroll', messageBox.listeners.scroll);
+ messageBox.element.remove();
+ messageBox.element = null;
+ messageBox.resolve = null;
+ }
+}
diff --git a/openOptions.js b/openOptions.js
deleted file mode 100644
index 24a73fb7..00000000
--- a/openOptions.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/* globals configureCommands */
-'use strict';
-
-document.querySelector('#manage-options-button').addEventListener("click", function() {
- if (chrome.runtime.openOptionsPage) {
- // Supported (Chrome 42+)
- chrome.runtime.openOptionsPage();
- } else {
- // Fallback
- window.open(chrome.runtime.getURL('options/index.html'));
- }
-});
-
-document.querySelector('#manage-shortcuts-button').addEventListener("click", configureCommands.open);
-
-document.querySelector('#editor-styles-button').addEventListener("click", function() {
- chrome.tabs.create({
- 'url': 'https://userstyles.org/styles/browse/chrome-extension'
- });
-});
diff --git a/options/index.css b/options/index.css
index 06a02eea..b1501ed7 100644
--- a/options/index.css
+++ b/options/index.css
@@ -1,22 +1,254 @@
-body {
- margin: 10px;
- font-family: "Helvetica Neue",Helvetica,sans-serif;
- font-size: 12px;
+html.opera {
+ text-align: center;
}
-table {
- width: 100%;
+html.opera body {
+ display: inline-block;
+ text-align: initial;
}
-td:last-child {
+
+html.firefox .block {
+ padding-left: 6px;
+}
+
+html.firefox #notes {
+ padding-left: calc(6px + 2ex);
+}
+
+body {
+ margin: 0;
+ font-family: "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 12px;
+ width: calc(16px + 100px + 8px + 260px + 8px + 60px + 4px + 16px);
+}
+
+.firefox .chromium-only {
+ display: none;
+}
+
+.block {
+ display: flex;
+ align-items: center;
+ margin: 1em 0;
+ border-bottom: 1px dotted #ccc;
+ padding: 0 0 1em 16px;
+ position: relative;
+}
+
+.block:last-child {
+ border-bottom: none;
+ padding-bottom: 0;
+}
+
+h1 {
+ width: 100px;
+ margin: 0;
+ font-size: 120%;
+ font-weight: bold;
+ padding-right: 8px;
+ word-wrap: break-word;
+}
+
+label {
+ display: block;
+ white-space: nowrap;
+ margin: .25ex 0;
+}
+
+label > * {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+label > :first-child {
+ width: 260px;
+ white-space: normal;
+ margin-right: 8px;
+}
+
+label:not([disabled]) > :first-child {
+ cursor: default;
+}
+
+label:not([disabled]):hover > :first-child {
+ text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
+}
+
+button,
+input[type=number],
+input[type="color"],
+.onoffswitch {
+ width: 60px;
+ box-sizing: border-box;
+}
+
+a {
+ text-decoration-skip: ink;
+}
+
+button {
+ text-align: center;
+}
+
+input[type=number] {
text-align: right;
}
-input[type=number],
-button {
- width: 80px;
+input[type=number]:invalid {
+ background-color: rgba(255, 0, 0, 0.1);
+ color: darkred;
}
-.notes {
+input[type="color"] {
+ box-sizing: border-box;
+ height: 2em;
+}
+
+#actions {
+ justify-content: space-around;
+ align-items: stretch;
+ padding-right: 8px;
+}
+
+#actions button {
+ width: auto;
+ margin-right: 8px;
+}
+
+[data-cmd="check-updates"] button {
+ position: relative;
+}
+
+.update-in-progress [data-cmd="check-updates"] {
+ opacity: .5;
+ pointer-events: none;
+}
+
+.update-in-progress #update-progress {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ background-color: currentColor;
+ content: "";
+ opacity: .35;
+}
+
+#updates-installed {
+ position: absolute;
+ font-size: 85%;
+ margin-top: 1px;
+}
+
+#updates-installed:after {
+ content: attr(data-value);
+ margin-left: .5ex;
+ font-weight: bold;
+}
+
+#updates-installed:not([data-value]),
+#updates-installed[data-value=""] {
+ display: none;
+}
+
+#notes {
+ background-color: #f4f4f4;
+ padding: 1.5ex 16px 1ex calc(16px + 2ex);
font-size: 90%;
color: #999;
}
+
+#notes ol {
+ margin: 0;
+ padding: 0;
+}
+
+#notes li:not(last-child) {
+ margin-bottom: 1ex;
+}
+
+#notes a {
+ color: inherit;
+}
+
+#notes a:hover {
+ color: black;
+}
+
+#notes p {
+ line-height: 1.25;
+ margin-top: 1ex;
+ margin-bottom: 1ex;
+}
+
+sup {
+ vertical-align: baseline;
+ position: relative;
+ top: -0.4em;
+}
+
+@keyframes fadeinout {
+ 0% { opacity: 0 }
+ 10% { opacity: 1 }
+ 25% { opacity: 1 }
+ 100% { opacity: 0 }
+}
+
+/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
+
+.onoffswitch {
+ position: relative;
+ margin: 1ex 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+}
+
+.onoffswitch input {
+ display: none;
+}
+
+.onoffswitch span {
+ display: block;
+ overflow: hidden;
+ cursor: pointer;
+ height: 12px;
+ padding: 0;
+ line-height: 12px;
+ border: 0 solid #E3E3E3;
+ border-radius: 12px;
+ background-color: #E0E0E0;
+ box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
+}
+
+.onoffswitch span:before {
+ content: "";
+ display: block;
+ width: 18px;
+ margin: -3px;
+ background: #efefef;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 46px;
+ border-radius: 18px;
+ box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
+}
+
+.onoffswitch input:checked + span {
+ background-color: #CAEBE3;
+}
+
+.onoffswitch input:checked + span, .onoffswitch input:checked + span:before {
+ border-color: #CAEBE3;
+}
+
+.onoffswitch input:checked + span .onoffswitch-inner {
+ margin-left: 0;
+}
+
+.onoffswitch input:checked + span:before {
+ right: 0;
+ background-color: #04BA9F;
+ box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
+}
diff --git a/options/index.html b/options/index.html
index a27a1ddc..5812ddc3 100644
--- a/options/index.html
+++ b/options/index.html
@@ -1,62 +1,109 @@
-
+
- Stylus Options
+ Stylus
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/manage.js b/manage.js
index 955f9e41..d1f3149e 100644
--- a/manage.js
+++ b/manage.js
@@ -1,438 +1,971 @@
-/* globals styleSectionsEqual */
-var lastUpdatedStyleId = null;
-var installed;
+/* global messageBox, getStyleWithNoCode */
+'use strict';
-var appliesToExtraTemplate = document.createElement("span");
-appliesToExtraTemplate.className = "applies-to-extra";
-appliesToExtraTemplate.innerHTML = " " + t('appliesDisplayTruncatedSuffix');
+let installed;
+const filtersSelector = {
+ hide: '',
+ unhide: '',
+};
-chrome.runtime.sendMessage({method: "getStyles"}, showStyles);
+const newUI = {
+ enabled: prefs.get('manage.newUI'),
+ favicons: prefs.get('manage.newUI.favicons'),
+ faviconsGray: prefs.get('manage.newUI.faviconsGray'),
+ targets: prefs.get('manage.newUI.targets'),
+ renderClass() {
+ document.documentElement.classList.toggle('newUI', newUI.enabled);
+ },
+};
+newUI.renderClass();
-function showStyles(styles) {
- if (!styles) { // Chrome is starting up
- chrome.runtime.sendMessage({method: "getStyles"}, showStyles);
- return;
- }
- if (!installed) {
- // "getStyles" message callback is invoked before document is loaded,
- // postpone the action until DOMContentLoaded is fired
- document.stylishStyles = styles;
- return;
- }
- styles.sort(function(a, b) { return a.name.localeCompare(b.name)});
- styles.forEach(handleUpdate);
- if (history.state) {
- window.scrollTo(0, history.state.scrollY);
- }
-}
+const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
+const GET_FAVICON_URL = 'https://www.google.com/s2/favicons?domain=';
+const OWN_ICON = chrome.runtime.getManifest().icons['16'];
-function createStyleElement(style) {
- var e = template.style.cloneNode(true);
- e.setAttribute("class", style.enabled ? "enabled" : "disabled");
- e.setAttribute("style-id", style.id);
- if (style.updateUrl) {
- e.setAttribute("style-update-url", style.updateUrl);
- }
- if (style.md5Url) {
- e.setAttribute("style-md5-url", style.md5Url);
- }
- if (style.originalMd5) {
- e.setAttribute("style-original-md5", style.originalMd5);
- }
+const handleEvent = {};
- var styleName = e.querySelector(".style-name");
- styleName.appendChild(document.createTextNode(style.name));
- if (style.url) {
- var homepage = template.styleHomepage.cloneNode(true)
- homepage.setAttribute("href", style.url);
- styleName.appendChild(document.createTextNode(" " ));
- styleName.appendChild(homepage);
- }
- var domains = [];
- var urls = [];
- var urlPrefixes = [];
- var regexps = [];
- function add(array, property) {
- style.sections.forEach(function(section) {
- if (section[property]) {
- section[property].filter(function(value) {
- return array.indexOf(value) == -1;
- }).forEach(function(value) {
- array.push(value);
- });;
- }
- });
- }
- add(domains, 'domains');
- add(urls, 'urls');
- add(urlPrefixes, 'urlPrefixes');
- add(regexps, 'regexps');
- var appliesToToShow = [];
- if (domains)
- appliesToToShow = appliesToToShow.concat(domains);
- if (urls)
- appliesToToShow = appliesToToShow.concat(urls);
- if (urlPrefixes)
- appliesToToShow = appliesToToShow.concat(urlPrefixes.map(function(u) { return u + "*"; }));
- if (regexps)
- appliesToToShow = appliesToToShow.concat(regexps.map(function(u) { return "/" + u + "/"; }));
- var appliesToString = "";
- var showAppliesToExtra = false;
- if (appliesToToShow.length == "")
- appliesToString = t('appliesToEverything');
- else if (appliesToToShow.length <= 10)
- appliesToString = appliesToToShow.join(", ");
- else {
- appliesToString = appliesToToShow.slice(0, 10).join(", ");
- showAppliesToExtra = true;
- }
- e.querySelector(".applies-to").appendChild(document.createTextNode(t('appliesDisplay', [appliesToString])));
- if (showAppliesToExtra) {
- e.querySelector(".applies-to").appendChild(appliesToExtraTemplate.cloneNode(true));
- }
- var editLink = e.querySelector(".style-edit-link");
- editLink.setAttribute("href", editLink.getAttribute("href") + style.id);
- editLink.addEventListener("click", function(event) {
- if (!event.altKey) {
- var left = event.button == 0, middle = event.button == 1,
- shift = event.shiftKey, ctrl = event.ctrlKey;
- var openWindow = left && shift && !ctrl;
- var openBackgroundTab = (middle && !shift) || (left && ctrl && !shift);
- var openForegroundTab = (middle && shift) || (left && ctrl && shift);
- var url = event.target.href || event.target.parentNode.href;
- event.preventDefault();
- event.stopPropagation();
- if (openWindow || openBackgroundTab || openForegroundTab) {
- if (openWindow) {
- var options = prefs.get("windowPosition");
- options.url = url;
- chrome.windows.create(options);
- } else {
- chrome.runtime.sendMessage({
- method: "openURL",
- url: url,
- active: openForegroundTab
- });
- }
- } else {
- history.replaceState({scrollY: window.scrollY}, document.title);
- getActiveTab(function(tab) {
- sessionStorageHash("manageStylesHistory").set(tab.id, url);
- location.href = url;
- });
- }
- }
- });
- e.querySelector(".enable").addEventListener("click", function(event) { enable(event, true); }, false);
- e.querySelector(".disable").addEventListener("click", function(event) { enable(event, false); }, false);
- e.querySelector(".check-update").addEventListener("click", doCheckUpdate, false);
- e.querySelector(".update").addEventListener("click", doUpdate, false);
- e.querySelector(".delete").addEventListener("click", doDelete, false);
- return e;
-}
-
-function enable(event, enabled) {
- var id = getId(event);
- enableStyle(id, enabled);
-}
-
-function doDelete() {
- if (!confirm(t('deleteStyleConfirm'))) {
- return;
- }
- var id = getId(event);
- deleteStyle(id);
-}
-
-function getId(event) {
- return getStyleElement(event).getAttribute("style-id");
-}
-
-function getStyleElement(event) {
- var e = event.target;
- while (e) {
- if (e.hasAttribute("style-id")) {
- return e;
- }
- e = e.parentNode;
- }
- return null;
-}
-
-chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
- switch (request.method) {
- case "styleUpdated":
- case "styleAdded":
- handleUpdate(request.style);
- break;
- case "styleDeleted":
- handleDelete(request.id);
- break;
- }
+Promise.all([
+ getStylesSafe(),
+ onDOMready().then(initGlobalEvents),
+]).then(([styles]) => {
+ showStyles(styles);
});
-function handleUpdate(style) {
- var element = createStyleElement(style);
- var oldElement = installed.querySelector(`[style-id="${style.id}"]`);
- if (!oldElement) {
- installed.appendChild(element);
- return;
- }
- installed.replaceChild(element, oldElement);
- if (style.id == lastUpdatedStyleId) {
- lastUpdatedStyleId = null;
- element.className = element.className += ' update-done';
- element.querySelector('.update-note').innerHTML = t('updateCompleted');
- }
+
+chrome.runtime.onMessage.addListener(onRuntimeMessage);
+
+function onRuntimeMessage(msg) {
+ switch (msg.method) {
+ case 'styleUpdated':
+ case 'styleAdded':
+ handleUpdate(msg.style, msg);
+ break;
+ case 'styleDeleted':
+ handleDelete(msg.id);
+ break;
+ }
}
+
+function initGlobalEvents() {
+ installed = $('#installed');
+ installed.onclick = handleEvent.entryClicked;
+ $('#check-all-updates').onclick = checkUpdateAll;
+ $('#check-all-updates-force').onclick = checkUpdateAll;
+ $('#apply-all-updates').onclick = applyUpdateAll;
+ $('#update-history').onclick = showUpdateHistory;
+ $('#search').oninput = searchStyles;
+ $('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
+ $('#manage-shortcuts-button').onclick = () => openURL({url: URLS.configureCommands});
+ $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
+
+ // focus search field on / key
+ document.onkeypress = event => {
+ if ((event.keyCode || event.which) == 47
+ && !event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey
+ && !event.target.matches('[type="text"], [type="search"]')) {
+ event.preventDefault();
+ $('#search').focus();
+ }
+ };
+
+ // remember scroll position on normal history navigation
+ window.onbeforeunload = rememberScrollPosition;
+
+ $$('[data-toggle-on-click]').forEach(el => {
+ // dataset on SVG doesn't work in Chrome 49-??, works in 57+
+ const target = $(el.getAttribute('data-toggle-on-click'));
+ el.onclick = () => target.classList.toggle('hidden');
+ });
+
+ // triggered automatically by setupLivePrefs() below
+ enforceInputRange($('#manage.newUI.targets'));
+
+ // N.B. triggers existing onchange listeners
+ setupLivePrefs();
+
+ $$('[data-filter]').forEach(el => {
+ el.onchange = handleEvent.filterOnChange;
+ if (el.closest('.hidden')) {
+ el.checked = false;
+ }
+ });
+ handleEvent.filterOnChange({forceRefilter: true});
+
+ $$('[id^="manage.newUI"]')
+ .forEach(el => (el.oninput = (el.onchange = switchUI)));
+
+ switchUI({styleOnly: true});
+}
+
+
+function showStyles(styles = []) {
+ const sorted = styles
+ .map(style => ({name: style.name.toLocaleLowerCase(), style}))
+ .sort((a, b) => (a.name < b.name ? -1 : a.name == b.name ? 0 : 1));
+ let index = 0;
+ const scrollY = (history.state || {}).scrollY;
+ const shouldRenderAll = scrollY > window.innerHeight;
+ const renderBin = document.createDocumentFragment();
+ if (scrollY) {
+ renderStyles();
+ } else {
+ requestAnimationFrame(renderStyles);
+ }
+
+ function renderStyles() {
+ const t0 = performance.now();
+ let rendered = 0;
+ while (index < sorted.length
+ && (shouldRenderAll || ++rendered < 10 || performance.now() - t0 < 10)) {
+ renderBin.appendChild(createStyleElement(sorted[index++]));
+ }
+ filterAndAppend({container: renderBin});
+ if (index < sorted.length) {
+ requestAnimationFrame(renderStyles);
+ return;
+ }
+ if ('scrollY' in (history.state || {})) {
+ setTimeout(window.scrollTo, 0, 0, history.state.scrollY);
+ }
+ if (newUI.enabled && newUI.favicons) {
+ debounce(handleEvent.loadFavicons, 16);
+ }
+ }
+}
+
+
+function createStyleElement({style, name}) {
+ // query the sub-elements just once, then reuse the references
+ if ((createStyleElement.parts || {}).newUI !== newUI.enabled) {
+ const entry = template[`style${newUI.enabled ? 'Compact' : ''}`];
+ createStyleElement.parts = {
+ newUI: newUI.enabled,
+ entry,
+ entryClassBase: entry.className,
+ checker: $('.checker', entry) || {},
+ nameLink: $('.style-name-link', entry),
+ editLink: $('.style-edit-link', entry) || {},
+ editHrefBase: $('.style-name-link', entry).getAttribute('href'),
+ homepage: $('.homepage', entry),
+ homepageIcon: template[`homepageIcon${newUI.enabled ? 'Small' : 'Big'}`],
+ appliesTo: $('.applies-to', entry),
+ targets: $('.targets', entry),
+ expander: $('.expander', entry),
+ decorations: {
+ urlPrefixesAfter: '*',
+ regexpsBefore: '/',
+ regexpsAfter: '/',
+ },
+ };
+ }
+ const parts = createStyleElement.parts;
+ parts.checker.checked = style.enabled;
+ parts.nameLink.textContent = style.name;
+ parts.nameLink.href = parts.editLink.href = parts.editHrefBase + style.id;
+ parts.homepage.href = parts.homepage.title = style.url || '';
+
+ const entry = parts.entry.cloneNode(true);
+ entry.id = 'style-' + style.id;
+ entry.styleId = style.id;
+ entry.styleNameLowerCase = name || style.name.toLocaleLowerCase();
+ entry.styleMeta = getStyleWithNoCode(style);
+ entry.className = parts.entryClassBase + ' ' +
+ (style.enabled ? 'enabled' : 'disabled') +
+ (style.updateUrl ? ' updatable' : '');
+
+ if (style.url) {
+ $('.homepage', entry).appendChild(parts.homepageIcon.cloneNode(true));
+ }
+ if (style.updateUrl && newUI.enabled) {
+ $('.actions', entry).appendChild(template.updaterIcons.cloneNode(true));
+ }
+
+ // name being supplied signifies we're invoked by showStyles()
+ // which debounces its main loop thus loading the postponed favicons
+ createStyleTargetsElement({entry, style, postponeFavicons: name});
+
+ return entry;
+}
+
+
+function createStyleTargetsElement({entry, style, postponeFavicons}) {
+ const parts = createStyleElement.parts;
+ const targets = parts.targets.cloneNode(true);
+ let container = targets;
+ let numTargets = 0;
+ let numIcons = 0;
+ const displayed = new Set();
+ for (const type of TARGET_TYPES) {
+ for (const section of style.sections) {
+ for (const targetValue of section[type] || []) {
+ if (displayed.has(targetValue)) {
+ continue;
+ }
+ displayed.add(targetValue);
+ const element = template.appliesToTarget.cloneNode(true);
+ if (!newUI.enabled) {
+ if (numTargets == 10) {
+ container = container.appendChild(template.extraAppliesTo.cloneNode(true));
+ } else if (numTargets > 1) {
+ container.appendChild(template.appliesToSeparator.cloneNode(true));
+ }
+ } else if (newUI.favicons) {
+ let favicon = '';
+ if (type == 'domains') {
+ favicon = GET_FAVICON_URL + targetValue;
+ } else if (targetValue.startsWith('chrome-extension:')) {
+ favicon = OWN_ICON;
+ } else if (type != 'regexps') {
+ favicon = targetValue.includes('://') && targetValue.match(/^.*?:\/\/([^/]+)/);
+ favicon = favicon ? GET_FAVICON_URL + favicon[1] : '';
+ }
+ if (favicon) {
+ element.appendChild(document.createElement('img')).dataset.src = favicon;
+ numIcons++;
+ }
+ }
+ element.appendChild(
+ document.createTextNode(
+ (parts.decorations[type + 'Before'] || '') +
+ targetValue +
+ (parts.decorations[type + 'After'] || '')));
+ container.appendChild(element);
+ numTargets++;
+ }
+ }
+ }
+ if (newUI.enabled) {
+ if (numTargets > newUI.targets) {
+ $('.applies-to', entry).classList.add('has-more');
+ }
+ if (numIcons && !postponeFavicons) {
+ debounce(handleEvent.loadFavicons);
+ }
+ }
+ const entryTargets = $('.targets', entry);
+ if (numTargets) {
+ entryTargets.parentElement.replaceChild(targets, entryTargets);
+ } else {
+ entryTargets.appendChild(template.appliesToEverything.cloneNode(true));
+ }
+ entry.classList.toggle('global', !numTargets);
+}
+
+
+Object.assign(handleEvent, {
+
+ ENTRY_ROUTES: {
+ '.checker, .enable, .disable': 'toggle',
+ '.style-name-link': 'edit',
+ '.homepage': 'external',
+ '.check-update': 'check',
+ '.update': 'update',
+ '.delete': 'delete',
+ '.applies-to .expander': 'expandTargets',
+ },
+
+ entryClicked(event) {
+ const target = event.target;
+ const entry = target.closest('.entry');
+ for (const selector in handleEvent.ENTRY_ROUTES) {
+ for (let el = target; el && el != entry; el = el.parentElement) {
+ if (el.matches(selector)) {
+ const handler = handleEvent.ENTRY_ROUTES[selector];
+ return handleEvent[handler].call(el, event, entry);
+ }
+ }
+ }
+ },
+
+ edit(event) {
+ if (event.altKey) {
+ return;
+ }
+ event.preventDefault();
+ event.stopPropagation();
+ const left = event.button == 0;
+ const middle = event.button == 1;
+ const shift = event.shiftKey;
+ const ctrl = event.ctrlKey;
+ const openWindow = left && shift && !ctrl;
+ const openBackgroundTab = (middle && !shift) || (left && ctrl && !shift);
+ const openForegroundTab = (middle && shift) || (left && ctrl && shift);
+ const url = event.target.closest('[href]').href;
+ if (openWindow || openBackgroundTab || openForegroundTab) {
+ if (openWindow) {
+ chrome.windows.create(Object.assign(prefs.get('windowPosition'), {url}));
+ } else {
+ openURL({url, active: openForegroundTab});
+ }
+ } else {
+ rememberScrollPosition();
+ getActiveTab().then(tab => {
+ sessionStorageHash('manageStylesHistory').set(tab.id, url);
+ location.href = url;
+ });
+ }
+ },
+
+ toggle(event, entry) {
+ saveStyleSafe({
+ id: entry.styleId,
+ enabled: this.matches('.enable') || this.checked,
+ });
+ },
+
+ check(event, entry) {
+ checkUpdate(entry);
+ },
+
+ update(event, entry) {
+ // update everything but name
+ saveStyleSafe(Object.assign(entry.updatedCode, {
+ id: entry.styleId,
+ name: null,
+ reason: 'update',
+ }));
+ },
+
+ delete(event, entry) {
+ const id = entry.styleId;
+ const {name} = BG.cachedStyles.byId.get(id) || {};
+ animateElement(entry, {className: 'highlight'});
+ messageBox({
+ title: t('deleteStyleConfirm'),
+ contents: name,
+ className: 'danger center',
+ buttons: [t('confirmDelete'), t('confirmCancel')],
+ })
+ .then(({button, enter, esc}) => {
+ if (button == 0 || enter) {
+ deleteStyleSafe({id});
+ }
+ });
+ },
+
+ external(event) {
+ openURL({url: event.target.closest('a').href});
+ event.preventDefault();
+ },
+
+ expandTargets() {
+ this.closest('.applies-to').classList.toggle('expanded');
+ },
+
+ loadFavicons(container = document.body) {
+ for (const img of $$('img', container)) {
+ if (img.dataset.src) {
+ img.src = img.dataset.src;
+ delete img.dataset.src;
+ }
+ }
+ },
+
+ filterOnChange({target: el, forceRefilter}) {
+ const getValue = el => (el.type == 'checkbox' ? el.checked : el.value.trim());
+ if (!forceRefilter) {
+ const value = getValue(el);
+ if (value == el.lastValue) {
+ return;
+ }
+ el.lastValue = value;
+ }
+ const enabledFilters = $$('#header [data-filter]').filter(el => getValue(el));
+ const buildFilter = hide =>
+ (hide ? '' : '.entry.hidden') +
+ [...enabledFilters.map(el =>
+ el.dataset[hide ? 'filterHide' : 'filter']
+ .split(/,\s*/)
+ .map(s => (hide ? '.entry:not(.hidden)' : '') + s)
+ .join(','))
+ ].join(hide ? ',' : '');
+ Object.assign(filtersSelector, {
+ hide: buildFilter(true),
+ unhide: buildFilter(false),
+ });
+ reapplyFilter();
+ },
+});
+
+
+function handleUpdate(style, {reason, method} = {}) {
+ let entry;
+ let oldEntry = $('#style-' + style.id);
+ if (oldEntry && method == 'styleUpdated') {
+ handleToggledOrCodeOnly();
+ }
+ entry = entry || createStyleElement({style});
+ if (oldEntry) {
+ if (oldEntry.styleNameLowerCase == entry.styleNameLowerCase) {
+ installed.replaceChild(entry, oldEntry);
+ } else {
+ oldEntry.remove();
+ }
+ }
+ if (reason == 'update' && entry.matches('.updatable')) {
+ handleUpdateInstalled();
+ }
+ filterAndAppend({entry});
+ if (!entry.matches('.hidden') && reason != 'import') {
+ animateElement(entry, {className: 'highlight'});
+ scrollElementIntoView(entry);
+ }
+
+ function handleToggledOrCodeOnly() {
+ const newStyleMeta = getStyleWithNoCode(style);
+ const diff = objectDiff(oldEntry.styleMeta, newStyleMeta);
+ if (diff.length == 0) {
+ // only code was modified
+ entry = oldEntry;
+ oldEntry = null;
+ }
+ if (diff.length == 1 && diff[0].key == 'enabled') {
+ oldEntry.classList.toggle('enabled', style.enabled);
+ oldEntry.classList.toggle('disabled', !style.enabled);
+ $$('.checker', oldEntry).forEach(el => (el.checked = style.enabled));
+ oldEntry.styleMeta = newStyleMeta;
+ entry = oldEntry;
+ oldEntry = null;
+ }
+ }
+
+ function handleUpdateInstalled() {
+ entry.classList.add('update-done');
+ entry.classList.remove('can-update', 'updatable');
+ $('.update-note', entry).textContent = t('updateCompleted');
+ renderUpdatesOnlyFilter();
+ }
+}
+
+
function handleDelete(id) {
- var node = installed.querySelector("[style-id='" + id + "']");
- if (node) {
- installed.removeChild(node);
- }
+ const node = $('#style-' + id);
+ if (node) {
+ node.remove();
+ if (node.matches('.can-update')) {
+ const btnApply = $('#apply-all-updates');
+ btnApply.dataset.value = Number(btnApply.dataset.value) - 1;
+ }
+ }
}
-function doCheckUpdate(event) {
- checkUpdate(getStyleElement(event));
+
+function switchUI({styleOnly} = {}) {
+ const current = {};
+ const changed = {};
+ let someChanged = false;
+ // ensure the global option is processed first
+ for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) {
+ const id = el.id.replace(/^manage\.newUI\.?/, '') || 'enabled';
+ const value = el.type == 'checkbox' ? el.checked : Number(el.value);
+ const valueChanged = value !== newUI[id] && (id == 'enabled' || current.enabled);
+ current[id] = value;
+ changed[id] = valueChanged;
+ someChanged |= valueChanged;
+ }
+
+ if (!styleOnly && !someChanged) {
+ return;
+ }
+
+ Object.assign(newUI, current);
+ newUI.renderClass();
+ installed.classList.toggle('has-favicons', newUI.favicons);
+ $('#style-overrides').textContent = `
+ .newUI .targets {
+ max-height: ${newUI.targets * 18}px;
+ }
+ ` + (newUI.faviconsGray ? `
+ .newUI .target img {
+ -webkit-filter: grayscale(1);
+ filter: grayscale(1);
+ opacity: .25;
+ }
+ ` : `
+ .newUI .target img {
+ -webkit-filter: none;
+ filter: none;
+ opacity: 1;
+ }
+ `);
+
+ if (styleOnly) {
+ return;
+ }
+
+ const missingFavicons = newUI.enabled && newUI.favicons && !$('.applies-to img');
+ if (changed.enabled || (missingFavicons && !createStyleElement.parts)) {
+ installed.innerHTML = '';
+ getStylesSafe().then(showStyles);
+ return;
+ }
+ if (changed.targets) {
+ for (const targets of $$('.entry .targets')) {
+ const hasMore = targets.children.length > newUI.targets;
+ targets.parentElement.classList.toggle('has-more', hasMore);
+ }
+ return;
+ }
+ if (missingFavicons) {
+ getStylesSafe().then(styles => {
+ for (const style of styles) {
+ const entry = $('#style-' + style.id);
+ if (entry) {
+ createStyleTargetsElement({entry, style, postponeFavicons: true});
+ }
+ }
+ debounce(handleEvent.loadFavicons);
+ });
+ return;
+ }
}
+
function applyUpdateAll() {
- var btnApply = document.getElementById("apply-all-updates");
- btnApply.disabled = true;
- setTimeout(function() {
- btnApply.style.display = "none";
- btnApply.disabled = false;
- }, 1000);
+ const btnApply = $('#apply-all-updates');
+ btnApply.disabled = true;
+ setTimeout(() => {
+ btnApply.classList.add('hidden');
+ btnApply.disabled = false;
+ renderUpdatesOnlyFilter({show: false});
+ }, 1000);
- Array.prototype.forEach.call(document.querySelectorAll(".can-update .update"), function(button) {
- button.click();
- });
+ $$('.can-update .update').forEach(button => {
+ scrollElementIntoView(button);
+ button.click();
+ });
}
+
function checkUpdateAll() {
- var btnCheck = document.getElementById("check-all-updates");
- var btnApply = document.getElementById("apply-all-updates");
- var noUpdates = document.getElementById("update-all-no-updates");
+ document.body.classList.add('update-in-progress');
+ $('#check-all-updates').disabled = true;
+ $('#check-all-updates-force').classList.add('hidden');
+ $('#apply-all-updates').classList.add('hidden');
+ $('#update-all-no-updates').classList.add('hidden');
- btnCheck.disabled = true;
- btnApply.classList.add("hidden");
- noUpdates.classList.add("hidden");
+ const ignoreDigest = this && this.id == 'check-all-updates-force';
+ $$('.updatable:not(.can-update)' + (ignoreDigest ? '' : ':not(.update-problem)'))
+ .map(el => checkUpdate(el, {single: false}));
- var elements = document.querySelectorAll("[style-update-url]");
- var toCheckCount = elements.length;
- var updatableCount = 0;
- Array.prototype.forEach.call(elements, function(element) {
- checkUpdate(element, function(success) {
- if (success) {
- ++updatableCount;
- }
- if (--toCheckCount == 0) {
- btnCheck.disabled = false;
- if (updatableCount) {
- btnApply.classList.remove("hidden");
- } else {
- noUpdates.classList.remove("hidden");
- setTimeout(function() {
- noUpdates.classList.add("hidden");
- }, 10000);
- }
- }
- });
- });
- // notify the automatic updater to reset the next automatic update accordingly
- chrome.runtime.sendMessage({
- method: 'resetInterval'
- });
+ let total = 0;
+ let checked = 0;
+ let skippedEdited = 0;
+ let updated = 0;
+
+ BG.updater.checkAllStyles({observer, save: false, ignoreDigest}).then(done);
+
+ function observer(state, value, details) {
+ switch (state) {
+ case BG.updater.COUNT:
+ total = value;
+ break;
+ case BG.updater.UPDATED:
+ if (++updated == 1) {
+ $('#apply-all-updates').disabled = true;
+ $('#apply-all-updates').classList.remove('hidden');
+ }
+ $('#apply-all-updates').dataset.value = updated;
+ // fallthrough
+ case BG.updater.SKIPPED:
+ checked++;
+ if (details == BG.updater.EDITED || details == BG.updater.MAYBE_EDITED) {
+ skippedEdited++;
+ }
+ reportUpdateState(state, value, details);
+ break;
+ }
+ const progress = $('#update-progress');
+ const maxWidth = progress.parentElement.clientWidth;
+ progress.style.width = Math.round(checked / total * maxWidth) + 'px';
+ }
+
+ function done() {
+ document.body.classList.remove('update-in-progress');
+ $('#check-all-updates').disabled = total == 0;
+ $('#apply-all-updates').disabled = false;
+ renderUpdatesOnlyFilter({check: updated + skippedEdited > 0});
+ if (!updated) {
+ $('#update-all-no-updates').dataset.skippedEdited = skippedEdited > 0;
+ $('#update-all-no-updates').classList.remove('hidden');
+ $('#check-all-updates-force').classList.toggle('hidden', skippedEdited == 0);
+ }
+ }
}
-function checkUpdate(element, callback) {
- element.querySelector(".update-note").innerHTML = t('checkingForUpdate');
- element.className = element.className.replace("checking-update", "").replace("no-update", "").replace("can-update", "") + " checking-update";
- var id = element.getAttribute("style-id");
- var url = element.getAttribute("style-update-url");
- var md5Url = element.getAttribute("style-md5-url");
- var originalMd5 = element.getAttribute("style-original-md5");
- function handleSuccess(forceUpdate, serverJson) {
- chrome.runtime.sendMessage({method: "getStyles", id: id}, function(styles) {
- var style = styles[0];
- var needsUpdate = false;
- if (!forceUpdate && styleSectionsEqual(style, serverJson)) {
- handleNeedsUpdate("no", id, serverJson);
- } else {
- handleNeedsUpdate("yes", id, serverJson);
- needsUpdate = true;
- }
- if (callback) {
- callback(needsUpdate);
- }
- });
- }
-
- function handleFailure(status) {
- if (status == 0) {
- handleNeedsUpdate(t('updateCheckFailServerUnreachable'), id, null);
- } else {
- handleNeedsUpdate(t('updateCheckFailBadResponseCode', [status]), id, null);
- }
- if (callback) {
- callback(false);
- }
- }
-
- if (!md5Url || !originalMd5) {
- checkUpdateFullCode(url, false, handleSuccess, handleFailure)
- } else {
- checkUpdateMd5(originalMd5, md5Url, function(needsUpdate) {
- if (needsUpdate) {
- // If the md5 shows a change we will update regardless of whether the code looks different
- checkUpdateFullCode(url, true, handleSuccess, handleFailure);
- } else {
- handleNeedsUpdate("no", id, null);
- if (callback) {
- callback(false);
- }
- }
- }, handleFailure);
- }
+function checkUpdate(entry, {single = true} = {}) {
+ $('.update-note', entry).textContent = t('checkingForUpdate');
+ $('.check-update', entry).title = '';
+ if (single) {
+ BG.updater.checkStyle({
+ save: false,
+ ignoreDigest: entry.classList.contains('update-problem'),
+ style: BG.cachedStyles.byId.get(entry.styleId),
+ observer: reportUpdateState,
+ });
+ }
+ entry.classList.remove('checking-update', 'no-update', 'update-problem');
+ entry.classList.add('checking-update');
}
-function checkUpdateFullCode(url, forceUpdate, successCallback, failureCallback) {
- download(url, function(responseText) {
- successCallback(forceUpdate, JSON.parse(responseText));
- }, failureCallback);
+
+function reportUpdateState(state, style, details) {
+ const entry = $('#style-' + style.id);
+ entry.classList.remove('checking-update');
+ switch (state) {
+ case BG.updater.UPDATED:
+ entry.classList.add('can-update');
+ entry.updatedCode = style;
+ $('.update-note', entry).textContent = '';
+ $('#onlyUpdates').classList.remove('hidden');
+ break;
+ case BG.updater.SKIPPED: {
+ if (entry.classList.contains('can-update')) {
+ break;
+ }
+ const same = details == BG.updater.SAME_MD5 || details == BG.updater.SAME_CODE;
+ const edited = details == BG.updater.EDITED || details == BG.updater.MAYBE_EDITED;
+ entry.dataset.details = details;
+ if (!details) {
+ details = t('updateCheckFailServerUnreachable');
+ } else if (typeof details == 'number') {
+ details = t('updateCheckFailBadResponseCode', [details]);
+ } else if (details == BG.updater.EDITED) {
+ details = t('updateCheckSkippedLocallyEdited') + '\n' + t('updateCheckManualUpdateHint');
+ } else if (details == BG.updater.MAYBE_EDITED) {
+ details = t('updateCheckSkippedMaybeLocallyEdited') + '\n' + t('updateCheckManualUpdateHint');
+ }
+ const message = same ? t('updateCheckSucceededNoUpdate') : details;
+ entry.classList.add('no-update');
+ entry.classList.toggle('update-problem', !same);
+ $('.update-note', entry).textContent = message;
+ $('.check-update', entry).title = newUI.enabled ? message : '';
+ $('.update', entry).title = t(edited ? 'updateCheckManualUpdateForce' : 'installUpdate');
+ if (!document.body.classList.contains('update-in-progress')) {
+ // this is a single update job so we can decide whether to hide the filter
+ renderUpdatesOnlyFilter({show: $('.can-update, .update-problem')});
+ }
+ }
+ }
+ if (filtersSelector.hide) {
+ filterAndAppend({entry});
+ }
}
-function checkUpdateMd5(originalMd5, md5Url, successCallback, failureCallback) {
- download(md5Url, function(responseText) {
- if (responseText.length != 32) {
- failureCallback(-1);
- return;
- }
- successCallback(responseText != originalMd5);
- }, failureCallback);
+
+function renderUpdatesOnlyFilter({show, check} = {}) {
+ const numUpdatable = $$('.can-update').length;
+ const mightUpdate = numUpdatable > 0 || $('.update-problem');
+ const checkbox = $('#onlyUpdates input');
+ show = show !== undefined ? show : mightUpdate;
+ check = check !== undefined ? show && check : checkbox.checked && mightUpdate;
+
+ $('#onlyUpdates').classList.toggle('hidden', !show);
+ checkbox.checked = check;
+ checkbox.dispatchEvent(new Event('change'));
+
+ const btnApply = $('#apply-all-updates');
+ if (!btnApply.matches('.hidden')) {
+ if (numUpdatable > 0) {
+ btnApply.dataset.value = numUpdatable;
+ } else {
+ btnApply.classList.add('hidden');
+ }
+ }
}
-function download(url, successCallback, failureCallback) {
- var xhr = new XMLHttpRequest();
- xhr.onreadystatechange = function (aEvt) {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- successCallback(xhr.responseText)
- } else {
- failureCallback(xhr.status);
- }
- }
- }
- if (url.length > 2000) {
- var parts = url.split("?");
- xhr.open("POST", parts[0], true);
- xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- xhr.send(parts[1]);
- } else {
- xhr.open("GET", url, true);
- xhr.send();
- }
+
+function showUpdateHistory() {
+ BG.chromeLocal.getValue('updateLog').then((lines = []) => {
+ messageBox({
+ title: t('updateCheckHistory'),
+ contents: $element({
+ className: 'update-history-log',
+ textContent: lines.join('\n'),
+ }),
+ buttons: [t('confirmOK')],
+ onshow: () => ($('#message-box-contents').scrollTop = 1e9),
+ });
+ });
}
-function handleNeedsUpdate(needsUpdate, id, serverJson) {
- var e = document.querySelector("[style-id='" + id + "']");
- e.className = e.className.replace("checking-update", "");
- switch (needsUpdate) {
- case "yes":
- e.className += " can-update";
- e.updatedCode = serverJson;
- e.querySelector(".update-note").innerHTML = '';
- break;
- case "no":
- e.className += " no-update";
- e.querySelector(".update-note").innerHTML = t('updateCheckSucceededNoUpdate');
- break;
- default:
- e.className += " no-update";
- e.querySelector(".update-note").innerHTML = needsUpdate;
- }
+
+function searchStyles({immediately, container}) {
+ const searchElement = $('#search');
+ const query = searchElement.value.toLocaleLowerCase();
+ const queryPrev = searchElement.lastValue || '';
+ if (query == queryPrev && !immediately && !container) {
+ return;
+ }
+ if (!immediately) {
+ clearTimeout(searchStyles.timeout);
+ searchStyles.timeout = setTimeout(searchStyles, 150, {immediately: true});
+ return;
+ }
+ searchElement.lastValue = query;
+
+ const searchInVisible = queryPrev && query.includes(queryPrev);
+ const entries = container && container.children || container ||
+ (searchInVisible ? $$('.entry:not(.hidden)') : installed.children);
+ let needsRefilter = false;
+ for (const entry of entries) {
+ let isMatching = !query;
+ if (!isMatching) {
+ const style = BG.cachedStyles.byId.get(entry.styleId) || {};
+ isMatching = Boolean(style && (
+ isMatchingText(style.name) ||
+ style.url && isMatchingText(style.url) ||
+ isMatchingStyle(style)));
+ }
+ if (entry.classList.contains('not-matching') != !isMatching) {
+ entry.classList.toggle('not-matching', !isMatching);
+ needsRefilter = true;
+ }
+ }
+ if (needsRefilter && !container) {
+ handleEvent.filterOnChange({forceRefilter: true});
+ }
+ return;
+
+ function isMatchingStyle(style) {
+ for (const section of style.sections) {
+ for (const prop in section) {
+ const value = section[prop];
+ switch (typeof value) {
+ case 'string':
+ if (isMatchingText(value)) {
+ return true;
+ }
+ break;
+ case 'object':
+ for (const str of value) {
+ if (isMatchingText(str)) {
+ return true;
+ }
+ }
+ break;
+ }
+ }
+ }
+ }
+
+ function isMatchingText(text) {
+ return text.toLocaleLowerCase().indexOf(query) >= 0;
+ }
}
-function doUpdate(event) {
- var element = getStyleElement(event);
- var updatedCode = element.updatedCode;
- // update everything but name
- delete updatedCode.name;
- updatedCode.id = element.getAttribute('style-id');
- updatedCode.method = "saveStyle";
-
- // updating the UI will be handled by the general update listener
- lastUpdatedStyleId = updatedCode.id;
- chrome.runtime.sendMessage(updatedCode, function () {});
+function filterAndAppend({entry, container}) {
+ if (!container) {
+ container = [entry];
+ // reverse the visibility, otherwise reapplyFilter will see no need to work
+ if (!filtersSelector.hide || !entry.matches(filtersSelector.hide)) {
+ entry.classList.add('hidden');
+ }
+ }
+ if ($('#search').value.trim()) {
+ searchStyles({immediately: true, container});
+ }
+ reapplyFilter(container);
}
-function searchStyles(immediately) {
- var query = document.getElementById("search").value.toLocaleLowerCase();
- if (query == (searchStyles.lastQuery || "")) {
- return;
- }
- searchStyles.lastQuery = query;
- if (immediately) {
- doSearch();
- } else {
- clearTimeout(searchStyles.timeout);
- searchStyles.timeout = setTimeout(doSearch, 100);
- }
- function doSearch() {
- chrome.runtime.sendMessage({method: "getStyles"}, function(styles) {
- styles.forEach(function(style) {
- var el = document.querySelector("[style-id='" + style.id + "']");
- if (el) {
- el.style.display = !query || isMatchingText(style.name) || isMatchingStyle(style) ? "" : "none";
- }
- });
- });
- }
- function isMatchingStyle(style) {
- return style.sections.some(function(section) {
- return Object.keys(section).some(function(key) {
- var value = section[key];
- switch (typeof value) {
- case "string": return isMatchingText(value);
- case "object": return value.some(isMatchingText);
- }
- });
- });
- }
- function isMatchingText(text) {
- return text.toLocaleLowerCase().indexOf(query) >= 0;
- }
+
+function reapplyFilter(container = installed) {
+ // A: show
+ let toUnhide = filtersSelector.hide ? filterContainer({hide: false}) : container;
+ // showStyles() is building the page and no filters are active
+ if (toUnhide instanceof DocumentFragment) {
+ installed.appendChild(toUnhide);
+ return;
+ } else if (toUnhide.length && $('#search').value.trim()) {
+ searchStyles({immediately: true, container: toUnhide});
+ toUnhide = filterContainer({hide: false});
+ }
+ // filtering needed or a single-element job from handleUpdate()
+ const entries = installed.children;
+ const numEntries = entries.length;
+ let numVisible = numEntries - $$('.entry.hidden').length;
+ for (const entry of toUnhide.children || toUnhide) {
+ const next = findInsertionPoint(entry);
+ if (entry.nextElementSibling !== next) {
+ installed.insertBefore(entry, next);
+ }
+ if (entry.classList.contains('hidden')) {
+ entry.classList.remove('hidden');
+ numVisible++;
+ }
+ }
+ // B: hide
+ const toHide = filtersSelector.hide ? filterContainer({hide: true}) : [];
+ if (!toHide.length) {
+ return;
+ }
+ for (const entry of toHide) {
+ entry.classList.add('hidden');
+ }
+ // showStyles() is building the page with filters active so we need to:
+ // 1. add all hidden entries to the end
+ // 2. add the visible entries before the first hidden entry
+ if (container instanceof DocumentFragment) {
+ for (const entry of toHide) {
+ installed.appendChild(entry);
+ }
+ installed.insertBefore(container, $('.entry.hidden'));
+ return;
+ }
+ // normal filtering of the page or a single-element job from handleUpdate()
+ // we need to keep the visible entries together at the start
+ // first pass only moves one hidden entry in hidden groups with odd number of items
+ shuffle(false);
+ setTimeout(shuffle, 0, true);
+ // single-element job from handleEvent(): add the last wraith
+ if (toHide.length == 1 && toHide[0].parentElement != installed) {
+ installed.appendChild(toHide[0]);
+ }
+ return;
+
+ function filterContainer({hide}) {
+ const selector = filtersSelector[hide ? 'hide' : 'unhide'];
+ if (container.filter) {
+ if (hide) {
+ // already filtered in previous invocation
+ return container;
+ }
+ const toHide = [], toUnhide = [];
+ for (const el of container) {
+ (el.matches(selector) ? toUnhide : toHide).push(el);
+ }
+ container = toHide;
+ return toUnhide;
+ } else {
+ return $$(selector, container);
+ }
+ }
+
+ function shuffle(fullPass) {
+ if (fullPass && !document.body.classList.contains('update-in-progress')) {
+ $('#check-all-updates').disabled = !$('.updatable:not(.can-update)');
+ }
+ // 1. skip the visible group on top
+ let firstHidden = $('#installed > .hidden');
+ let entry = firstHidden;
+ let i = [...entries].indexOf(entry);
+ let horizon = entries[numVisible];
+ const skipGroup = state => {
+ const start = i;
+ const first = entry;
+ while (entry && entry.classList.contains('hidden') == state) {
+ entry = entry.nextElementSibling;
+ i++;
+ }
+ return {first, start, len: i - start};
+ };
+ let prevGroup = i ? {first: entries[0], start: 0, len: i} : skipGroup(true);
+ // eslint-disable-next-line no-unmodified-loop-condition
+ while (entry) {
+ // 2a. find the next hidden group's start and end
+ // 2b. find the next visible group's start and end
+ const isHidden = entry.classList.contains('hidden');
+ const group = skipGroup(isHidden);
+ const hidden = isHidden ? group : prevGroup;
+ const visible = isHidden ? prevGroup : group;
+ // 3. move the shortest group; repeat 2-3
+ if (hidden.len < visible.len && (fullPass || hidden.len % 2)) {
+ // 3a. move hidden under the horizon
+ for (let j = 0; j < (fullPass ? hidden.len : 1); j++) {
+ const entry = entries[hidden.start];
+ installed.insertBefore(entry, horizon);
+ horizon = entry;
+ i--;
+ }
+ prevGroup = isHidden ? skipGroup(false) : group;
+ firstHidden = entry;
+ } else if (isHidden || !fullPass) {
+ prevGroup = group;
+ } else {
+ // 3b. move visible above the horizon
+ for (let j = 0; j < visible.len; j++) {
+ const entry = entries[visible.start + j];
+ installed.insertBefore(entry, firstHidden);
+ }
+ prevGroup = {
+ first: firstHidden,
+ start: hidden.start + visible.len,
+ len: hidden.len + skipGroup(true).len,
+ };
+ }
+ }
+ }
+
+ function findInsertionPoint(entry) {
+ const nameLLC = entry.styleNameLowerCase;
+ let a = 0;
+ let b = Math.min(numEntries, numVisible) - 1;
+ if (b < 0) {
+ return entries[numVisible];
+ }
+ if (entries[0].styleNameLowerCase > nameLLC) {
+ return entries[0];
+ }
+ if (entries[b].styleNameLowerCase <= nameLLC) {
+ return entries[numVisible];
+ }
+ // bisect
+ while (a < b - 1) {
+ const c = (a + b) / 2 | 0;
+ if (nameLLC < entries[c].styleNameLowerCase) {
+ b = c;
+ } else {
+ a = c;
+ }
+ }
+ if (entries[a].styleNameLowerCase > nameLLC) {
+ return entries[a];
+ }
+ while (a <= b && entries[a].styleNameLowerCase < nameLLC) {
+ a++;
+ }
+ return entries[entries[a].styleNameLowerCase <= nameLLC ? a + 1 : a];
+ }
}
-function onFilterChange (className, event) {
- installed.classList.toggle(className, event.target.checked);
-}
-function initFilter(className, node) {
- node.addEventListener("change", onFilterChange.bind(undefined, className), false);
- onFilterChange(className, {target: node});
+
+function rememberScrollPosition() {
+ history.replaceState({scrollY: window.scrollY}, document.title);
}
-document.addEventListener("DOMContentLoaded", function() {
- installed = document.getElementById("installed");
- if (document.stylishStyles) {
- showStyles(document.stylishStyles);
- delete document.stylishStyles;
- }
- document.getElementById("check-all-updates").addEventListener("click", checkUpdateAll);
- document.getElementById("apply-all-updates").addEventListener("click", applyUpdateAll);
- document.getElementById("search").addEventListener("input", searchStyles);
- searchStyles(true); // re-apply filtering on history Back
-
- setupLivePrefs([
- "manage.onlyEnabled",
- "manage.onlyEdited",
- "show-badge",
- "popup.stylesFirst"
- ]);
- initFilter("enabled-only", document.getElementById("manage.onlyEnabled"));
- initFilter("edited-only", document.getElementById("manage.onlyEdited"));
-});
+function objectDiff(first, second, path = '') {
+ const diff = [];
+ for (const key in first) {
+ const a = first[key];
+ const b = second[key];
+ if (a === b) {
+ continue;
+ }
+ if (b === undefined) {
+ diff.push({path, key, values: [a], type: 'removed'});
+ continue;
+ }
+ if (a && typeof a.filter == 'function' && b && typeof b.filter == 'function') {
+ if (a.length != b.length
+ || a.some((el, i) => !el || typeof el != 'object' ? el != b[i]
+ : objectDiff(el, b[i], path + key + '[' + i + '].').length)
+ ) {
+ diff.push({path, key, values: [a, b], type: 'changed'});
+ }
+ } else if (typeof a == 'object' && typeof b == 'object') {
+ diff.push(...objectDiff(a, b, path + key + '.'));
+ } else {
+ diff.push({path, key, values: [a, b], type: 'changed'});
+ }
+ }
+ for (const key in second) {
+ if (!(key in first)) {
+ diff.push({path, key, values: [second[key]], type: 'added'});
+ }
+ }
+ return diff;
+}
diff --git a/manifest.json b/manifest.json
index 4acfbc88..f737f6d3 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,23 +1,25 @@
{
"name": "Stylus",
"version": "1.0.5",
+ "minimum_chrome_version": "49",
"description": "__MSG_description__",
"homepage_url": "http://add0n.com/stylus.html",
"manifest_version": 2,
"icons": {
- "16": "16.png",
- "48": "48.png",
- "128": "128.png"
+ "16": "/images/icon/16.png",
+ "32": "/images/icon/32.png",
+ "48": "/images/icon/48.png",
+ "128": "/images/icon/128.png"
},
"permissions": [
"tabs",
"webNavigation",
"contextMenus",
"storage",
- "*://*/*"
+ "- -
-| - | - |
| - | - |
| - | - |
| 1 | -- |
-
-
+
-
-
-
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 2 | -- |
| - | - - - | -
-
- 1: -
- 2: , chrome://extensions/configureCommands +
- 1: -
- 2: , chrome://extensions/configureCommands +
+
-
diff --git a/options/index.js b/options/index.js
index 9797bc35..3b4dce31 100644
--- a/options/index.js
+++ b/options/index.js
@@ -1,97 +1,63 @@
-/* globals configureCommands */
'use strict';
-function restore () {
- chrome.runtime.getBackgroundPage(bg => {
- document.getElementById('badgeDisabled').value = bg.prefs.get('badgeDisabled');
- document.getElementById('badgeNormal').value = bg.prefs.get('badgeNormal');
- document.getElementById('popupWidth').value = localStorage.getItem('popupWidth') || '246';
- document.getElementById('updateInterval').value = bg.prefs.get('updateInterval');
- });
-}
-
-function save () {
- chrome.runtime.getBackgroundPage(bg => {
- bg.prefs.set('badgeDisabled', document.getElementById('badgeDisabled').value);
- bg.prefs.set('badgeNormal', document.getElementById('badgeNormal').value);
- localStorage.setItem('popupWidth', document.getElementById('popupWidth').value);
- bg.prefs.set(
- 'updateInterval',
- Math.max(0, +document.getElementById('updateInterval').value)
- );
- // display notification
- let status = document.getElementById('status');
- status.textContent = 'Options saved.';
- setTimeout(() => status.textContent = '', 750);
- });
-}
-
-document.addEventListener('DOMContentLoaded', restore);
-document.getElementById('save').addEventListener('click', save);
+setupLivePrefs();
+enforceInputRange($('#popupWidth'));
// actions
-document.addEventListener('click', e => {
- let cmd = e.target.dataset.cmd;
- let total = 0, updated = 0;
+document.onclick = e => {
+ const target = e.target.closest('[data-cmd]');
+ if (!target) {
+ return;
+ }
+ // prevent double-triggering in case a sub-element was clicked
+ e.stopPropagation();
- function update () {
- document.getElementById('update-counter').textContent = `${updated}/${total}`;
- }
- function done (target) {
- target.disabled = false;
- window.setTimeout(() => {
- document.getElementById('update-counter').textContent = '';
- }, 750);
- }
+ switch (target.dataset.cmd) {
+ case 'open-manage':
+ openURL({url: '/manage.html'});
+ break;
- if (cmd === 'open-manage') {
- chrome.tabs.query({
- url: chrome.runtime.getURL('manage.html')
- }, tabs => {
- if (tabs.length) {
- chrome.tabs.update(tabs[0].id, {
- active: true,
- }, () => {
- chrome.windows.update(tabs[0].windowId, {
- focused: true
- });
- });
- }
- else {
- chrome.tabs.create({
- url: chrome.runtime.getURL('manage.html')
- });
- }
- });
+ case 'check-updates':
+ checkUpdates();
+ break;
+
+ case 'open-keyboard':
+ openURL({url: URLS.configureCommands});
+ e.preventDefault();
+ break;
+
+ case 'reset':
+ $$('input')
+ .filter(input => input.id in prefs.readOnlyValues)
+ .forEach(input => prefs.reset(input.id));
+ break;
}
- else if (cmd === 'check-updates') {
- e.target.disabled = true;
- chrome.runtime.getBackgroundPage(bg => {
- bg.update.perform((cmd, value) => {
- if (cmd === 'count') {
- total = value;
- if (!total) {
- done(e.target);
- }
- }
- else if (cmd === 'single-updated' || cmd === 'single-skipped') {
- updated += 1;
- if (total && updated === total) {
- done(e.target);
- }
- }
- update();
- });
- });
- // notify the automatic updater to reset the next automatic update accordingly
- chrome.runtime.sendMessage({
- method: 'resetInterval'
- });
+};
+
+function checkUpdates() {
+ let total = 0;
+ let checked = 0;
+ let updated = 0;
+ const maxWidth = $('#update-progress').parentElement.clientWidth;
+ BG.updater.checkAllStyles({observer});
+
+ function observer(state, value) {
+ switch (state) {
+ case BG.updater.COUNT:
+ total = value;
+ document.body.classList.add('update-in-progress');
+ break;
+ case BG.updater.UPDATED:
+ updated++;
+ // fallthrough
+ case BG.updater.SKIPPED:
+ checked++;
+ break;
+ case BG.updater.DONE:
+ document.body.classList.remove('update-in-progress');
+ return;
+ }
+ $('#update-progress').style.width = Math.round(checked / total * maxWidth) + 'px';
+ $('#updates-installed').dataset.value = updated || '';
}
- else if (cmd === 'open-keyboard') {
- configureCommands.open();
- }
-});
-// overwrite the default URL if browser is Opera
-document.querySelector('[data-cmd="open-keyboard"]').textContent =
- configureCommands.url;
+}
diff --git a/popup.css b/popup.css
index f65caf6c..529a544f 100644
--- a/popup.css
+++ b/popup.css
@@ -1,30 +1,53 @@
body {
width: 252px;
font-size: 12px;
- font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+ margin: 0;
}
+
+body > div:not(#installed) {
+ margin-left: 0.75em;
+ margin-right: 0.75em;
+}
+
+.firefox .chromium-only {
+ display: none;
+}
+
input[type=checkbox] {
outline: none;
}
+
#disable-all-wrapper {
padding: 0.3em 0 0.6em;
}
+
#no-styles {
font-style: italic;
}
+
#popup-shortcuts-button {
margin-left: 3px;
}
+
.checker {
display: inline;
}
+
.style-name {
cursor: default;
font-weight: bold;
display: block;
}
-a, a:visited {
- color: black;
+
+a {
+ color: #000;
+ transition: color .5s;
+ text-decoration-skip: ink;
+}
+
+a:hover {
+ color: #666;
}
.left-gutter {
@@ -32,137 +55,289 @@ a, a:visited {
width: 16px;
vertical-align: top;
}
+
.left-gutter input {
margin-bottom: 1px;
margin-top: 0;
margin-left: 0;
}
+
.main-controls {
display: table-cell;
}
-.entry {
- padding: 0.5em 0;
-}
-.entry:first-child {
- padding-top: 0;
-}
-
-#unavailable,
#installed {
border-bottom: 1px solid black;
padding-bottom: 2px;
}
+
body > DIV:last-of-type,
body.blocked > DIV {
border-bottom: none;
}
+
#installed {
padding-top: 2px;
- max-height: 434px;
+ max-height: 434px;
overflow-y: auto;
}
+
#installed.disabled .style-name {
text-decoration: line-through;
}
+
#installed .actions {
cursor: default;
}
+
#installed .actions a {
cursor: pointer;
text-decoration: none;
}
-#installed .style-edit-link {
+
+/* entry */
+
+.entry {
+ display: flex;
+ align-items: center;
+ padding: 5px 0.75em;
+}
+
+.entry:nth-child(even) {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.entry .style-edit-link {
margin-right: 2px;
}
-#installed .style-edit-link, #installed .delete {
+
+.entry .style-edit-link,
+.entry .delete {
display: inline-block;
padding: 0 1px 0;
}
+
+.entry .main-controls {
+ display: flex;
+ flex: 1;
+ width: calc(100% - 20px);
+ align-items: center;
+}
+
+.entry .main-controls label {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding-right: 5px;
+}
+
+.not-applied .checker,
+.not-applied .style-name,
+.not-applied .actions > * {
+ opacity: .2;
+ transition: opacity .5s ease-in-out .25s, color .5s ease-in-out .25s;
+}
+
+.not-applied:hover .checker,
+.not-applied:hover .style-name,
+.not-applied:hover .actions > * {
+ opacity: 1;
+}
+
+.not-applied:hover .style-name {
+ color: darkred;
+}
+
+.regexp-problem-indicator {
+ background-color: #d00;
+ width: 14px;
+ height: 14px;
+ line-height: 15px;
+ border-radius: 8px;
+ margin-right: 6px;
+ margin-left: 6px;
+ text-align: center;
+ color: white;
+ font-weight: bold;
+ box-sizing: border-box;
+ cursor: pointer;
+ font-size: 90%;
+}
+
+.regexp-partial .actions,
+.regexp-invalid .actions {
+ order: 2;
+}
+
+#regexp-explanation {
+ position: fixed;
+ background-color: white;
+ left: 0;
+ right: 0;
+ padding: .5rem;
+ font-size: 90%;
+ border-top: 2px solid black;
+ border-bottom: 2px solid black;
+ box-shadow: 0 0 100px black;
+ display: flex;
+ flex-direction: column;
+ z-index: 999999;
+}
+
+#regexp-explanation > div {
+ display: none;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.regexp-partial #regexp-partial,
+.regexp-invalid #regexp-invalid {
+ display: block;
+}
+
+#regexp-explanation > div:not(:last-child) {
+ margin-bottom: .5rem;
+}
+
.svg-icon {
pointer-events: none;
transition: fill .5s;
+ width: 14px;
+ height: 16px;
+ fill: #666;
}
+
a:hover .svg-icon {
- fill: #000000;
+ fill: #000;
}
body > .actions {
margin-top: 0.5em;
}
-.actions > div:not(:last-child):not(#disable-all-wrapper), .actions > .main-controls > div:not(:last-child), #unavailable:not(:last-child), #unavailable + .actions {
+.actions > div:not(:last-child):not(#disable-all-wrapper),
+.actions > .main-controls > div:not(:last-child) {
margin-bottom: 0.75em;
}
-.actions input, .actions label {
+
+.actions input,
+.actions label {
vertical-align: middle;
}
-#unavailable {
- border: none;
- display: none; /* flex */
- align-items: center;
- justify-content: center;
- font-size: 14px;
-}
-body.blocked #installed,
-body.blocked #find-styles,
-body.blocked #write-style,
-body:not(.blocked) #unavailable {
+body.blocked #installed > *,
+body.blocked .actions > .main-controls,
+body.blocked .actions > .left-gutter {
display: none;
}
/* Never shown, but can be enabled with a style */
-.enable, .disable {
+
+.enable,
+.disable {
display: none;
}
/* 'New style' links */
-#write-style-for {margin-right: .6ex}
-.write-style-link {margin-left: .6ex}
-.write-style-link::before, .write-style-link::after {font-size: x-small}
-.write-style-link::before {content: "\00ad"} /* "soft" hyphen */
-#match {overflow-wrap: break-word;}
+
+#write-style {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+#write-style-for {
+ margin-right: .6ex
+}
+
+.write-style-link {
+ margin-left: .6ex
+}
+
+.write-style-link::before,
+.write-style-link::after {
+ font-size: 12px
+}
+
+.write-style-link::before {
+ content: "\00ad"; /* "soft" hyphen */
+}
+
+#match {
+ overflow-wrap: break-word;
+ display: block;
+ flex-grow: 9;
+ min-width: 200px;
+}
/* "breadcrumbs" 'new style' links */
-.breadcrumbs > .write-style-link {margin-left: 0}
-.breadcrumbs:hover a {color: #bbb; text-decoration: none}
+.breadcrumbs > .write-style-link {
+ margin-left: 0
+}
+
+.breadcrumbs:hover a {
+ color: #bbb;
+ text-decoration: none
+}
+
+/* use just the subdomain name instead of the full domain name */
+.breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2)) {
+ font-size: 0
+}
- /* use just the subdomain name instead of the full domain name */
-.breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2)) {font-size: 0}
.breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2))::before {
content: attr(subdomain);
}
- /* "dot" after each subdomain name */
-.breadcrumbs > .write-style-link[subdomain]::after {content: "."}
- /* no "dot" after top-level domain */
-.breadcrumbs > .write-style-link:nth-last-child(2)::after {content: none}
- /* "forward slash" before path ("this URL") */
-.breadcrumbs > .write-style-link:last-child::before {content: "\200b/"}
+/* "dot" after each subdomain name */
+.breadcrumbs > .write-style-link[subdomain]::after {
+ content: "."
+}
+
+/* no "dot" after top-level domain */
+.breadcrumbs > .write-style-link:nth-last-child(2)::after {
+ content: none
+}
+
+/* "forward slash" before path ("this URL") */
+.breadcrumbs > .write-style-link:last-child::before {
+ content: "\200b/"
+}
+
.breadcrumbs > .write-style-link:last-child:first-child::before,
-.breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {content: none}
+.breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {
+ content: none
+}
- /* suppress TLD-only link */
-.breadcrumbs > .write-style-link[subdomain=""] {display: none}
+/* suppress TLD-only link */
+.breadcrumbs > .write-style-link[subdomain=""] {
+ display: none
+}
- /* :hover style */
-.breadcrumbs.url\(\) > .write-style-link, /* :hover or :focus on "this URL" sets class="url()" */
+/* :hover style */
+.breadcrumbs.url\(\) > .write-style-link,
+
+/* :hover or :focus on "this URL" sets class="url()" */
.breadcrumbs > .write-style-link:hover,
.breadcrumbs > .write-style-link:focus,
.breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain],
.breadcrumbs > .write-style-link:focus ~ .write-style-link[subdomain] {
color: inherit;
text-decoration: underline;
+ text-decoration-skip: ink;
}
- /* action buttons */
+/* action buttons */
+
#popup-options {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 1.2em 0;
}
+
#popup-options button {
margin: 0 2px;
width: 33%;
@@ -171,83 +346,126 @@ body:not(.blocked) #unavailable {
text-overflow: ellipsis;
}
- /* margins */
-body {
- margin: 0;
-}
-body>div:not(#installed) {
- margin-left:0.75em;
- margin-right:0.75em;
-}
-#unavailable {
- margin-top: 0.75em;
-}
-#installed .entry {
-}
- /* entries */
-#installed .entry {
- display: flex;
- align-items: center;
- padding: 5px 0.75em;
-}
-#installed .entry:nth-child(even) {
- background-color: rgba(0, 0, 0, 0.05);
-}
-#installed .main-controls {
- display: flex;
- flex: 1;
- width: calc(100% - 20px);
- align-items: center;
-}
-#installed .main-controls label {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- padding-right: 5px;
-}
- /* confirm */
+/* confirm */
+
#confirm,
-#confirm>div>span {
+#confirm > div > span {
align-items: center;
justify-content: center;
}
+
#confirm {
z-index: 2147483647;
- display: none; /* flex */
+ display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
- margin: 0!important;
+ margin: 0 !important;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.4);
+ animation: lights-off .5s cubic-bezier(.03, .67, .08, .94);
+ animation-fill-mode: both;
}
+
+#confirm.lights-on {
+ animation: lights-on .25s ease-in-out;
+ animation-fill-mode: both;
+}
+
+#confirm.lights-on > div {
+ display: none;
+}
+
#confirm[data-display=true] {
display: flex;
}
-#confirm>div {
+
+#confirm > div {
width: 80%;
height: 100px;
max-height: 80%;
+ min-height: 8em;
background-color: #fff;
display: flex;
flex-direction: column;
border: solid 2px rgba(0, 0, 0, 0.5);
}
-#confirm>div>span {
+
+#confirm > div > span {
display: flex;
flex: 1;
padding: 0 10px;
}
-#confirm>div>b {
+
+#confirm > div > b {
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-#confirm>div>div {
+
+#confirm > div > div {
padding: 10px;
- direction: rtl;
+ text-align: center;
+}
+
+.non-windows #confirm > div > div {
+ direction: rtl;
+ text-align: right;
+}
+
+.unreachable .entry {
+ opacity: .25;
+}
+
+.blocked:before,
+.unreachable:before {
+ padding: 5px 0.75em;
+ display: block;
+ font-weight: bold;
+}
+
+.blocked #installed:before,
+.unreachable #installed:before {
+ padding: 1px 0.75em 9px;
+ display: block;
+ font-size: 90%;
+ margin-bottom: 5px;
+}
+
+.blocked:before {
+ content: "__MSG_stylusUnavailableForURL__";
+}
+
+.blocked #installed:before {
+ content: "__MSG_stylusUnavailableForURLdetails__";
+}
+
+.unreachable:before {
+ content: "__MSG_unreachableContentScript__";
+}
+
+.unreachable #installed:before {
+ content: "__MSG_unreachableFileHint__";
+ border-bottom: 1px solid black;
+}
+
+@keyframes lights-off {
+ from {
+ background-color: transparent;
+ }
+ to {
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+}
+
+@keyframes lights-on {
+ from {
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+ to {
+ background-color: transparent;
+ }
}
diff --git a/popup.html b/popup.html
index 6089c701..7684eb05 100644
--- a/popup.html
+++ b/popup.html
@@ -1,85 +1,109 @@
-
+
-
-
+
+
-
- -
+
- + + + + +