One UI PR to rule them all

_locales/en/messages.json

@@ -368,8 +368,12 @@
     "description": "Text for a checkbox that opens search results 'inline' (within the Stylus popup window)"
   },
   "findStylesInlineTooltip": {
-    "message": "Display search results inside this window.",
-    "description": "Text for a checkbox that displays search results within the Stylus popup."
+    "message": "Display search results inside this window",
+    "description": "Text for a checkbox that displays search results within the Stylus popup"
+  },
+  "findStylesExternalTooltip": {
+    "message": "Display search results on an external website",
+    "description": "Text for a checkbox that displays search results on an external website"
   },
   "genericAdd": {
     "message": "Add",
@@ -767,6 +771,30 @@
   "optionsOpenManager": {
     "message": "Manage styles"
   },
+  "optionsPopupActionElements": {
+    "message": "Action elements",
+    "description": "Label in the options page to alter the popup action elements to show either text or icons"
+  },
+  "optionsPopupClassicUI": {
+    "message": "Text and buttons",
+    "description": "Tooltip displayed when hovering the popup action elements option to choose the classic text & button format"
+  },
+  "optionsPopupIconUI": {
+    "message": "Vector icons",
+    "description": "Tooltip displayed when hovering the popup action elements option to choose displaying vector icons instead of text"
+  },
+  "optionsPopupClickAction": {
+    "message": "Style name click action",
+    "description": "Label in the options page for the action performed when clicking on a style name in the popup"
+  },
+  "optionsPopupClickActionLink": {
+    "message": "Edit style",
+    "description": "Tooltip displayed when hovering the popup click action option to choose to edit the style when clicking on the style name in the popup"
+  },
+  "optionsPopupClickActionToggle": {
+    "message": "Toggle style",
+    "description": "Tooltip displayed when hovering the popup click action option to choose to toggle a style (on or off) when clicking the style name in the popup"
+  },
   "optionsPopupWidth": {
     "message": "Popup width (in pixels)"
   },
@@ -851,6 +879,10 @@
     "message": "Temporarily applies the changes without saving.\nSave the style to make the changes permanent.",
     "description": "Tooltip for the checkbox in style editor to enable live preview while editing."
   },
+  "reEnableAllStyles": {
+    "message": "Turn all previously enabled styles back on",
+    "description": "Label for the element which turns all disabled styles back on."
+  },
   "replace": {
     "message": "Replace",
     "description": "Label before the replace input field in the editor shown on Ctrl-H"
@@ -1051,15 +1083,6 @@
     },
     "description": "Error displayed when the value of @var color is invalid"
   },
-  "styleMetaErrorRangeOrNumber": {
-    "message": "Invalid @var $type$: value must be an array containing at least one number at index zero",
-    "description": "Error displayed when the value of @var number or @var range is invalid",
-    "placeholders": {
-      "type": {
-        "content": "$1"
-      }
-    }
-  },
   "styleMetaErrorPreprocessor": {
     "message": "Unsupported @preprocessor: $preprocessor$",
     "placeholders": {
@@ -1261,10 +1284,6 @@
     "message": "Updates installed:",
     "description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
   },
-  "usercssAvoidOverwriting": {
-    "message": "Please change the value of @name or @namespace to avoid overwriting an existing style.",
-    "description": "Shown in a message box when attempting to save a new Usercss style that would overwrite an existing one."
-  },
   "usercssConfigIncomplete": {
     "message": "The style was updated or deleted after the configuration dialog was shown. These variables were not saved to avoid corrupting the style's metadata:"
   },
@@ -1291,6 +1310,10 @@
     "message": "Write style for: ",
     "description": "Label for toolbar pop-up that precedes the links to write a new style"
   },
+  "writeStyleForInfo": {
+    "message": "Create a new style by selecting a target URL.\nAvailable options shown in hover tooltips.",
+    "description": "Popup style creation actions tooltip to accompany icon"
+  },
   "writeStyleForURL": {
     "message": "this URL",
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"

edit.html

@@ -272,7 +272,7 @@
     </template>
   </head>
 
-  <body id="stylus-edit">
+  <body id="stylus-edit" class="truegray-alpha-2">
     <div id="header">
       <h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevents page shift -->
       <section id="basic-info">

edit/applies-to-line-widget.js

@@ -222,56 +222,61 @@ function createAppliesToLineWidget(cm) {
       requestAnimationFrame(updateWidgetStyle);
       return;
     }
-    const MIN_LUMA = .05;
-    const MIN_LUMA_DIFF = .4;
-    const color = {
-      wrapper: colorMimicry.get(cm.display.wrapper),
-      gutter: colorMimicry.get(cm.display.gutters, {
-        bg: 'backgroundColor',
-        border: 'borderRightColor',
-      }),
-      line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv),
-      comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv),
-    };
-    const hasBorder =
-      color.gutter.style.borderRightWidth !== '0px' &&
-      !/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
-    const diff = {
-      wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
-      border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
-      line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
-    };
-    const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
-    const fore = preferLine ? color.line.fore : color.wrapper.fore;
+    if (prefs.get('editor.theme') !== 'default') {
+      const MIN_LUMA = .05;
+      const MIN_LUMA_DIFF = .4;
+      const color = {
+        wrapper: colorMimicry.get(cm.display.wrapper),
+        gutter: colorMimicry.get(cm.display.gutters, {
+          bg: 'backgroundColor',
+          border: 'borderRightColor',
+        }),
+        line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv),
+        comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv),
+      };
+      const hasBorder =
+        color.gutter.style.borderRightWidth !== '0px' &&
+        !/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
+      const diff = {
+        wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
+        border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
+        line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
+      };
+      const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
+      const fore = preferLine ? color.line.fore : color.wrapper.fore;
 
