Popup fixup

popup/hotkeys.js

@@ -120,7 +120,7 @@ var hotkeys = (() => {
     const container = $('#hotkey-info');
     let title;
     container.onclick = ({target}) => {
-      if (target.localName === 'button') {
+      if (target.localName === 'button' || target.id === 'popup-confirm-icon') {
         close();
       } else if (!container.dataset.active) {
         open();
@@ -174,10 +174,11 @@ var hotkeys = (() => {
             }));
       [
         linesToElements(t('popupHotkeysInfo')),
-        $create('button', t('confirmOK')),
+        $create('button', {className: 'classicUI-el', id: 'confirm-button'}, t('confirmOK')),
       ].forEach(child => {
         container.appendChild($create('div', child));
       });
+      $('#confirm-button').insertAdjacentElement('afterend', template.confirmHotkey);
     }
   }
 

popup/popup.css

@@ -25,6 +25,7 @@ html, body {
 }
 
 body {
+  background-color: var(--truegray-alpha-15);
   width: 252px;
   font-size: 12px;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
@@ -154,10 +155,6 @@ body:not(.disabled) .toggle-all-on {
   display: none;
 }
 
-svg.svg-icon.toggle-all-on {
-  margin-top: 4px;
-}
-
 #popup-write-style-icon {
   display: inline-flex;
 }
@@ -172,6 +169,31 @@ svg.svg-icon.toggle-all-on {
   align-items: center;
 }
 
+.iconUI body > .action-wrapper button,
+#disable-all-icon,
+#popup-confirm-icon {
+  display: inline-flex;
+  height: 30px;
+  width: 30px;
+  justify-content: center;
+  align-items: center;
+}
+
+#disable-all-icon > div {
+  display: inline-flex;
+}
+
+body:not(.disabled) #disable-all-icon > div:nth-child(2),
+body.disabled #disable-all-icon > div:first-child {
+  display: none;
+}
+
+body > .action-wrapper,
+#write-style-wrapper,
+#search-results {
+  background-color: var(--truegray-alpha-1);
+}
+
 #popup-manage-wrapper {
   padding-left: 4px;
 }
@@ -200,10 +222,6 @@ svg.svg-icon.toggle-all-on {
   opacity: 1 !important;
 }
 
-.iconUI button {
-  cursor: pointer;
-}
-
 .iconUI button .svg-icon {
   display: inline-flex;
   height: 20px;
@@ -212,14 +230,6 @@ svg.svg-icon.toggle-all-on {
   justify-content: center;
 }
 
-.iconUI button:hover .svg-icon {
-  fill: var(--black);
-}
-
-.iconUI #popup-manage-button:hover .svg-icon {
-  stroke: var(--black);
-}
-
 #popup-confirm-icon {
   cursor: pointer;
   margin: -5px 0;
@@ -230,11 +240,22 @@ svg.svg-icon.toggle-all-on {
   width: 20px;
 }
 
+.iconUI #popup-options-button .svg-icon,
+#popup-confirm-icon .svg-icon {
+  height: 18px;
+  width: 18px;
+}
+
 #write-style-for .svg-icon {
   height: 16px;
   width: 16px;
 }
 
+#find-styles-icon .svg-icon {
+  height: 22px;
+  width: 22px;
+}
+
 #find-external-icon,
 #find-external-icon-noclick,
 #find-inline-icon {
@@ -244,7 +265,6 @@ svg.svg-icon.toggle-all-on {
   box-sizing: border-box;
 }
 
-#popup-manage-icon .svg-icon,
 #find-external-icon .svg-icon,
 #find-external-icon-noclick .svg-icon,
 #find-inline-icon .svg-icon,
@@ -253,13 +273,12 @@ a[target="_blank"] .svg-icon.config {
   width: 20px;
 }
 
-#popup-manage-icon .svg-icon {
+#popup-manage-button .svg-icon {
   stroke: var(--gray-lightness-40);
-  fill: transparent;
-  transition: stroke .5s;
+  fill: transparent !important;
 }
 
-#popup-manage-icon:hover .svg-icon {
+#popup-manage-button:hover .svg-icon {
   stroke: var(--black);
 }
 
@@ -294,8 +313,7 @@ a[target="_blank"] .svg-icon.config {
 
 .search-results-shown #find-external-icon,
 .search-results-shown #find-inline-icon,
-.error-shown #find-external-icon,
-.error-shown #find-inline-icon {
+.error-shown #find-styles-wrapper {
   display: none !important;
 }
 
