popup

popup/popup.js

@@ -11,6 +11,22 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
 
 toggleSideBorders();
 
+if (prefs.get('popupui') === 1) {
+  document.documentElement.classList.add('classicUI');
+} else {
+  document.documentElement.classList.add('iconUI');
+}
+
+if (prefs.get('popupclick') === 1) {
+  document.documentElement.classList.add('toggleUI');
+} else {
+  document.documentElement.classList.add('directLinkUI');
+}
+
+if (!prefs.get('popup.stylesFirst')) {
+  document.documentElement.classList.add('actions-top');
+}
+
 getActiveTab().then(tab =>
   FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
   ? getTabRealURLFirefox(tab)
@@ -81,8 +97,17 @@ function initPopup() {
 
   // action buttons
   $('#disableAll').onchange = function () {
-    installed.classList.toggle('disabled', this.checked);
+    document.body.classList.toggle('disabled', this.checked);
   };
+
+  $('#disable-all-icon').onclick = () => {
+    $('#disableAll').click();
+  };
+
+  $('#find-styles-icon').onclick = () => {
+    $('#find-styles-link').click();
+  };
+
   setupLivePrefs();
 
   Object.assign($('#popup-manage-button'), {
@@ -91,18 +116,36 @@ function initPopup() {
     oncontextmenu: handleEvent.openManager,
   });
 
+  Object.assign($('#popup-manage-icon'), {
+    onclick: handleEvent.openManager,
+    onmouseup: handleEvent.openManager,
+    oncontextmenu: handleEvent.openManager,
+  });
+
+  $('#find-external-icon').onclick = () => {
+    event.preventDefault();
+    $('input.toggle-inline').click()
+  };
+
+  $('#find-inline-icon').onclick = () => {
+    event.preventDefault();
+    $('input.toggle-inline').click()
+  };
+
   $('#popup-options-button').onclick = () => {
     chrome.runtime.openOptionsPage();
     window.close();
   };
 
+  $('#popup-options-icon').onclick = () => {
+    event.preventDefault();
+    chrome.runtime.openOptionsPage();
+    window.close();
+  };
+
   $('#popup-wiki-button').onclick = handleEvent.openURLandHide;
 
-  if (!prefs.get('popup.stylesFirst')) {
-    document.body.insertBefore(
-      $('body > .actions'),
-      installed);
-  }
+  $('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
 
   if (!tabURL) {
     document.body.classList.add('blocked');
@@ -129,7 +172,7 @@ function initPopup() {
         $('label', info).textContent = t('unreachableAMO');
         const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
                      (FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
-        const renderToken = s => s[0] === '<' ? $create('b', tWordBreak(s.slice(1, -1))) : s;
+        const renderToken = s => s[0] === '<' ? $create('b', s.slice(1, -1)) : s;
         const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
         const noteNode = $create('fragment', note.split('\n').map(renderLine));
         const target = $('p', info);
@@ -241,6 +284,9 @@ function showStyles(styles) {
     }
     window.dispatchEvent(new Event('showStyles:done'));
   });
+
+  var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
+  $('#installed').classList.toggle('reverse-stripe', reverseZebra);
 }
 
 
@@ -272,6 +318,12 @@ function createStyleElement({
     onclick: handleEvent.openLink,
   });
 
+  const editLinkAccess = $('.style-edit-link-accessibility', entry);
+  Object.assign(editLinkAccess, {
+    href: editLinkAccess.getAttribute('href') + style.id,
+    onclick: handleEvent.openLink,
+  });
+
   const styleName = $('.style-name', entry);
   Object.assign(styleName, {
     htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
@@ -304,14 +356,7 @@ function createStyleElement({
   if (check) detectSloppyRegexps([style]);
 
   const oldElement = $(ENTRY_ID_PREFIX + style.id);
-  if (oldElement && oldElement.contains(document.activeElement)) {
-    // preserve the focused element inside
-    const {className} = document.activeElement;
-    oldElement.parentNode.replaceChild(entry, oldElement);
-    // we're not using $() since className may contain multiple tokens
-    const el = entry.getElementsByClassName(className)[0];
-    if (el) el.focus();
-  } else if (oldElement) {
+  if (oldElement) {
     oldElement.parentNode.replaceChild(entry, oldElement);
   } else {
     container.appendChild(entry);
@@ -330,13 +375,16 @@ Object.assign(handleEvent, {
   },
 
   name(event) {
+    if (prefs.get('popupclick') === 1) {
       this.checkbox.dispatchEvent(new MouseEvent('click'));
+    } else {
+      const entry = handleEvent.getClickedStyleElement(event);
+      $('.style-edit-link', entry).click();
+    }
     event.preventDefault();
   },
 
   toggle(event) {
-    // when fired on checkbox, prevent the parent label from seeing the event, see #501
-    event.stopPropagation();
     API.saveStyle({
       id: handleEvent.getClickedStyleId(event),
       enabled: this.matches('.enable') || this.checked,
@@ -350,9 +398,12 @@ Object.assign(handleEvent, {
     box.dataset.display = true;
     box.style.cssText = '';
     $('b', box).textContent = $('.style-name', entry).textContent;
-    $('[data-cmd="ok"]', box).focus();
-    $('[data-cmd="ok"]', box).onclick = () => confirm(true);
-    $('[data-cmd="cancel"]', box).onclick = () => confirm(false);
+    $('button[data-cmd="ok"]', box).focus();
+    $('button[data-cmd="ok"]', box).onclick = () => confirm(true);
+    $('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
+    $('a[data-cmd="ok"]', box).focus();
+    $('a[data-cmd="ok"]', box).onclick = () => confirm(true); event.preventDefault();
+    $('a[data-cmd="cancel"]', box).onclick = () => confirm(false); event.preventDefault();
     window.onkeydown = event => {
       const keyCode = event.keyCode || event.which;
       if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
@@ -438,7 +489,7 @@ Object.assign(handleEvent, {
     event.preventDefault();
     getActiveTab()
       .then(activeTab => API.openURL({
-        url: this.href || this.dataset.href,
+        url: this.hasAttribute('data-href') ? this.dataset.href : this.href,
         index: activeTab.index + 1,
         message: tryJSONparse(this.dataset.sendMessage),
       }))
@@ -483,6 +534,9 @@ function handleDelete(id) {
   if (!$('.entry')) {
     installed.appendChild(template.noStyles.cloneNode(true));
   }
+
+  var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
+  $('#installed').classList.toggle('reverse-stripe', reverseZebra);
 }
 
 

popup/search-results.css

@@ -1,15 +1,19 @@
+:root {
+  --search-result-meta: hsla(0, 0%, 93%, 0.75);
+}
+
 body.search-results-shown {
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 #search-results:not([data-empty]):before {
-  background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px);
+  background-image: linear-gradient(transparent, var(--black-alpha-3) 200px);
   content: "";
   top: -50px;
   left: -1000px;
   right: -1000px;
-  bottom: -12px;
+  bottom: 0;
   position: absolute;
   pointer-events: none;
   animation: fadein 1s;
@@ -18,15 +22,17 @@ body.search-results-shown {
 
 #search-results {
   position: relative;
-  margin-top: -1em;
 }
 
 #search-results-error {
-  background-color: rgba(255, 0, 0, 0.4);
+  flex-basis: 100%;
+  background-color: var(--darkred);
+  color: var(--white);
+  text-shadow: 2px 1px 1px var(--black);
   font-weight: bold;
   padding: 5px;
   text-align: center;
-  margin: 0 0 var(--outer-padding);
+  margin: 0 var(--outer-padding) var(--outer-padding);
 }
 
 #search-results-list {
@@ -39,24 +45,29 @@ body.search-results-shown {
   position: relative;
   padding: 8px 8px 21px;
   min-height: 160px;
+  margin: 0 2px;
 }
 
 .search-result {
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, .75);
+  box-shadow: 1px 1px 10px var(--black-alpha-75);
   border-radius: 4px;
-  border: 1px solid #555;
+  border: 1px solid var(--gray-lightness-33);
   margin-bottom: 24px;
-  background-color: #eee;
+  background-color: var(--gray-lightness-93);
+}
+
+.search-result:last-of-type {
+  margin-bottom: 0;
 }
 
 .search-result:hover {
-  border-color: #000;
-  background-color: #fff;
+  border-color: var(--black);
+  background-color: var(--white);
 }
 
 .search-result .lds-spinner {
   transform: scale(.5);
-  filter: invert(1) drop-shadow(1px 1px 3px #000);
+  filter: invert(1) drop-shadow(1px 1px 3px var(--black));
 }
 
 .search-result-empty .lds-spinner {
@@ -79,7 +90,7 @@ body.search-results-shown {
 .search-result-title {
   margin-bottom: .5em;
   display: block;
-  color: #555;
+  color: var(--gray-lightness-33);
   overflow-wrap: break-word;
 }
 
@@ -103,14 +114,14 @@ body.search-results-shown {
   line-height: 18px;
   text-align: center;
   position: absolute;
-  background-color: hsla(180, 100%, 27%, .75);
-  color: #fff;
+  background-color: var(--darkcyan-alpha-75);
+  color: var(--white);
   transition: background-color .5s;
   pointer-events: none;
 }
 
 .search-result-screenshot:hover ~ .search-result-status {
-  background-color: hsla(180, 100%, 27%, 1);
+  background-color: var(--darkcyan);
 }
 
 .search-result-actions {
@@ -131,13 +142,13 @@ body.search-results-shown {
 }
 
 .search-result-actions button {
-  box-shadow: 2px 2px 20px #000;
+  box-shadow: 2px 2px 20px var(--black);
   white-space: nowrap;
   margin: 3px;
 }
 
 .search-result-meta {
-  background-color: hsla(0, 0%, 93%, 0.75);
+  background-color: var(--search-result-meta);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
@@ -150,7 +161,7 @@ body.search-results-shown {
 }
 
 .search-result:hover .search-result-meta {
-  background-color: hsla(0, 0%, 100%, 0.75);
+  background-color: var(--white-alpha-75);
 }
 
 .search-result-meta dt {
@@ -179,16 +190,13 @@ body.search-results-shown {
   font-weight: bold;
 }
 
-.search-result-meta [data-type="rating"][data-class="good"] dd {
-  color: darkgreen;
-}
-
+.search-result-meta [data-type="rating"][data-class="good"] dd,
 .search-result-meta [data-type="rating"][data-class="okay"] dd {
-  color: darkgreen;
+  color: var(--darkgreen);
 }
 
 .search-result-meta [data-type="rating"][data-class="bad"] dd {
-  color: darkred;
+  color: var(--darkred);
 }
 
 .search-result-meta [data-type="rating"][data-class="none"] dd {
@@ -227,8 +235,7 @@ body.search-results-shown {
 }
 
 .search-results-nav[data-type="bottom"] {
-  margin-top: -1em;
-  margin-bottom: 1em;
+  margin: 1.25rem 0 .5rem;
 }
 
 #search-results .search-results-nav button {
@@ -249,12 +256,7 @@ body.search-results-shown {
 }
 
 #search-results .search-results-nav button:not(:disabled):hover {
-  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
-}
-
-#find-styles-inline-group label {
-  position: relative;
-  padding-left: 16px;
+  text-shadow: 0 1px 4px var(--black-alpha-5);
 }
 
 /* spinner: https://github.com/loadingio/css-spinner */