-    const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
-    const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
+      const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
+      const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
 
-    actualStyle.textContent = `
-      .applies-to {
-        background-color: ${color.gutter.bg};
-        border-top: ${borderStyleForced};
-        border-bottom: ${borderStyleForced};
-      }
-      .applies-to label {
-        color: ${fore};
-      }
-      .applies-to input,
-      .applies-to button,
-      .applies-to select {
-        background: rgba(255, 255, 255, ${
-          Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
-        });
-        border: ${borderStyleForced};
-        transition: none;
-        color: ${fore};
-      }
-      .applies-to .svg-icon.select-arrow {
-        fill: ${fore};
-        transition: none;
-      }
-    `;
-    document.documentElement.appendChild(actualStyle);
+      actualStyle.textContent = `
+        .applies-to {
+          background-color: ${color.gutter.bg};
+          border-top: ${borderStyleForced};
+          border-bottom: ${borderStyleForced};
+        }
+        .applies-to label {
+          color: ${fore};
+        }
+        .applies-to input,
+        .applies-to select {
+          background-color: rgba(255, 255, 255, ${
+            Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
+          });
+          border: ${borderStyleForced};
+          transition: none;
+          color: ${fore};
+        }
+        .applies-to .svg-icon.select-arrow {
+          fill: ${fore} !important;
+        }
+        .applies-to select option {
+          background-color: ${color.gutter.bg};
+        }
+      `;
+      document.documentElement.appendChild(actualStyle);
+    } else if (prefs.get('editor.theme') === 'default') {
+      actualStyle.textContent = '';
+    }
   }
 
   function doUpdate() {

edit/beautify.js

@@ -63,7 +63,7 @@ function beautify(event) {
         ]),
       ]));
 
-    $('#help-popup').className = 'wide';
+    $('#help-popup').className = 'main-bg wide';
 
     scope.forEach(cm => {
       setTimeout(() => {

edit/codemirror-default.css

@@ -1,53 +1,70 @@
+:root {
+  --applies-to-pseudo: hsla(214, 100%, 90%, 0.15);
+}
+
+/************ CM default ************/
+.CodeMirror.cm-s-default {
+  background: var(--gray-lightness-93);
+}
+
+.CodeMirror {
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 1px;
+  outline-offset: -1px;
+  transition: outline-color .25s;
+}
+
+.CodeMirror-focused {
+  outline-color: var(--focus-outline);
+}
+
+.CodeMirror.cm-s-default .CodeMirror-gutters {
+  background-color: var(--truegray-alpha-1);
+  border-right: 1px solid var(--truegray-alpha-2);
+}
+
+.CodeMirror.cm-s-default .CodeMirror-activeline-background {
+  background: var(--cm-activeline-bg);
+}
+
+.CodeMirror-hints.default {
+  background-color: var(--main-bg);
+}
+
 .CodeMirror-hints {
   z-index: 999;
 }
+
+/* match Windows select hover, so no variables */
 .CodeMirror-hint:hover {
-  color: white;
+  color: #fff;
   background: #08f;
 }
 .CodeMirror {
-  border: solid #CCC 1px;
+  border: 1px solid var(--gray-lightness-76);
 }
 .CodeMirror-lint-mark-warning {
   background: none;
 }
 .CodeMirror-dialog {
   -webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
 }
-.CodeMirror-focused {
-  outline: -webkit-focus-ring-color auto 5px;
-  outline-offset: -2px;
-}
-@supports (-moz-appearance:none) {
-  /* restrict to FF */
-  .CodeMirror-focused {
-    outline: #7dadd9 auto 1px;
-    outline-offset: -1px;
-  }
-}
 .CodeMirror-search-field {
   width: 10em;
 }
 .CodeMirror-jump-field {
   width: 5em;
 }
 .CodeMirror-search-hint {
-  color: #888;
+  color: var(--truegray);
 }
 .cm-uso-variable {
   font-weight: bold;
 }
-.cm-searching.cm-matchhighlight {
-  /* tokens found by manual search should not animate by cm-matchhighlight */
-  animation-name: search-and-match-highlighter !important;
-}
-@keyframes search-and-match-highlighter {
-  from { background-color: rgba(255, 255, 0, .4); } /* search color */
-  to   { background-color: rgba(100, 255, 100, .4); } /* sarch + highlight */
-}
 
 .CodeMirror-activeline .applies-to:before {
-  background-color: hsla(214, 100%, 90%, 0.15);
+  background-color: var(--applies-to-pseudo);
   content: "";
   top: 1em;
   left: 0;

edit/codemirror-editing-hooks.js

@@ -299,6 +299,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
             break;
           default:
             value = null;
+            document.body.removeAttribute('data-match-highlight');
         }
         option = 'highlightSelectionMatches';
         break;