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,24 @@
   "optionsOpenManager": {
     "message": "Manage styles"
   },
+  "optionsPopupClassicUI": {
+    "message": "Text and buttons"
+  },
+  "optionsPopupIconUI": {
+    "message": "Vector icons"
+  },
+  "optionsPopupTitleClickAction": {
+    "message": "Style name click action"
+  },
+  "optionsPopupClickActionLink": {
+    "message": "Edit style"
+  },
+  "optionsPopupClickActionToggle": {
+    "message": "Toggle style"
+  },
+  "optionsPopupTitle": {
+    "message": "Action elements"
+  },
   "optionsPopupWidth": {
     "message": "Popup width (in pixels)"
   },
@@ -851,6 +873,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 +1077,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": {
@@ -1194,7 +1211,7 @@
     "description": "Note in the popup when opened on addons.mozilla.org in Firefox >= 59"
   },
   "unreachableAMOHintNewFF": {
-    "message": "In Firefox 60 and newer you'll also have to remove AMO domain from <extensions.webextensions.restrictedDomains> in <about:config>.",
+    "message": "In Firefox 60 and newer you'll also have to to remove AMO domain from <extensions.webextensions.restrictedDomains> in <about:config>.",
     "description": "Note in the popup when opened on addons.mozilla.org in Firefox >= 59"
   },
   "unreachableAMOHintOldFF": {
@@ -1261,10 +1278,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 +1304,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 specifying target URLs.\nAvailable options shown in hover tooltips.",
+    "description": "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/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;