diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index c1afc23a..dc967957 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -183,6 +183,13 @@
"message": "Open color picker",
"description": "Tooltip for the colored squares shown before CSS colors in the style editor."
},
+ "configOnChange": {
+ "message": "on change",
+ "description": "VERY SHORT label for the checkbox in style config dialog after the save button - when enabled the changes in the dialog are saved and applied automatically without the need to press the Save button"
+ },
+ "configOnChangeTooltip": {
+ "message": "Autosave and apply changes automatically"
+ },
"dysfunctional": {
"message": "Stylus cannot function in private windows because Firefox disallows direct connection to the internal background page context of the extension.",
"description": "Displayed in Firefox when its settings make Stylus dysfunctional"
diff --git a/background/usercss-helper.js b/background/usercss-helper.js
index 4d5a4be9..a114e9c5 100644
--- a/background/usercss-helper.js
+++ b/background/usercss-helper.js
@@ -78,8 +78,8 @@ var usercssHelper = (() => {
);
}
- function openInstallPage(tab, {url = tab.url, direct} = {}) {
- if (direct) {
+ function openInstallPage(tab, {url = tab.url, direct, downloaded} = {}) {
+ if (direct && !downloaded) {
prefetchCodeForInstallation(tab.id, url);
}
return wrapReject(openURL({
diff --git a/edit.html b/edit.html
index a1a712ce..c1966108 100644
--- a/edit.html
+++ b/edit.html
@@ -312,7 +312,7 @@
-
-
+
+
diff --git a/manage/config-dialog.css b/manage/config-dialog.css
index 9edc3e1a..84849efb 100644
--- a/manage/config-dialog.css
+++ b/manage/config-dialog.css
@@ -1,11 +1,23 @@
-/* config dialog */
-.config-dialog .config-heading {
+#stylus-popup #message-box-contents {
+ padding: .25rem .75rem;
+}
+
+#stylus-popup .config-body label {
+ padding: .5em 0;
+}
+
+#stylus-popup .config-body label > :first-child {
+ max-width: 140px;
+ min-width: 140px;
+}
+
+.config-heading {
float: right;
margin: -1.25rem 0 0 0;
font-size: 0.9em;
}
-.config-dialog label {
+.config-body label {
display: flex;
padding: .75em 0;
align-items: center;
@@ -15,32 +27,27 @@
position: static;
}
-.config-dialog label:first-child {
+.config-body label:first-child {
padding-top: 0;
}
-.config-dialog label:last-child {
+.config-body label:last-child {
padding-bottom: 0;
}
-.config-dialog label:not(:first-child) {
+.config-body label:not(:first-child) {
border-top: 1px dotted #ccc;
}
-.config-dialog label > :first-child {
+.config-body label > :first-child {
margin-right: 8px;
flex-grow: 1;
}
-.config-dialog label:not([disabled]) > :first-child {
+.config-body label:not([disabled]) > :first-child {
cursor: default;
}
-.config-dialog label:not([disabled]):hover > :first-child {
- text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
- cursor: pointer;
-}
-
.config-dialog .dirty:after {
content: "*";
position: absolute;
@@ -51,18 +58,19 @@
font-style: italic;
}
-.config-dialog input,
-.config-dialog select,
-.config-dialog .onoffswitch {
+.config-body input,
+.config-body select,
+.config-body .onoffswitch {
width: var(--onoffswitch-width);
margin: 0;
- height: 2em;
+ height: 22px;
box-sizing: border-box;
vertical-align: middle;
}
-.config-dialog .select-resizer,
-.config-dialog select {
+.config-body input[type="text"],
+.config-body .select-resizer,
+.config-body select {
width: auto;
min-width: var(--onoffswitch-width);
max-width: 124px;
@@ -70,24 +78,30 @@
position: relative;
}
-.config-dialog .onoffswitch {
+.config-body .onoffswitch {
height: auto;
margin: calc((2em - 12px) / 2) 0;
}
-.config-dialog input[type="text"] {
+.config-body input[type="text"] {
padding-left: 0.25em;
}
-.config-dialog label > :last-child {
+.config-body label > :last-child {
box-sizing: border-box;
flex-shrink: 0;
}
-.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
+.config-body label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
margin-right: 4px;
}
+#config-autosave-wrapper {
+ position: relative;
+ padding: 0 0 0 16px;
+ display: inline-flex;
+}
+
.cm-colorview::before,
.color-swatch {
width: var(--onoffswitch-width) !important;
diff --git a/manage/config-dialog.js b/manage/config-dialog.js
index 6c6e3273..08da4c69 100644
--- a/manage/config-dialog.js
+++ b/manage/config-dialog.js
@@ -30,11 +30,7 @@ function configDialog(style) {
{textContent: t('confirmClose'), dataset: {cmd: 'close'}},
],
onshow,
- }).then(() => {
- document.body.style.minWidth = '';
- document.body.style.minHeight = '';
- colorpicker.hide();
- });
+ }).then(onhide);
function getInitialValues(source) {
const data = {};
@@ -46,10 +42,22 @@ function configDialog(style) {
}
function onshow(box) {
+ $('button', box).insertAdjacentElement('afterend',
+ $create('label#config-autosave-wrapper', {
+ title: t('configOnChangeTooltip'),
+ }, [
+ $create('input', {id: 'config.autosave', type: 'checkbox'}),
+ $create('SVG:svg.svg-icon.checked',
+ $create('SVG:use', {'xlink:href': '#svg-icon-checked'})),
+ t('configOnChange'),
+ ]));
+ setupLivePrefs(['config.autosave']);
+
if (isPopup) {
adjustSizeForPopup(box);
box.style.animationDuration = '0s';
}
+
box.addEventListener('change', onchange);
buttons.save = $('[data-cmd="save"]', box);
buttons.default = $('[data-cmd="default"]', box);
@@ -57,13 +65,23 @@ function configDialog(style) {
updateButtons();
}
+ function onhide() {
+ document.body.style.minWidth = '';
+ document.body.style.minHeight = '';
+ colorpicker.hide();
+ }
+
function onchange({target}) {
// invoked after element's own onchange so 'va' contains the updated value
const va = target.va;
if (va) {
va.dirty = varsInitial[va.name] !== (isDefault(va) ? va.default : va.value);
- target.closest('label').classList.toggle('dirty', va.dirty);
- updateButtons();
+ if (prefs.get('config.autosave')) {
+ debounce(save);
+ } else {
+ target.closest('label').classList.toggle('dirty', va.dirty);
+ updateButtons();
+ }
}
}
@@ -113,6 +131,7 @@ function configDialog(style) {
}
}
if (invalid.length) {
+ onhide();
messageBox.alert([
$create('div', {style: 'max-width: 34em'}, t('usercssConfigIncomplete')),
$create('ol', {style: 'text-align: left'},
@@ -120,11 +139,16 @@ function configDialog(style) {
$create({tag: 'li', appendChild: msg}))),
]);
}
- return numValid && BG.usercssHelper.save(style).then(saved => {
- varsInitial = getInitialValues(deepCopy(saved.usercssData.vars));
- vars.forEach(va => onchange({target: va.input}));
- updateButtons();
- });
+ if (!numValid) {
+ return;
+ }
+ return BG.usercssHelper.save(style)
+ .then(saved => {
+ varsInitial = getInitialValues(deepCopy(saved.usercssData.vars));
+ vars.forEach(va => onchange({target: va.input}));
+ updateButtons();
+ })
+ .catch(errors => onhide() + messageBox.alert(Array.isArray(errors) ? errors.join('\n') : errors));
}
function useDefault() {
@@ -256,10 +280,10 @@ function configDialog(style) {
}
function adjustSizeForPopup(box) {
- box.style = 'white-space: nowrap !important';
- box.firstElementChild.style = 'max-width: none; max-height: none;'.replace(/;/g, '!important;');
- const {offsetWidth, offsetHeight} = box.firstElementChild;
- box.style = box.firstElementChild.style = '';
+ const contents = box.firstElementChild;
+ contents.style = 'max-width: none; max-height: none;'.replace(/;/g, '!important;');
+ let {offsetWidth: width, offsetHeight: height} = contents;
+ contents.style = '';
const colorpicker = document.body.appendChild(
$create('.colorpicker-popup', {style: 'display: none!important'}));
@@ -267,8 +291,8 @@ function configDialog(style) {
const MIN_HEIGHT = 250;
colorpicker.remove();
- const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH);
- const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT);
+ width = Math.max(Math.min(width / 0.9 + 2, 800), MIN_WIDTH);
+ height = Math.max(Math.min(height / 0.9 + 2, 600), MIN_HEIGHT);
document.body.style.setProperty('min-width', width + 'px', 'important');
document.body.style.setProperty('min-height', height + 'px', 'important');
}
diff --git a/manage/import-export.js b/manage/import-export.js
index 865915c9..87a8c92b 100644
--- a/manage/import-export.js
+++ b/manage/import-export.js
@@ -392,8 +392,8 @@ Object.assign(document.body, {
this.ondragend();
if (event.dataTransfer.files.length) {
event.preventDefault();
- if ($('#onlyUpdates input').checked) {
- $('#onlyUpdates input').click();
+ if ($('#only-updates input').checked) {
+ $('#only-updates input').click();
}
importFromFile({file: event.dataTransfer.files[0]});
}
diff --git a/manage/incremental-search.js b/manage/incremental-search.js
index 9dc5312c..1d6f75a0 100644
--- a/manage/incremental-search.js
+++ b/manage/incremental-search.js
@@ -75,9 +75,9 @@ onDOMready().then(() => {
event.target.matches('[type="text"], [type="search"]')) {
return;
}
- const k = event.which;
+ const {which: k, key} = event;
// focus search field on "/" key
- if (k === 191 && !event.shiftKey) {
+ if (key === '/' || !key && k === 191 && !event.shiftKey) {
event.preventDefault();
$('#search').focus();
return;
diff --git a/manage/manage.css b/manage/manage.css
index a93295f3..c48c1604 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -139,7 +139,7 @@ select {
margin-left: .5ex;
}
-.svg-icon.configure {
+.svg-icon.config {
width: 16px;
height: 16px;
}
@@ -392,6 +392,13 @@ select {
background-color: hsla(0, 0%, 50%, .2);
}
+#only-updates {
+ position: relative;
+ left: -5px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+}
+
.checkmate {
position: relative;
height: 12px;
diff --git a/manage/updater-ui.js b/manage/updater-ui.js
index 8149000e..216f6cee 100644
--- a/manage/updater-ui.js
+++ b/manage/updater-ui.js
@@ -108,7 +108,7 @@ function reportUpdateState(state, style, details) {
entry.classList.add('can-update');
entry.updatedCode = style;
$('.update-note', entry).textContent = '';
- $('#onlyUpdates').classList.remove('hidden');
+ $('#only-updates').classList.remove('hidden');
break;
case BG.updater.SKIPPED: {
if (entry.classList.contains('can-update')) {
@@ -151,12 +151,12 @@ function reportUpdateState(state, style, details) {
function renderUpdatesOnlyFilter({show, check} = {}) {
const numUpdatable = $$('.can-update').length;
const mightUpdate = numUpdatable > 0 || $('.update-problem');
- const checkbox = $('#onlyUpdates input');
+ const checkbox = $('#only-updates input');
show = show !== undefined ? show : mightUpdate;
check = check !== undefined ? show && check : checkbox.checked && mightUpdate;
- $('#onlyUpdates').classList.toggle('hidden', !show);
- checkbox.checked = check;
+ $('#only-updates').classList.toggle('hidden', !show);
+ checkbox.checked = check && show;
checkbox.dispatchEvent(new Event('change'));
const btnApply = $('#apply-all-updates');
diff --git a/popup.html b/popup.html
index c9b51b5a..84988f6f 100644
--- a/popup.html
+++ b/popup.html
@@ -33,9 +33,7 @@