remove sliders

* can be already implemented as a userstyle
* will be exposed in usercss config dialog later

_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/dlg/config-dialog.js

@@ -15,6 +15,7 @@ async function configDialog(style) {
     '/js/color/color-picker',
     '/js/color/color-picker.css',
     '/js/dlg/config-dialog.css',
+    '/options/onoffswitch.css',
   ]);
 
   const AUTOSAVE_DELAY = 500;

js/prefs.js

@@ -118,8 +118,6 @@
 
     '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 knownKeys = Object.keys(defaults);

manage.html

@@ -53,7 +53,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>
@@ -76,20 +79,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 "/>
@@ -174,7 +163,6 @@
   <script src="manage/sorter.js"></script>
   <script src="manage/manage.js"></script>
 
-  <link rel="stylesheet" href="options/onoffswitch.css">
   <link rel="stylesheet" href="manage/manage.css">
 </head>
 

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 */
@@ -1046,10 +1041,6 @@ a:hover {
     --name-padding-left: 34px;
   }
 
-  .has-sliders {
-    --name-padding-left: 44px;
-  }
-
   body {
     display: table;
   }
@@ -1073,11 +1064,6 @@ a:hover {
     table-layout: fixed;
   }
 
-  .entry .onoffswitch {
-    --slider-width: 20px;
-    padding-left: 14px;
-  }
-
   .newUI .entry .actions {
     padding-right: 30px
   }

manage/manage.js

@@ -29,34 +29,17 @@ 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 =>
+  prefKeyForId: id => `manage.newUI.${id}`.replace(/\.enabled$/, ''),
-    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;
-    },
-  },
 });
 // ...read the actual values
 for (const id of newUI.ids) {

manage/render.js

@@ -47,7 +47,7 @@ function createAgeText(el, style) {
 function createStyleElement({style, name: nameLC}) {
   // query the sub-elements just once, then reuse the references
   if ((elementParts || {}).newUI !== newUI.enabled) {
-    const entry = newUI.tpl.getEntry();
+    const entry = t.template[newUI.enabled ? 'styleNewUI' : 'style'].cloneNode(true);
     elementParts = {
       newUI: newUI.enabled,
       entry,
@@ -383,7 +383,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}`) {
@@ -401,15 +400,6 @@ function switchUI({styleOnly} = {}) {
     API.styles.getAll().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

@@ -183,26 +183,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">
@@ -295,6 +275,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,10 @@
       <div class="entry-content">
         <div class="main-controls">
           <label class="style-name">
-            <toggle></toggle>
+            <div class="checkmate">
+              <input class="checker" type="checkbox">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </div>
           </label>
         </div>
         <div class="actions">
@@ -70,20 +73,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>
@@ -191,7 +180,6 @@
   <script src="content/style-injector.js"></script>
   <script src="content/apply.js"></script>
 
-  <link rel="stylesheet" href="options/onoffswitch.css">
   <link rel="stylesheet" href="popup/popup.css">
 </head>
 

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;
@@ -246,16 +241,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

@@ -23,7 +23,6 @@ const $entry = styleOrId => $(`#${ENTRY_ID_PREFIX_RAW}${styleOrId.id || styleOrI
 
 preinit.then(({frames, styles, url}) => {
   tabURL = url;
-  toggleUiSliders();
   initPopup(frames);
   if (styles[0]) {
     showStyles(styles);
@@ -80,14 +79,6 @@ function toggleSideBorders(_key, state) {
   }
 }
 
-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) {
   prefs.subscribe('popupWidth', setPopupWidth, {runNow: true});