Merge branch 'master' into autosave

_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"
   },

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 {

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')) +
+    const comment = `/* ${t('usercssReplaceTemplateSectionBody')} */`;
-      `/* ${t('usercssReplaceTemplateSectionBody')} */`;
+    const sec0 = style.sections[0];
-    let section = MozDocMapper.styleToCss(style);
+    sec0.code = ' '.repeat(prefs.get('editor.tabSize')) + comment;
-    if (!section.includes('@-moz-document')) {
+    if (Object.keys(sec0).length === 1) { // the only key is 'code'
-      style.sections[0].domains = ['example.com'];
+      sec0.domains = ['example.com'];
-      section = MozDocMapper.styleToCss(style);
     }
-    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_TEMPLATE)
-    style.sourceCode = (editor.template || DEFAULT_CODE)
       .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'));

global.css

@@ -313,13 +313,25 @@ body.resizing-v > * {
 }
 .split-btn-pedal {
   margin-left: -1px !important;
-  padding-left: .2em !important;
+  padding-left: .25em !important;
-  padding-right: .2em !important;
+  padding-right: .25em !important;
   min-width: 0 !important;
 }
 .split-btn-pedal::after {
-  content: '\25BC'; /* down triangle */
+  --side: 4px;
-  font-size: 90%;
+  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);

popup.html

@@ -222,7 +222,7 @@
       <div class="split-btn">
         <button id="popup-manage-button" i18n-text="openManage"
                 data-href="manage.html" i18n-title="popupManageTooltip"></button
-        ><button class="split-btn-pedal" i18n-menu-site="popupManageSiteStyles"></button>
+        ><button class="split-btn-pedal up" i18n-menu-site="popupManageSiteStyles"></button>
       </div>
       <button id="popup-options-button" i18n-text="openOptions"></button>
       <button id="popup-wiki-button"

popup/popup.css

@@ -686,9 +686,6 @@ body.blocked .actions > .main-controls {
   flex: 1 1 auto;
   min-width: 2em;
 }
-#popup-manage-button + .split-btn-pedal::after {
-  content: '\25B2'; /* up triangle */
-}
 #popup-manage-button ~ .split-btn-menu {
   bottom: 0;
   transform: translateY(-20px); /* global button style: 13(font) * 1.2(line) + 4(pad) + 2(border) */