revert sliders

_locales/en/messages.json

@@ -475,10 +475,6 @@
     "message": "Title",
     "description": "Used in various parts of the UI to indicate the title of something"
   },
-  "genericUI": {
-    "message": "UI",
-    "description": "UI = User Interface, this label is used to label generic UI-related stuff"
-  },
   "genericUnknown": {
     "message": "Unknown",
     "description": "Used in various parts of the UI to indicate if something is unknown (e.g. an unknown date)"
@@ -1080,9 +1076,6 @@
   "optionsResetButton": {
     "message": "Reset options"
   },
-  "optionsSliders": {
-    "message": "Use sliders to toggle style entries"
-  },
   "optionsStylusThemes": {
     "message": "Find a Stylus UI theme"
   },

js/prefs.js

@@ -108,8 +108,6 @@ window.INJECTED !== 1 && (() => {
 
     'popupWidth': 246,              // popup width in pixels
 
-    'ui.sliders': true,             // use sliders instead of checkboxes for style entries
-
     'updateInterval': 24,           // user-style automatic update interval, hours (0 = disable)
   };
   const values = clone(defaults);

manage.html

@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title i18n-text="manageTitle"></title>
   <link rel="stylesheet" href="global.css">
-  <link rel="stylesheet" href="options/onoffswitch.css">
   <link rel="stylesheet" href="manage/manage.css">
   <link rel="stylesheet" href="manage/config-dialog.css">
   <link rel="stylesheet" href="msgbox/msgbox.css">
+  <link rel="stylesheet" href="options/onoffswitch.css">
   <link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">
 
   <style id="firefox-transitions-bug-suppressor">
@@ -58,7 +58,10 @@
   <template data-id="styleNewUI">
     <div class="entry">
       <h2 class="style-name">
-        <toggle></toggle>
+        <div class="checkmate">
+          <input class="checker" type="checkbox" i18n-title="toggleStyle">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+        </div>
         <a class="style-name-link">
           &nbsp;
           <span class="style-info" data-type="version"></span>
@@ -81,20 +84,6 @@
     </div>
   </template>
 
-  <template data-id="toggleChecker">
-    <div class="checkmate">
-      <input class="checker" type="checkbox" i18n-title="toggleStyle">
-      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-    </div>
-  </template>
-
-  <template data-id="toggleSlider">
-    <div class="onoffswitch">
-      <input class="slider" type="checkbox" i18n-title="toggleStyle">
-      <span></span>
-    </div>
-  </template>
-
   <template data-id="homepageIconBig">
     <svg class="svg-icon" viewBox="0 0 20 20">
       <polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>

manage/manage.css

@@ -1,15 +1,10 @@
 :root {
   --header-width: 280px;
-  --slider-width: 21px;
   --name-padding-left: 20px;
   --name-padding-right: 40px;
   --actions-width: 75px;
 }
 
-.has-sliders {
-  --name-padding-left: 46px;
-}
-
 body {
   margin: 0;
   /* Firefox: fill the entire page for drag'n'drop to work */
@@ -1045,10 +1040,6 @@ a:hover {
     --name-padding-left: 34px;
   }
 
-  .has-sliders {
-    --name-padding-left: 44px;
-  }
-
   body {
     display: table;
   }
@@ -1072,11 +1063,6 @@ a:hover {
     table-layout: fixed;
   }
 
-  .entry .onoffswitch {
-    --slider-width: 20px;
-    padding-left: 14px;
-  }
-
   .newUI .entry .actions {
     padding-right: 30px
   }

manage/manage.js

@@ -44,34 +44,14 @@ const newUI = {
   enabled: null, // the global option should come first
   favicons: null,
   faviconsGray: null,
-  sliders: null,
   targets: null,
 };
 // ...add utility functions
 Object.assign(newUI, {
   ids: Object.keys(newUI),
-  prefKeyForId: id =>
-    id === 'sliders' ? `ui.${id}` :
-      id === 'enabled' ? 'manage.newUI' :
-        `manage.newUI.${id}`,
-  renderClass: () => {
-    const cl = document.documentElement.classList;
-    cl.toggle('newUI', newUI.enabled);
-    cl.toggle('oldUI', !newUI.enabled);
-  },
-  tpl: {
-    getToggle() {
-      return t.template[newUI.sliders ? 'toggleSlider' : 'toggleChecker'].cloneNode(true);
-    },
-    getEntry() {
-      const tpl = t.template[newUI.enabled ? 'styleNewUI' : 'style'].cloneNode(true);
-      if (newUI.enabled) {
-        const slot = $('toggle', tpl);
-        slot.parentElement.replaceChild(newUI.tpl.getToggle(), slot);
-      }
-      return tpl;
-    },
-  },
+  prefGroup: 'manage.newUI',
+  prefKeyForId: id => id === 'enabled' ? newUI.prefGroup : `${newUI.prefGroup}.${id}`,
+  renderClass: () => document.documentElement.classList.toggle('newUI', newUI.enabled),
 });
 // ...read the actual values
 for (const id of newUI.ids) {
@@ -211,7 +191,7 @@ function showStyles(styles = [], matchUrlIds) {
 function createStyleElement({style, name: nameLC}) {
   // query the sub-elements just once, then reuse the references
   if ((createStyleElement.parts || {}).newUI !== newUI.enabled) {
-    const entry = newUI.tpl.getEntry();
+    const entry = t.template[newUI.enabled ? 'styleNewUI' : 'style'];
     createStyleElement.parts = {
       newUI: newUI.enabled,
       entry,
@@ -682,7 +662,6 @@ function switchUI({styleOnly} = {}) {
 
   Object.assign(newUI, current);
   newUI.renderClass();
-  installed.classList.toggle('has-sliders', newUI.enabled && newUI.sliders);
   installed.classList.toggle('has-favicons', newUI.enabled && newUI.favicons);
   installed.classList.toggle('favicons-grayed', newUI.enabled && newUI.faviconsGray);
   if (installed.style.getPropertyValue('--num-targets') !== `${newUI.targets}`) {
@@ -700,15 +679,6 @@ function switchUI({styleOnly} = {}) {
     API.getAllStyles().then(showStyles);
     return;
   }
-  if (changed.sliders && newUI.enabled) {
-    const dst = newUI.tpl.getToggle();
-    const dstChecker = $('input', dst);
-    for (const entry of installed.children) {
-      const src = $('.checkmate, .onoffswitch', entry);
-      dstChecker.checked = entry.classList.contains('enabled');
-      src.parentElement.replaceChild(dst.cloneNode(true), src);
-    }
-  }
   if (changed.targets) {
     for (const entry of installed.children) {
       $('.applies-to', entry).classList.toggle('has-more', entry._numTargets > newUI.targets);

options.html

@@ -180,26 +180,6 @@
         </div>
       </div>
 
-      <div class="block">
-        <h1 i18n-text="genericUI"></h1>
-        <div class="items">
-          <label>
-            <span i18n-text="optionsSliders"></span>
-            <span class="onoffswitch">
-              <input type="checkbox" id="ui.sliders" class="slider">
-              <span></span>
-            </span>
-          </label>
-          <label class="chromium-only">
-            <span i18n-text="optionsAdvancedContextDelete"></span>
-            <span class="onoffswitch">
-              <input type="checkbox" id="editor.contextDelete" class="slider">
-              <span></span>
-            </span>
-          </label>
-        </div>
-      </div>
-
       <div class="block" id="updates">
         <h1 i18n-text="optionsCustomizeUpdate"></h1>
         <div class="items">
@@ -292,6 +272,13 @@
               <span></span>
             </span>
           </label>
+          <label class="chromium-only">
+            <span i18n-text="optionsAdvancedContextDelete"></span>
+            <span class="onoffswitch">
+              <input type="checkbox" id="editor.contextDelete" class="slider">
+              <span></span>
+            </span>
+          </label>
         </div>
       </div>
 

options/onoffswitch.css

@@ -71,56 +71,3 @@
   background-color: #04BA9F;
   box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
 }
-
-.entry .onoffswitch {
-  position: absolute;
-  width: var(--slider-width, 24px);
-  top: 0;
-  left: 0;
-  bottom: 0;
-  margin: 0;
-  padding: 0 4px 0 18px;
-  pointer-events: none;
-}
-.entry .onoffswitch span {
-  position: absolute;
-  width: var(--slider-width, 24px);
-  height: 11px;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  background-color: rgba(128, 128, 128, .2);
-  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
-  transition: box-shadow .25s;
-  pointer-events: none;
-}
-.entry .onoffswitch input:checked + span {
-  background-color: hsla(180, 50%, 40%, .5);
-}
-.entry .onoffswitch:hover span {
-  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .8);
-}
-.entry .onoffswitch input {
-  width: 100%;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  margin: 0;
-  cursor: pointer;
-  pointer-events: all;
-}
-.entry .onoffswitch input + span::before {
-  width: 7px;
-  height: 7px;
-  left: 2px;
-  right: auto;
-  margin: auto;
-  background-color: #fff;
-  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
-}
-.entry .onoffswitch input:checked + span::before {
-  left: auto;
-  right: 2px;
-  background-color: #fff;
-  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
-}

popup.html

@@ -21,7 +21,8 @@
       <div class="entry-content">
         <div class="main-controls">
           <label class="style-name">
-            <toggle></toggle>
+            <input class="checker" type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
         </div>
         <div class="actions">
@@ -70,20 +71,6 @@
     </div>
   </template>
 
-  <template data-id="toggleChecker">
-    <div class="checkmate">
-      <input class="checker" type="checkbox">
-      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-    </div>
-  </template>
-
-  <template data-id="toggleSlider">
-    <div class="onoffswitch">
-      <input class="slider" type="checkbox">
-      <span></span>
-    </div>
-  </template>
-
   <template data-id="writeStyle">
     <a class="write-style-link"></a>
   </template>

popup/popup.css

@@ -4,11 +4,6 @@
   --hotkey-margin: 16px;
 }
 
-.has-sliders {
-  --inner-padding: 20px;
-  --slider-width: 18px;
-}
-
 html, body {
   height: min-content;
   max-height: 600px;
@@ -242,16 +237,6 @@ html[style] .entry-content {
   padding-right: 5px;
 }
 
-.entry .onoffswitch {
-  padding: 0 0 0 6px;
-}
-.entry .onoffswitch input {
-  pointer-events: none;
-}
-.style-name:hover .onoffswitch span {
-  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .8);
-}
-
 .entry:nth-child(even) {
   background-color: rgba(0, 0, 0, 0.05);
 }

popup/popup.js

@@ -48,7 +48,6 @@ Promise.all([
 ]).then(([
   {frames, styles},
 ]) => {
-  toggleUiSliders();
   initPopup(frames);
   if (styles[0]) {
     showStyles(styles);
@@ -106,14 +105,6 @@ function toggleSideBorders(state = prefs.get('popup.borders')) {
   }
 }
 
-function toggleUiSliders() {
-  const sliders = prefs.get('ui.sliders');
-  const slot = $('toggle', t.template.style);
-  const toggle = t.template[sliders ? 'toggleSlider' : 'toggleChecker'];
-  slot.parentElement.replaceChild(toggle.cloneNode(true), slot);
-  document.body.classList.toggle('has-sliders', sliders);
-}
-
 /** @param {chrome.webNavigation.GetAllFrameResultDetails[]} frames */
 async function initPopup(frames) {
   installed = $('#installed');