diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 0eee2ca0..2e28bc2d 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1366,6 +1366,9 @@ "message": "Replace with", "description": "Label before the replace-with input field in the editor shown on Ctrl-H etc." }, + "restoreTemplate": { + "message": "Restore the default template.\n\n(The currently open editor pages won't change.)" + }, "retrieveBckp": { "message": "Import styles" }, diff --git a/edit/edit.css b/edit/edit.css index 9008a798..28011872 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -267,7 +267,7 @@ input:invalid { } #actions .buttons > * { - margin: 0 .2rem .5rem 0; + margin: 0 .25rem .5rem 0; } #options:not([open]) + #lint h2 { diff --git a/edit/source-editor.js b/edit/source-editor.js index 59d1e4c0..41733ffb 100644 --- a/edit/source-editor.js +++ b/edit/source-editor.js @@ -16,6 +16,15 @@ /* exported SourceEditor */ function SourceEditor() { const {style, /** @type DirtyReporter */dirty} = editor; + const DEFAULT_TEMPLATE = ` + /* ==UserStyle== + @name ${''/* a trick to preserve the trailing spaces */} + @namespace github.com/openstyles/stylus + @version 1.0.0 + @description A new userstyle + @author Me + ==/UserStyle== */ + `.replace(/^\s+/gm, ''); let savedGeneration; let prevMode = NaN; @@ -160,27 +169,20 @@ function SourceEditor() { } function setupNewStyle() { - style.sections[0].code = ' '.repeat(prefs.get('editor.tabSize')) + - `/* ${t('usercssReplaceTemplateSectionBody')} */`; - let section = MozDocMapper.styleToCss(style); - if (!section.includes('@-moz-document')) { - style.sections[0].domains = ['example.com']; - section = MozDocMapper.styleToCss(style); + const comment = `/* ${t('usercssReplaceTemplateSectionBody')} */`; + const sec0 = style.sections[0]; + sec0.code = ' '.repeat(prefs.get('editor.tabSize')) + comment; + if (Object.keys(sec0).length === 1) { // the only key is 'code' + sec0.domains = ['example.com']; } - const DEFAULT_CODE = ` - /* ==UserStyle== - @name ${''/* a trick to preserve the trailing spaces */} - @namespace github.com/openstyles/stylus - @version 1.0.0 - @description A new userstyle - @author Me - ==/UserStyle== */ - `.replace(/^\s+/gm, ''); style.name = [style.name, new Date().toLocaleString()].filter(Boolean).join(' - '); - // strip the last dummy section if any, add an empty line followed by the section - style.sourceCode = (editor.template || DEFAULT_CODE) + style.sourceCode = (editor.template || DEFAULT_TEMPLATE) .replace(/(@name)(?:([\t\x20]+).*|\n)/, (_, k, space) => `${k}${space || ' '}${style.name}`) - .replace(/\s*@-moz-document[^{]*{[^}]*}\s*$|\s+$/g, '') + '\n\n' + section; + .replace(/\s*@-moz-document[^{]*{([^}]*)}\s*$/g, // stripping dummy sections + (s, body) => body.trim() === comment ? '\n\n' : s) + .trim() + + '\n\n' + + MozDocMapper.styleToCss(style); cm.startOperation(); cm.setValue(style.sourceCode); cm.clearHistory(); @@ -235,9 +237,17 @@ function SourceEditor() { } async function saveTemplate() { - if (await messageBoxProxy.confirm(t('usercssReplaceTemplateConfirmation'))) { + const res = await messageBoxProxy.show({ + contents: t('usercssReplaceTemplateConfirmation'), + className: 'center', + buttons: [t('confirmYes'), t('confirmNo'), { + textContent: t('genericResetLabel'), + title: t('restoreTemplate'), + }], + }); + if (res.enter || res.button !== 1) { const key = chromeSync.LZ_KEY.usercssTemplate; - const code = cm.getValue(); + const code = res.button === 2 ? DEFAULT_TEMPLATE : cm.getValue(); await chromeSync.setLZValue(key, code); if (await chromeSync.getLZValue(key) !== code) { messageBoxProxy.alert(t('syncStorageErrorSaving')); diff --git a/global.css b/global.css index 6f4613bc..e6c9229a 100644 --- a/global.css +++ b/global.css @@ -313,13 +313,25 @@ body.resizing-v > * { } .split-btn-pedal { margin-left: -1px !important; - padding-left: .2em !important; - padding-right: .2em !important; + padding-left: .25em !important; + padding-right: .25em !important; min-width: 0 !important; } .split-btn-pedal::after { - content: '\25BC'; /* down triangle */ - font-size: 90%; + --side: 4px; + content: ''; + border: var(--side) solid transparent; + display: inline-block; +} +.split-btn-pedal:not(.up)::after { + border-top: calc(var(--side) * 1.3) solid currentColor; + vertical-align: bottom; +} +.split-btn-pedal.up::after { + border-bottom: calc(var(--side) * 1.3) solid currentColor; + vertical-align: top; + position: relative; + top: 1px; } .split-btn-pedal.active { box-shadow: inset 0 0 100px rgba(0, 0, 0, .2); diff --git a/popup.html b/popup.html index b83df58f..c700be32 100644 --- a/popup.html +++ b/popup.html @@ -222,7 +222,7 @@
+ >