From ab940ca7642ff3ec6a45880569f3f387489b11c1 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 29 Mar 2022 14:18:41 +0300
Subject: [PATCH] simplify/unify

---
 _locales/en/messages.json |  6 +++++-
 edit.html                 |  4 ++++
 edit/edit.css             |  1 +
 global-dark.css           |  2 +-
 global.css                | 27 ++++++++++++---------------
 js/dom-on-load.js         |  4 ++++
 js/dom.js                 |  1 +
 manage.html               | 10 +++++-----
 manage/manage.css         |  9 +++------
 manage/manage.js          |  5 -----
 popup.html                |  2 +-
 popup/popup.css           |  6 +++++-
 12 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 1661336a..e302037b 100644
--- a/_locales/en/messages.json
+++ b/_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",
diff --git a/edit.html b/edit.html
index 09870371..c4812fdb 100644
--- a/edit.html
+++ b/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>
diff --git a/edit/edit.css b/edit/edit.css
index fc66d802..61cb136e 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -148,6 +148,7 @@ label {
   margin-top: 2px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   line-height: 16px;
 }
 
diff --git a/global-dark.css b/global-dark.css
index ec95c397..7c7f6a84 100644
--- a/global-dark.css
+++ b/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],
diff --git a/global.css b/global.css
index cd6c9f0f..6dec45fe 100644
--- a/global.css
+++ b/global.css
@@ -308,27 +308,24 @@ summary {
   position: absolute;
 }
 
-.all-disabled #disableAll-label {
-  position: relative;
-  background: var(--red1);
-  width: 100%;
-  color: #fff;
-  font-weight: bold;
+html:not(.all-disabled) body:not(#stylus-popup) #disableAll-label:not([data-persist]) {
+  display: none;
+}
+html:not(.all-disabled) #disableAll-label::before {
+  content: attr(data-on);
 }
 .all-disabled #disableAll-label::before {
-  position: absolute;
-  content: '';
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: var(--outer-padding, 1rem) solid var(--red1);
-  margin: calc(-1 * var(--outer-padding, 1rem));
+  content: attr(data-off);
+}
+.all-disabled #disableAll-label {
+  font-weight: bold;
+  color: var(--red1);
 }
 .all-disabled #disableAll-label .svg-icon {
-  fill: #fff;
+  fill: var(--red1);
 }
 .all-disabled #disableAll {
-  border-color: #fff;
+  border-color: var(--red1);
 }
 
 :focus,
diff --git a/js/dom-on-load.js b/js/dom-on-load.js
index 8358ca38..912befda 100644
--- a/js/dom-on-load.js
+++ b/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;
diff --git a/js/dom.js b/js/dom.js
index 53bf86dc..308d847b 100644
--- a/js/dom.js
+++ b/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] = '';
diff --git a/manage.html b/manage.html
index ff1f9de6..0d2ae318 100644
--- a/manage.html
+++ b/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>
 
diff --git a/manage/manage.css b/manage/manage.css
index 28687852..4423480c 100644
--- a/manage/manage.css
+++ b/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;
diff --git a/manage/manage.js b/manage/manage.js
index 055c6718..fcf9e3c2 100644
--- a/manage/manage.js
+++ b/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);
diff --git a/popup.html b/popup.html
index 18096b63..f1db2715 100644
--- a/popup.html
+++ b/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>
diff --git a/popup/popup.css b/popup/popup.css
index d45dc054..e5c0f2ff 100644
--- a/popup/popup.css
+++ b/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;
 }