add option to use sliders in manager and popup

_locales/en/messages.json

@@ -475,6 +475,10 @@
     "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)"
@@ -1076,6 +1080,9 @@
   "optionsResetButton": {
     "message": "Reset options"
   },
+  "optionsSliders": {
+    "message": "Use sliders to toggle style entries"
+  },
   "optionsStylusThemes": {
     "message": "Find a Stylus UI theme"
   },

js/prefs.js

@@ -108,6 +108,8 @@ 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,10 +58,7 @@
   <template data-id="styleNewUI">
     <div class="entry">
       <h2 class="style-name">
-        <div class="checkmate">
+        <toggle></toggle>
-          <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>
@@ -84,6 +81,20 @@
     </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/config-dialog.css

@@ -1,3 +1,7 @@
+:root {
+  --onoffswitch-width: 60px;
+}
+
 #stylus-manage .config-dialog #message-box-contents {
   padding: 2em 16px;
 }

manage/manage.css

@@ -1,10 +1,13 @@
 :root {
   --header-width: 280px;
-  --checkbox-width: 24px;
+  --slider-width: 21px;
-  --name-padding-left: 40px;
+  --name-padding-left: 20px;
   --name-padding-right: 40px;
   --actions-width: 75px;
-  --onoffswitch-width: 60px;
+}
+
+.has-sliders {
+  --name-padding-left: 46px;
 }
 
 body {
@@ -360,10 +363,6 @@ a:hover {
 
 /************ checkbox & select************/
 
-.newUI .checker {
-  margin: 0;
-}
-
 #newUIoptions > div, #newUIoptions > label {
   margin: 4px 0;
 }
@@ -464,7 +463,6 @@ a:hover {
 
 .newUI .style-name {
   font-size: 14px;
-  text-indent: calc(var(--checkbox-width) - var(--name-padding-left) - 4px);
   padding-left: var(--name-padding-left);
   padding-right: var(--name-padding-right);
   position: relative;
@@ -1028,6 +1026,14 @@ a:hover {
 }
 
 @media (max-width: 850px) {
+  :root {
+    --name-padding-left: 34px;
+  }
+
+  .has-sliders {
+    --name-padding-left: 44px;
+  }
+
   body {
     display: table;
   }
@@ -1051,6 +1057,11 @@ a:hover {
     table-layout: fixed;
   }
 
+  .entry .onoffswitch {
+    --slider-width: 20px;
+    padding-left: 14px;
+  }
+
   .newUI .entry .actions {
     padding-right: 30px
   }
@@ -1131,7 +1142,6 @@ a:hover {
   }
 
   .newUI .entry .style-name {
-    padding: .5rem 0 .5rem 34px;
     text-indent: unset;
   }
 

manage/manage.js

@@ -44,14 +44,30 @@ 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),
-  prefGroup: 'manage.newUI',
+  prefKeyForId: id =>
-  prefKeyForId: id => id === 'enabled' ? newUI.prefGroup : `${newUI.prefGroup}.${id}`,
+    id === 'sliders' ? `ui.${id}` :
+      id === 'enabled' ? 'manage.newUI' :
+        `manage.newUI.${id}`,
   renderClass: () => document.documentElement.classList.toggle('newUI', 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) {
@@ -190,12 +206,12 @@ 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 = t.template[newUI.enabled ? 'styleNewUI' : 'style'];
+    const entry = newUI.tpl.getEntry();
     createStyleElement.parts = {
       newUI: newUI.enabled,
       entry,
       entryClassBase: entry.className,
-      checker: $('.checker', entry) || {},
+      checker: $('input', entry) || {},
       nameLink: $('.style-name-link', entry),
       editLink: $('.style-edit-link', entry) || {},
       editHrefBase: 'edit.html?id=',
@@ -397,7 +413,7 @@ function getFaviconImgSrc(container = installed) {
 Object.assign(handleEvent, {
 
   ENTRY_ROUTES: {
-    '.checker, .enable, .disable': 'toggle',
+    'input, .enable, .disable': 'toggle',
     '.style-name': 'name',
     '.homepage': 'external',
     '.check-update': 'check',
@@ -621,7 +637,7 @@ function handleUpdate(style, {reason, method} = {}) {
     if (diff.length === 1 && diff[0].key === 'enabled') {
       oldEntry.classList.toggle('enabled', style.enabled);
       oldEntry.classList.toggle('disabled', !style.enabled);
-      $$('.checker', oldEntry).forEach(el => (el.checked = style.enabled));
+      $$('input', oldEntry).forEach(el => (el.checked = style.enabled));
       oldEntry.styleMeta = newStyleMeta;
       entry = oldEntry;
       oldEntry = null;
@@ -661,6 +677,7 @@ 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}`) {
@@ -678,6 +695,15 @@ 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,6 +180,26 @@
         </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">
@@ -272,13 +292,6 @@
               <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,3 +71,55 @@
   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;
+}
+.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: 9px;
+  height: 9px;
+  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

@@ -27,8 +27,7 @@
       <div class="entry-content">
         <div class="main-controls">
           <label class="style-name">
-            <input class="checker" type="checkbox">
+            <toggle></toggle>
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           </label>
         </div>
         <div class="actions">
@@ -77,6 +76,20 @@
     </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/hotkeys.js

@@ -57,7 +57,7 @@ const hotkeys = (() => {
     if (!entry) {
       return;
     }
-    const target = $(shiftKey ? '.style-edit-link' : '.checker', entry);
+    const target = $(shiftKey ? '.style-edit-link' : 'input', entry);
     target.dispatchEvent(new MouseEvent('click', {cancelable: true}));
   }
 
@@ -86,14 +86,14 @@ const hotkeys = (() => {
     let task = Promise.resolve();
     for (let entry of list) {
       entry = typeof entry === 'string' ? $('#' + entry) : entry;
-      if (!match && $('.checker', entry).checked !== enable || entry.classList.contains(match)) {
+      if (!match && $('input', entry).checked !== enable || entry.classList.contains(match)) {
         results.push(entry.id);
         task = task
           .then(() => API.toggleStyle(entry.styleId, enable))
           .then(() => {
             entry.classList.toggle('enabled', enable);
             entry.classList.toggle('disabled', !enable);
-            $('.checker', entry).checked = enable;
+            $('input', entry).checked = enable;
           });
       }
     }

popup/popup.css

@@ -1,11 +1,12 @@
 :root {
-  --header-width: 280px;
+  --inner-padding: 18px; /* checkbox + gap */
-  --checkbox-width: 24px;
-  --name-padding-left: 40px;
-  --name-padding-right: 40px;
-  --actions-width: 75px;
-  --onoffswitch-width: 60px;
   --outer-padding: 9px;
+  --hotkey-margin: 16px;
+}
+
+.has-sliders {
+  --inner-padding: 20px;
+  --slider-width: 18px;
 }
 
 html, body {
@@ -35,12 +36,12 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 /************ checkbox ************/
 
-.style-name:hover input[type="checkbox"]:checked {
+.style-name:hover .checker:checked {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
 
-.style-name:hover input[type="checkbox"] {
+.style-name:hover .checker {
   border-color: hsl(0, 0%, 32%);
   background-color: hsl(0, 0%, 82%);
 }
@@ -96,7 +97,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 
 #disable-all-wrapper .main-controls label {
-  padding-left: 16px;
+  padding-left: var(--inner-padding);
   position: relative;
   transition: color .25s;
   font-size: 12px;
@@ -126,7 +127,7 @@ a:hover {
 }
 
 .actions > .main-controls {
-  padding-left: 16px;
+  padding-left: var(--inner-padding);
 }
 
 .main-controls {
@@ -178,7 +179,7 @@ body.blocked > DIV {
 }
 
 html[style] .entry-content {
-  padding: 0 16px 0 0;
+  padding: 0 var(--hotkey-margin) 0 0;
 }
 
 #no-styles.entry {
@@ -199,7 +200,7 @@ html[style] .entry-content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-left: 26px;
+  padding-left: calc(var(--outer-padding) + var(--inner-padding));
   position: relative;
 }
 
@@ -234,6 +235,10 @@ html[style] .entry-content {
   padding-right: 5px;
 }
 
+.entry .onoffswitch {
+  padding: 0 0 0 6px;
+}
+
 .entry:nth-child(even) {
   background-color: rgba(0, 0, 0, 0.05);
 }
@@ -265,7 +270,7 @@ html[style*="border"] .entry:nth-child(11):before {
 
 .entry .actions > * {
   height: 26px;
-  width: 18px;
+  width: var(--inner-padding);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -849,7 +854,7 @@ body.blocked .actions > .main-controls {
   top: 0;
   right: 0;
   bottom: 0;
-  width: 16px;
+  width: var(--hotkey-margin);
   cursor: help;
   margin: 0;
   padding: 0;

popup/popup.js

@@ -47,6 +47,11 @@ initTabUrls()
         .map(({url}) => getStyleDataMerged(url).then(styles => ({styles, url}))),
     ]))
   .then(([, ...results]) => {
+    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);
     if (results[0]) {
       showStyles(results);
     } else {
@@ -353,7 +358,6 @@ function createStyleElement(style) {
   let entry = $.entry(style);
   if (!entry) {
     entry = t.template.style.cloneNode(true);
-    entry.setAttribute('style-id', style.id);
     Object.assign(entry, {
       id: ENTRY_ID_PREFIX_RAW + style.id,
       styleId: style.id,
@@ -361,12 +365,8 @@ function createStyleElement(style) {
       onmousedown: handleEvent.maybeEdit,
       styleMeta: style,
     });
-    const checkbox = $('.checker', entry);
+    Object.assign($('input', entry), {
-    Object.assign(checkbox, {
-      id: ENTRY_ID_PREFIX_RAW + style.id,
-      // title: t('exclusionsPopupTip'),
       onclick: handleEvent.toggle,
-      // oncontextmenu: handleEvent.openExcludeMenu
     });
     const editLink = $('.style-edit-link', entry);
     Object.assign(editLink, {
@@ -378,7 +378,6 @@ function createStyleElement(style) {
       htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
       onclick: handleEvent.name,
     });
-    styleName.checkbox = checkbox;
     styleName.appendChild(document.createTextNode(' '));
 
     const config = $('.configure', entry);
@@ -415,7 +414,7 @@ function createStyleElement(style) {
 
   entry.classList.toggle('disabled', !style.enabled);
   entry.classList.toggle('enabled', style.enabled);
-  $('.checker', entry).checked = style.enabled;
+  $('input', entry).checked = style.enabled;
 
   const styleName = $('.style-name', entry);
   styleName.lastChild.textContent = style.customName || style.name;
@@ -478,7 +477,7 @@ Object.assign(handleEvent, {
   },
 
   name(event) {
-    this.checkbox.dispatchEvent(new MouseEvent('click'));
+    $('input', this).dispatchEvent(new MouseEvent('click'));
     event.preventDefault();
   },