@@ -331,8 +349,6 @@ a[target="_blank"] .svg-icon.config {
 .svg-icon.toggled-on path,
 .svg-icon.toggled-off path {
   transition: fill .5s, stroke .5s;
-  height: 22px;
-  width: 22px;
 }
 
 .svg-icon.toggled-on path:first-child,
@@ -415,13 +431,16 @@ a:hover .svg-icon.toggled-off path:nth-child(3) {
   padding: 0 5px 0 0;
 }
 
-.iconUI button {
+.iconUI .action-wrapper button {
+  display: inline-flex;
   border: 0;
   background: none;
+  padding: 0;
+  cursor: pointer;
 }
-.iconUI button:hover {
-  background: none;
 
+.iconUI .action-wrapper button:hover {
+  background: none;
 }
 
 body.disabled .style-name {
@@ -685,7 +704,7 @@ html[style*="border"] .entry:nth-child(11):before {
 
 .svg-icon {
   pointer-events: none;
-  transition: fill .5s;
+  transition: fill .5s, stroke .5s;
   width: 16px;
   height: 16px;
   fill: var(--gray-lightness-40);
@@ -693,28 +712,31 @@ html[style*="border"] .entry:nth-child(11):before {
 
 a:hover .svg-icon,
 .actions a:hover .svg-icon,
-#find-styles:hover a:hover .svg-icon.external:not(.noclick),
-#find-styles:hover a:hover .svg-icon.inline,
-a:hover .svg-icon.search {
+.iconUI button:hover .svg-icon,
+.iconUI #popup-options-button:hover .svg-icon,
+#find-inline-icon:hover .svg-icon,
+#find-external-icon:hover .svg-icon,
+#find-styles-icon:hover .svg-icon,
+#popup-wiki-button:hover .svg-icon {
   fill: var(--black);
 }
 
-.svg-icon.external,
-.svg-icon.inline {
-  fill: var(--gray-lightness-65);
-}
-
 .actions .svg-icon,
-.svg-icon.options {
+.iconUI #popup-options-button .svg-icon,
+#find-inline-icon .svg-icon,
+#find-external-icon .svg-icon {
   fill: var(--truegray);
 }
 
-.svg-icon.search,
-#find-styles:hover .svg-icon.external:not(.noclick),
-#find-styles:hover .svg-icon.inline {
+#find-styles-icon .svg-icon,
+#popup-wiki-button .svg-icon {
   fill: var(--gray-lightness-45);
 }
 
+.svg-icon.external.noclick {
+  fill: var(--gray-lightness-65);
+}
+
 .svg-icon.remove {
   height: 16px;
   width: 14px;
@@ -747,18 +769,19 @@ body.blocked #write-style-wrapper {
   display: none;
 }
 
-.iconUI body.blocked #popup-options-wrapper {
+.iconUI body.blocked #popup-options-wrapper,
+.iconUI body.error-shown #popup-options-wrapper {
   flex-grow: 1;
   justify-content: flex-start;
 }
 
-.iconUI body.blocked #popup-wiki-wrapper {
+.iconUI body.blocked #popup-wiki-wrapper,
+.iconUI body.error-shown #popup-wiki-wrapper {
   flex-grow: 1;
   justify-content: flex-end;
 }
 
 /* 'New style' links */
-
 #write-style {
   display: flex;
   flex-direction: row;
@@ -846,9 +869,9 @@ body.blocked #write-style-wrapper {
 
 /* action buttons */
 
-#popup-manage-wrapper button,
-#popup-options-wrapper button,
-#popup-wiki-wrapper button {
+.classicUI #popup-manage-wrapper button,
+.classicUI #popup-options-wrapper button,
+.classicUI #popup-wiki-wrapper button {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -950,6 +973,7 @@ body.blocked #write-style-wrapper {
 }
 
 .blocked-info {
+  background-color: var(--truegray-alpha-1);
   hyphens: auto;
 }
 

popup/popup.js

@@ -93,6 +93,10 @@ function initPopup() {
     document.body.classList.toggle('disabled', this.checked);
   };
 
+  $('#find-styles-icon').onclick = () => {
+    $('#find-styles-link').click();
+  };
+
   $('#disable-all-icon').onclick = () => {
     $('#disableAll').click();
   };
@@ -383,7 +387,7 @@ Object.assign(handleEvent, {
     $('button[data-cmd="ok"]', box).focus();
     $('button[data-cmd="ok"]', box).onclick = () => confirm(true);
     $('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
-    $('.iconUI a[data-cmd="ok"]', box).focus();
+    $('a[data-cmd="ok"]', box).focus();
     $('a[data-cmd="ok"]', box).onclick = () => confirm(true);
     $('a[data-cmd="cancel"]', box).onclick = () => confirm(false);
     window.onkeydown = event => {

popup/search-results.js

@@ -81,8 +81,8 @@ window.addEventListener('showStyles:done', function _() {
       }
       event.preventDefault();
 
-      // hide search link/icons
-      this.parentNode.classList.add('hidden'); 
+      this.textContent = this.title;
+      this.title = '';
 
       init();
       load();
@@ -209,6 +209,7 @@ window.addEventListener('showStyles:done', function _() {
     dom.error.classList.remove('hidden');
     dom.container.classList.toggle('hidden', !processedResults.length);
     document.body.classList.toggle('search-results-shown', processedResults.length > 0);
+    document.body.classList.add('error-shown');
     if (dom.error.getBoundingClientRect().bottom < 0) {
       dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
     }