remove sliders

* can be already implemented as a userstyle * will be exposed in usercss config dialog later
2021-01-15 13:16:14 +03:00 · 2021-01-15 13:16:14 +03:00 · 914943ed4c
commit 914943ed4c
parent eb5fd90dc7
12 changed files with 18 additions and 181 deletions
--- a/_locales/en/messages.json
+++ b/_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"
  },
--- a/js/dlg/config-dialog.js
+++ b/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;
--- a/js/prefs.js
+++ b/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);
--- a/manage.html
+++ b/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>

--- a/manage/manage.css
+++ b/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
  }
--- a/manage/manage.js
+++ b/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 =>
-    id === 'sliders' ? `ui.${id}` :
-      id === 'enabled' ? 'manage.newUI' :
-        `manage.newUI.${id}`,
+  prefKeyForId: id => `manage.newUI.${id}`.replace(/\.enabled$/, ''),
  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) {
--- a/manage/render.js
+++ b/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);
--- a/options.html
+++ b/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>

--- a/options/onoffswitch.css
+++ b/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);
-}
--- a/popup.html
+++ b/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>

--- a/popup/popup.css
+++ b/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);
 }
--- a/popup/popup.js
+++ b/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});