tweaks and fixes (#1123)

* same color for disabled styles in popup/manager
* reduce slider knob
* fix click-to-edit in popup on slider and iframe badge
* indicate slider interactivity on hovering name
* remove 2px gap when first/last entry is striped
* stretch 'blocked' separator to full width
* unreachable dimming should not apply to frames
* restore CWS check in popup
* increase not-applied opacity on name as it's #999 now
* oldUI: restore 'disabled' bubble + show 'usercss' fully
* adjust disabled colors to match perception because transparent text is rendered using gamma-blending whereas colored text uses LCD-antialiasing so to match opacity .6 of #000 we need #888 not #666

manage/manage.css

@@ -232,6 +232,7 @@ a:hover {
   display: none;
 }
 
+.oldUI .disabled h2::after,
 .entry.usercss .style-name-link::after {
   font-size: 11px;
   border-radius: 4px;
@@ -240,14 +241,32 @@ a:hover {
   content: "UC";
   background-color: hsla(180, 35%, 50%, .35);
   padding: 2px 3px;
+  color: #000;
+}
+.oldUI .disabled h2::after {
+  content: var(--genericDisabledLabel);
+  text-transform: lowercase;
+  font-weight: normal;
+  background: rgba(128, 128, 128, .2);
+  padding: 2px 5px 3px;
+  vertical-align: middle;
+}
+.oldUI .entry.usercss .style-name-link::after {
+  content: "usercss";
+  font-weight: normal;
+  vertical-align: middle;
 }
 
 .disabled h2 .style-name-link,
-.disabled .actions,
+.disabled .applies-to,
-.disabled .applies-to {
+.newUI .disabled.entry .svg-icon {
-  opacity: 0.6;
+  color: #888;
+  fill: #c4c4c4;
   font-weight: normal;
-  transition: opacity .5s .1s;
+  transition: color .5s .1s, fill .5s .1s;
+}
+.disabled.usercss .style-name-link::after {
+  background-color: hsla(180, 35%, 50%, .2);
 }
 
 .disabled:hover .actions {
@@ -321,10 +340,6 @@ a:hover {
   margin-bottom: .75rem;
 }
 
-.newUI .disabled {
-  opacity: 1;
-}
-
 .newUI .entry {
   display: table-row;
   padding-top: 0;

manage/manage.js

@@ -54,7 +54,11 @@ Object.assign(newUI, {
     id === 'sliders' ? `ui.${id}` :
       id === 'enabled' ? 'manage.newUI' :
         `manage.newUI.${id}`,
-  renderClass: () => document.documentElement.classList.toggle('newUI', newUI.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);
@@ -112,6 +116,7 @@ const handleEvent = {};
   // translate CSS manually
   document.styleSheets[0].insertRule(
     `:root {${[
+      'genericDisabledLabel',
       'updateAllCheckSucceededSomeEdited',
       'filteredStylesAllHidden',
     ].map(id => `--${id}:"${CSS.escape(t(id))}";`).join('')

options/onoffswitch.css

@@ -80,6 +80,7 @@
   bottom: 0;
   margin: 0;
   padding: 0 4px 0 18px;
+  pointer-events: none;
 }
 .entry .onoffswitch span {
   position: absolute;
@@ -109,8 +110,8 @@
   pointer-events: all;
 }
 .entry .onoffswitch input + span::before {
-  width: 9px;
+  width: 7px;
-  height: 9px;
+  height: 7px;
   left: 2px;
   right: auto;
   margin: auto;

popup/popup.css

@@ -27,8 +27,8 @@ body {
 }
 
 body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
-  margin-left: var(--outer-padding);
+  padding-left: var(--outer-padding);
-  margin-right: var(--outer-padding);
+  padding-right: var(--outer-padding);
 }
 
 .firefox .chromium-only {
@@ -141,8 +141,6 @@ body.blocked > DIV {
 
 #installed {
   border-bottom: 1px solid black;
-  padding-bottom: 2px;
-  padding-top: 2px;
   max-height: 445px;
   overflow-y: auto;
   counter-reset: style-number;
@@ -222,8 +220,17 @@ html[style] .entry-content {
   opacity: 1;
 }
 
-.entry.disabled .style-name {
+.entry.disabled .style-name,
+.entry.disabled .svg-icon {
   font-weight: normal;
+  color: #888;
+  fill: #aaa;
+}
+.entry.disabled:hover .svg-icon {
+    fill: #666;
+}
+.entry.disabled:hover a:hover .svg-icon {
+    fill: #000;
 }
 
 .entry .main-controls {
@@ -238,6 +245,12 @@ html[style] .entry-content {
 .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);
@@ -305,7 +318,9 @@ a.configure[target="_blank"] .svg-icon.config {
   opacity: .2;
   transition: opacity .5s ease-in-out .25s, color .5s ease-in-out .25s;
 }
-
+.not-applied .style-name {
+  opacity: .5;
+}
 .not-applied:hover .checker,
 .not-applied:hover .style-name,
 .not-applied:hover .actions > * {
@@ -499,7 +514,7 @@ body > .actions {
   vertical-align: middle;
 }
 
-body.blocked #installed > *,
+body.blocked #installed > :not(.frame),
 body.blocked .actions > .main-controls {
   display: none;
 }
@@ -773,7 +788,7 @@ body.blocked .actions > .main-controls {
   margin: 0 .25em .25em 0;
 }
 
-.unreachable .entry {
+.unreachable .entry:not(.frame) {
   opacity: .25;
 }
 

popup/popup.js

@@ -129,7 +129,7 @@ async function initTabUrls() {
 }
 
 /** @param {chrome.webNavigation.GetAllFrameResultDetails[]} frames */
-function initPopup(frames) {
+async function initPopup(frames) {
   installed = $('#installed');
 
   setPopupWidth();
@@ -170,27 +170,29 @@ function initPopup(frames) {
     el.onclick = () => el.classList.toggle('expanded');
   }
 
-  getActiveTab().then(function ping(tab, retryCountdown = 10) {
+  const isStore = tabURL.startsWith(URLS.browserWebStore);
-    msg.sendTab(tab.id, {method: 'ping'}, {frameId: 0})
+  if (isStore && !FIREFOX) {
-      .catch(() => false)
+    blockPopup();
-      .then(pong => {
-        if (pong) {
     return;
   }
+
+  for (let retryCountdown = 10; retryCountdown-- > 0;) {
+    const tab = await getActiveTab();
+    if (await msg.sendTab(tab.id, {method: 'ping'}, {frameId: 0}).catch(() => {})) {
+      return;
+    }
+    if (tab.status === 'complete' && (!FIREFOX || tab.url !== ABOUT_BLANK)) {
+      break;
+    }
     // FF and some Chrome forks (e.g. CentBrowser) implement tab-on-demand
     // so we'll wait a bit to handle popup being invoked right after switching
-        if (retryCountdown > 0 && (
+    await new Promise(resolve => setTimeout(resolve, 100));
-            tab.status !== 'complete' ||
-            FIREFOX && tab.url === ABOUT_BLANK)) {
-          setTimeout(ping, 100, tab, --retryCountdown);
-          return;
   }
   const info = t.template.unreachableInfo;
   if (!FIREFOX) {
     // Chrome "Allow access to file URLs" in chrome://extensions message
     info.appendChild($create('p', t('unreachableFileHint')));
-        }
+  } else if (isStore) {
-        if (FIREFOX && tabURL.startsWith(URLS.browserWebStore)) {
     $('label', info).textContent = t('unreachableAMO');
     const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
                  (FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
@@ -214,8 +216,6 @@ function initPopup(frames) {
   }
   document.body.classList.add('unreachable');
   document.body.insertBefore(info, document.body.firstChild);
-      });
-  });
 }
 
 /** @param {chrome.webNavigation.GetAllFrameResultDetails} frame */
@@ -439,6 +439,7 @@ function createStyleElement(style) {
     const sel = 'span.frame-url';
     const frameEl = $(sel, entry) || styleName.insertBefore($create(sel), styleName.lastChild);
     frameEl.title = frameUrl;
+    frameEl.onmousedown = handleEvent.maybeEdit;
   }
   entry.classList.toggle('frame', Boolean(frameUrl));
 
@@ -626,7 +627,8 @@ Object.assign(handleEvent, {
       return;
     }
     // open an editor on middleclick
-    if (event.target.matches('.entry, .style-name, .style-edit-link')) {
+    const el = event.target;
+    if (el.matches('.entry, .style-edit-link') || el.closest('.style-name')) {
       this.onmouseup = () => $('.style-edit-link', this).click();
       this.oncontextmenu = event => event.preventDefault();
       event.preventDefault();
@@ -634,7 +636,7 @@ Object.assign(handleEvent, {
     }
     // prevent the popup being opened in a background tab
     // when an irrelevant link was accidentally clicked
-    if (event.target.closest('a')) {
+    if (el.closest('a')) {
       event.preventDefault();
       return;
     }