simplify/unify

_locales/en/messages.json

@@ -336,7 +336,11 @@
   },
   "disableAllStyles": {
     "message": "Turn all styles off",
-    "description": "Label for the checkbox that turns all enabled styles off."
+    "description": "Label for the checkbox that turns all styles off."
+  },
+  "disableAllStylesOff": {
+    "message": "Styles are turned off",
+    "description": "Label for the checkbox that turns all styles off when it's checked."
   },
   "disableStyleLabel": {
     "message": "Disable",

edit.html

@@ -271,6 +271,10 @@
             <input type="checkbox" id="editor.livePreview">
             <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
+          <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
+            <input id="disableAll" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          </label>
           <span id="preview-errors" hidden>!</span>
         </div>
       </section>

edit/edit.css

@@ -148,6 +148,7 @@ label {
   margin-top: 2px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   line-height: 16px;
 }
 

global-dark.css

@@ -23,7 +23,7 @@
     --accent-1: hsl(180, 100%, 95%);
     --accent-3: hsl(180, 30%, 18%);
     --input-bg: var(--c95);
-    --red1: hsl(0, 85%, 65%);
+    --red1: hsl(0, 85%, 55%);
   }
   textarea,
   input[type=url],

global.css

@@ -308,27 +308,24 @@ summary {
   position: absolute;
 }
 
-.all-disabled #disableAll-label {
+html:not(.all-disabled) body:not(#stylus-popup) #disableAll-label:not([data-persist]) {
-  position: relative;
+  display: none;
-  background: var(--red1);
+}
-  width: 100%;
+html:not(.all-disabled) #disableAll-label::before {
-  color: #fff;
+  content: attr(data-on);
-  font-weight: bold;
 }
 .all-disabled #disableAll-label::before {
-  position: absolute;
+  content: attr(data-off);
-  content: '';
+}
-  left: 0;
+.all-disabled #disableAll-label {
-  width: 100%;
+  font-weight: bold;
-  height: 100%;
+  color: var(--red1);
-  border: var(--outer-padding, 1rem) solid var(--red1);
-  margin: calc(-1 * var(--outer-padding, 1rem));
 }
 .all-disabled #disableAll-label .svg-icon {
-  fill: #fff;
+  fill: var(--red1);
 }
 .all-disabled #disableAll {
-  border-color: #fff;
+  border-color: var(--red1);
 }
 
 :focus,

js/dom-on-load.js

@@ -1,6 +1,7 @@
 /* global $$ $ $create focusAccessibility getEventKeyName moveFocus */// dom.js
 /* global CHROME clamp debounce */// toolbox.js
 /* global msg */
+/* global prefs */
 /* global t */// localization.js
 'use strict';
 
@@ -33,6 +34,9 @@
       }
     }
   }
+  prefs.subscribe('disableAll', () => {
+    $('#disableAll-label').dataset.persist = ''; // avoids hiding if already shown
+  });
 
   function changeFocusedInputOnWheel(event) {
     const el = document.activeElement;

js/dom.js

@@ -355,6 +355,7 @@ async function showSpinner(parent) {
 }
 
 function toggleDataset(el, prop, state) {
+  if (!el) return;
   const wasEnabled = el.dataset[prop] != null; // avoids mutating DOM unnecessarily
   if (state) {
     if (!wasEnabled) el.dataset[prop] = '';

manage.html

@@ -154,6 +154,11 @@
 <div id="header">
   <h1 id="manage-heading" i18n="manageHeading"></h1>
 
+  <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
+    <input id="disableAll" type="checkbox">
+    <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+  </label>
+
   <div id="manage-settings">
     <div class="settings-column">
       <details id="filters" data-pref="manage.filters.expanded">
@@ -349,11 +354,6 @@
         <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n="linkStylusWiki"></a></span>
         <span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n="linkTranslate"></a></span>
       </div>
-
-      <label id="disableAll-label" i18n="disableAllStyles" hidden>
-        <input id="disableAll" type="checkbox">
-        <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-      </label>
     </div>
   </div>
 

manage/manage.css

@@ -69,16 +69,13 @@ a:hover {
   text-align: left;
 }
 
-#disableAll-label:not([hidden]) {
-  display: block;
-  margin-top: 1rem;
-}
-
 #header h1 {
   margin-top: 0;
   margin-bottom: .3em;
 }
-
+.all-disabled h1 {
+  color: var(--red1);
+}
 #header a[href^="edit"] {
   text-decoration: none;
   margin-right: 8px;

manage/manage.js

@@ -71,11 +71,6 @@ newUI.renderClass();
     router.makeToggle('update-history', (...args) => showUpdateHistory(...args), [
       '/manage/updater-ui', /* global showUpdateHistory */
     ]);
-  if (prefs.get('disableAll')) {
-    $('#disableAll-label').hidden = false;
-  } else {
-    prefs.subscribe('disableAll', () => ($('#disableAll-label').hidden = false));
-  }
   $$('#header a[href^="http"]').forEach(a => (a.onclick = Events.external));
   window.on('pageshow', handleVisibilityChange);
   window.on('pagehide', handleVisibilityChange);

popup.html

@@ -192,7 +192,7 @@
   </div>
 
   <div class="actions" id="main-actions">
-    <label id="disableAll-label" i18n="disableAllStyles">
+    <label id="disableAll-label" i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
       <input id="disableAll" type="checkbox">
       <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
     </label>

popup/popup.css

@@ -2,6 +2,10 @@
   --inner-padding: 18px; /* checkbox + gap */
   --outer-padding: 9px;
   --hotkey-margin: 16px;
+  --red1: hsl(0, 70%, 45%);
+}
+[data-ui-theme="dark"] {
+  --red1: hsl(0, 85%, 65%);
 }
 
 html, body {
@@ -36,7 +40,7 @@ body:not(.blocked) .if-blocked,
   z-index: 4;
 }
 #main-actions > * {
-  margin-top: var(--outer-padding);
+  margin-top: .75em;
   padding-left: var(--inner-padding);
   display: block;
 }