Add files via upload

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

@@ -24,6 +24,8 @@ body {
   font-size: 12px;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   margin: 0;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .firefox body {
@@ -31,7 +33,7 @@ body {
   background-color: #fff;
 }
 
-body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
+#confirm  {
   margin-left: var(--outer-padding);
   margin-right: var(--outer-padding);
 }
@@ -58,15 +60,15 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   pointer-events: none;
 }
 
-#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
+body.disabled #disableAll:checked + .svg-icon.checked {
   fill: hsl(0, 68%, 42%);
 }
 
-#installed.disabled + .actions #disableAll:checked {
+body.disabled #disableAll:checked {
   border-color: hsl(0, 68%, 50%);
 }
 
-#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
+body.disabled #disableAll:checked:hover + .svg-icon.checked {
   fill: #fff;
 }
 
@@ -79,7 +81,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
   color: hsl(0, 68%, 42%);
 }
 
-#installed.disabled + .actions #disableAll:checked:hover {
+body.disabled #disableAll:checked:hover {
   border-color: hsl(0, 50%, 56%);
   background-color: hsl(0, 50%, 56%);
 }
@@ -132,34 +134,308 @@ a:hover {
   color: #666;
 }
 
-.actions > .main-controls {
+body > div:last-of-type,
-  padding-left: 16px;
+body.blocked > div {
-}
-
-.main-controls {
-  display: table-cell;
-}
-
-body > DIV:last-of-type,
-body.blocked > DIV {
   border-bottom: none;
 }
 
+body > div:not(#installed):not(#search-results-error) {
+  background: hsl(0, 0%, 95%);
+}
+
+#search-results {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-basis: 100%;
+}
+
 #installed {
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid hsl(0, 0%, 80%);
-  padding-bottom: 2px;
-  padding-top: 2px;
   max-height: 445px;
   overflow-y: auto;
   counter-reset: style-number;
   position: relative;
+  flex-basis: 100%;
 }
 
-#installed.disabled .style-name {
+#write-styles-wrapper,
+.classicUI #disable-all-wrapper {
+  flex-basis: 100%;
+}
+
+body.disabled .toggle-all-off,
+body:not(.disabled) .toggle-all-on {
+  display: none;
+}
+
+#popup-write-style-icon {
+  display: inline-flex;
+}
+
+#write-styles-wrapper {
+  padding: var(--outer-padding);
+}
+
+.action-wrapper {
+  display: inline-flex;
+  flex-shrink: 1;
+  align-items: center;
+}
+
+#popup-manage-wrapper {
+  padding-left: 4px;
+}
+
+#disable-all-wrapper {
+  padding-right: 4px;
+}
+
+#find-styles-wrapper.action-wrapper {
+  flex-grow: 1;
+  justify-content: center;
+}
+
+/* accessibility */
+.main-controls .style-edit-link-accessibility {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none
+}
+
+.style-edit-link-accessibility:not([data-focused-via-click]):focus + .style-name,
+.entry .actions > a:not([data-focused-via-click]):focus {
+  opacity: 1 !important;
+}
+
+#popup-manage-icon,
+#popup-options-icon,
+#popup-wiki-icon,
+#disable-all-icon,
+#popup-confirm-icon {
+  display: inline-flex;
+  height: 30px;
+  width: 30px;
+  align-items: center;
+  justify-content: center;
+}
+
+#popup-wiki-icon .svg-icon,
+#find-styles-icon .svg-icon {
+  height: 22px;
+  width: 22px;
+}
+
+#find-inline-icon {
+  display: inline-flex;
+}
+
+#popup-confirm-icon {
+  cursor: pointer;
+  margin: -5px 0;
+}
+
+#popup-options-icon .svg-icon,
+#popup-confirm-icon .svg-icon {
+  height: 18px;
+  width: 18px;
+}
+
+#disable-all-icon .svg-icon {
+  height: 20px;
+  width: 20px;
+}
+
+#write-style-for .svg-icon {
+  height: 16px;
+  width: 16px;
+}
+
+#find-external-icon,
+#find-external-icon-noclick,
+#find-inline-icon {
+  height: 20px;
+  padding-top: 3px;
+  overflow: hidden;
+  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,
+a[target="_blank"] .svg-icon.config {
+  height: 20px;
+  width: 20px;
+}
+
+#popup-manage-icon .svg-icon {
+  stroke: #666;
+  fill: transparent;
+  transition: stroke .5s;
+}
+
+#popup-manage-icon:hover .svg-icon {
+  stroke: #000;
+}
+
+#find-styles-link,
+#write-style-for {
+  font-size: 0;
+}
+
+#write-style-wrapper {
+  flex-basis: 100%;
+  padding: var(--outer-padding);
+}
+
+#find-styles {
+  display: flex;
+}
+
+#find-styles-inline-group input[type="checkbox"] ~ #find-external-icon,
+.search-results-shown #find-external-icon-noclick,
+.error-shown #find-external-icon-noclick,
+#find-styles-icon {
+  display: inline-flex;
+}
+
+#find-styles-inline-group input[type="checkbox"]:checked ~ #find-external-icon,
+#find-styles-inline-group input[type="checkbox"]:not(:checked) ~ #find-inline-icon,
+#find-external-icon-noclick {
+  display: none;
+}
+
+.search-results-shown #find-external-icon,
+.search-results-shown #find-inline-icon,
+.error-shown #find-external-icon,
+.error-shown #find-inline-icon {
+  display: none !important;
+}
+
+#find-styles-inline-group,
+#find-inline-icon {
+  display: inline-flex;
+  height: min-content;
+}
+
+#find-styles-inline-group label {
+  display: inline-flex;
+  pointer-events: none;
+}
+
+#find-inline-icon,
+#find-external-icon {
+  pointer-events: all;
+}
+
+.svg-icon.write-style path:first-child {
+  stroke: #666;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}
+
+.svg-icon.toggled-on,
+.svg-icon.toggled-off {
+  height: 22px;
+  width: 22px;
+}
+
+.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,
+.svg-icon.toggled-on path:nth-child(2) {
+  fill: hsl(0, 0%, 94%);
+}
+
+a:hover .svg-icon.toggled-on path:first-child,
+a:hover .svg-icon.toggled-on path:nth-child(2) {
+  fill: #fff;
+}
+
+.svg-icon.toggled-off path:first-child,
+.svg-icon.toggled-off path:nth-child(2) {
+  fill: hsl(0, 0%, 84%);
+}
+
+a:hover .svg-icon.toggled-off path:first-child,
+a:hover .svg-icon.toggled-off path:nth-child(2) {
+  fill: hsl(0, 0%, 90%);
+}
+
+.svg-icon.toggled-on path:nth-child(2),
+.svg-icon.toggled-off path:nth-child(2) {
+  stroke: hsl(0, 0%, 50%);
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}
+
+a:hover .svg-icon.toggled-on path:nth-child(2),
+a:hover .svg-icon.toggled-off path:nth-child(2) {
+  stroke: #000;
+}
+
+a:hover .svg-icon.toggled-on path:nth-child(3),
+a:hover .svg-icon.toggled-off path:nth-child(3) {
+  fill: #000;
+}
+
+
+.svg-icon.toggled-on path:nth-child(3),
+.svg-icon.toggled-off path:nth-child(3) {
+  fill: hsl(0, 0%, 30%);
+}
+
+.entry.disabled .actions > .enable,
+.entry.enabled .actions > .disable {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.entry.disabled .actions > .disable,
+.entry.enabled .actions > .enable,
+.toggleUI .entry.disabled .actions > .enable,
+.toggleUI .entry.enabled .actions > .disable,
+.toggleUI .directLinkUI-el {
+  display: none !important;
+}
+
+.classicUI #find-styles-inline-group label {
+  position: relative;
+  padding-left: 16px;
+  pointer-events: all;
+}
+
+.toggleUI .style-name {
+  padding-left: 26px;
+  cursor: default;
+}
+
+.iconUI .classicUI-el,
+.classicUI .iconUI-el,
+.directLinkUI .toggleUI-el,
+.toggleUI .editUI-el {
+  display: none !important;
+}
+
+.iconUI #disable-all-wrapper {
+  padding: 0;
+}
+
+body.disabled .style-name {
   text-decoration: line-through;
 }
 
-#installed.disabled + .actions #disableAll-label {
+body.disabled + .actions #disableAll-label {
   font-weight: bold;
   color: firebrick;
 }
@@ -204,8 +480,14 @@ html[style] .entry {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-left: 26px;
+  padding-left: var(--outer-padding);
   position: relative;
+  transition: color .1s, opacity 1s;
+  cursor: pointer;
+}
+
+.style-name:hover {
+  color: hsl(180, 100%, 20%);
 }
 
 .entry .style-name::before {
@@ -218,6 +500,7 @@ html[style] .entry {
   background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
   pointer-events: none;
   opacity: 0;
+  z-index: -1;
   transition: opacity .1s;
   will-change: opacity;
 }
@@ -226,16 +509,66 @@ html[style] .entry {
   opacity: 1;
 }
 
+.entry.disabled .style-name,
+.entry.disabled .actions > a,
+.entry.regexp-partial .style-name,
+.entry.regexp-partial .actions > a,
+.unreachable .entry .style-name,
+.unreachable .entry .actions > a {
+  opacity: .35;
+  transition: opacity .1s;
+}
+
+/***** adjust disabled opacity on zebra-striping *****/
+
+#installed:not(.reverse-stripe) .entry.disabled:nth-child(even) .style-name,
+#installed:not(.reverse-stripe) .entry.disabled:nth-child(even) .actions > a,
+#installed:not(.reverse-stripe) .entry.regexp-partial:nth-child(even) .style-name,
+#installed:not(.reverse-stripe) .entry.regexp-partial:nth-child(even) .actions > a,
+#installed:not(.reverse-stripe) .unreachable .entry:nth-child(even) .style-name,
+#installed:not(.reverse-stripe) .unreachable .entry:nth-child(even) .actions > a,
+.reverse-stripe .entry.disabled:nth-child(odd) .style-name,
+.reverse-stripe .entry.disabled:nth-child(odd) .actions > a,
+.reverse-stripe .entry.regexp-partial:nth-child(odd) .style-name,
+.reverse-stripe .entry.regexp-partial:nth-child(odd) .actions > a,
+.reverse-stripe .unreachable .entry:nth-child(odd) .style-name,
+.reverse-stripe .unreachable .entry:nth-child(odd) .actions > a {
+  opacity: .3;
+}
+
+.entry.disabled:before,
+.entry.regexp-partial:before,
+.unreachable .entry:before {
+  opacity: .6;
+  transition: opacity .1s;
+}
+
+.entry:hover .style-name,
+.entry:hover .actions > a,
+.entry:hover:before {
+  opacity: 1 !important;
+}
+
 .entry .main-controls {
   height: 100%;
   display: inline-flex;
   flex-grow: 1;
   overflow: hidden;
   align-items: center;
-  padding-right: 5px;
+  position: relative;
 }
 
-.entry:nth-child(even) {
+.entry .actions {
+  padding-left: 5px;
+}
+
+.entry:nth-child(odd),
+.reverse-stripe .entry:nth-child(even) {
+  background-color: transparent;
+}
+
+.entry:nth-child(even),
+.reverse-stripe .entry:nth-child(odd) {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
@@ -265,9 +598,24 @@ html[style*="border"] .entry:nth-child(11):before {
 }
 
 .entry .actions > * {
-  display: inline-block;
+  height: 26px;
-  padding: 0 1px;
+  width: 20px;
-  margin: 0 1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.entry .actions > .enable,
+.entry .actions > .disable {
+  width: 24px;
+}
+
+.entry .actions > .configure {
+  padding-right: 1px;
+}
+
+.entry .actions > .configure[target="_blank"] {
+  padding-right: 2px;
 }
 
 .not-applied .checker,
@@ -301,6 +649,7 @@ html[style*="border"] .entry:nth-child(11):before {
   box-sizing: border-box;
   cursor: pointer;
   font-size: 90%;
+  flex-shrink: 0;
 }
 
 .regexp-partial .actions,
@@ -342,15 +691,55 @@ html[style*="border"] .entry:nth-child(11):before {
 .svg-icon {
   pointer-events: none;
   transition: fill .5s;
-  width: 14px;
+  width: 16px;
   height: 16px;
   fill: #666;
 }
 
-a:hover .svg-icon {
+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 {
   fill: #000;
 }
 
+.svg-icon.external,
+.svg-icon.inline {
+  fill: hsl(0, 0%, 65%);
+}
+
+.actions .svg-icon,
+.svg-icon.options {
+  fill: hsl(0, 0%, 50%);
+}
+
+.svg-icon.search,
+#find-styles:hover .svg-icon.external:not(.noclick),
+#find-styles:hover .svg-icon.inline {
+  fill: hsl(0, 0%, 45%);
+}
+
+.svg-icon.remove {
+  height: 16px;
+  width: 14px;
+}
+
+#disable-all-icon {
+  transition: transform .5s;
+  will-change: transform;
+}
+
+#disable-all-icon:hover .svg-icon,
+body.disabled #disable-all-icon .svg-icon {
+  fill: hsl(0, 100%, 42%);
+}
+
+body.disabled #disable-all-icon {
+  transform: rotate(180deg);
+  transform-origin: 50% 50%;
+}
+
 body > .actions {
   margin-top: 0.5em;
   /* raise the actions above the hotkey-info */
@@ -369,15 +758,19 @@ body > .actions {
 }
 
 body.blocked #installed > *,
-body.blocked .actions > .main-controls {
+body.blocked #find-styles-wrapper,
+body.blocked #write-style-wrapper {
   display: none;
 }
 
-/* Never shown, but can be enabled with a style */
+.iconUI body.blocked #popup-options-wrapper {
+  flex-grow: 1;
+  justify-content: flex-start;
+}
 
-.entry .actions > .enable,
+.iconUI body.blocked #popup-wiki-wrapper {
-.entry .actions > .disable {
+  flex-grow: 1;
-  display: none;
+  justify-content: flex-end;
 }
 
 /* 'New style' links */
@@ -385,11 +778,11 @@ body.blocked .actions > .main-controls {
 #write-style {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 
 #write-style-for {
-  margin-right: .6ex
+  margin-right: .2rem;
 }
 
 .write-style-link {
@@ -401,10 +794,17 @@ body.blocked .actions > .main-controls {
 }
 
 #match {
-  overflow-wrap: break-word;
+  display: inline-flex;
-  display: block;
+  flex-grow: 1;
-  flex-grow: 9;
+  margin-top: 2px;
-  min-width: 200px;
+}
+
+#match > .breadcrumbs {
+  display: inline-flex;
+}
+
+#match > .breadcrumbs > * {
+  word-break: break-all;
 }
 
 /* "breadcrumbs" 'new style' links */
@@ -457,27 +857,18 @@ body.blocked .actions > .main-controls {
 
 /* action buttons */
 
-#popup-options {
+#popup-manage-wrapper button,
-  display: flex;
+#popup-options-wrapper button,
-  flex-direction: row;
+#popup-wiki-wrapper button {
-  padding: var(--outer-padding) 1px;
-}
-
-#popup-options button {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 2px 4px;
-  margin-right: 4px;
   /* several languages have labels of wildly different lengths so we try to maintain the proportion */
   flex: 1 1 auto;
   min-width: 2em;
 }
 
-#popup-options button:last-child {
-  margin-right: 0;
-}
-
 /* confirm */
 
 #confirm {
@@ -516,9 +907,9 @@ body.blocked .actions > .main-controls {
   max-height: 80%;
   min-height: 6em;
   padding: 1em;
-  background-color: #fff;
   display: flex;
   flex-direction: column;
+  background: hsl(0, 0%, 95%);
   border: solid 2px rgba(0, 0, 0, 0.5);
 }
 
@@ -526,10 +917,35 @@ body.blocked .actions > .main-controls {
   padding-bottom: .5em;
 }
 
-#confirm > div > div {
+#confirm > div > div.classicUI-el {
   text-align: center;
 }
 
+#confirm > div > div.iconUI-el {
+  display: flex;
+  flex-basis: 100%;
+  justify-content: center;
+}
+
+.iconUI #confirm > div {
+  padding-bottom: .25em
+}
+
+#popup-delete-icon.action-wrapper,
+#popup-cancel-icon.action-wrapper {
+  height: 20px;
+  width: 20px;
+  justify-content: center;
+}
+
+#popup-delete-icon {
+  margin-right: 1rem;
+}
+
+#popup-cancel-icon {
+  margin-left: 1rem;
+}
+
 .non-windows #confirm > div > div {
   direction: rtl;
   text-align: right;
@@ -541,12 +957,8 @@ body.blocked .actions > .main-controls {
   margin: 0 .25em .25em 0;
 }
 
-.unreachable .entry {
-  opacity: .25;
-}
-
 .unreachable .blocked-info {
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid hsl(0, 0%, 80%);
 }
 
 .blocked-info {
@@ -554,13 +966,13 @@ body.blocked .actions > .main-controls {
 }
 
 .blocked-info label {
-  padding: 5px 0;
+  padding: 5px var(--outer-padding);
   display: block;
   font-weight: bold;
 }
 
 .blocked-info p {
-  padding: 1px 0 var(--outer-padding);
+  padding: 1px var(--outer-padding) var(--outer-padding);
   display: block;
   font-size: 90%;
   margin: 0;
@@ -608,10 +1020,11 @@ body.blocked .actions > .main-controls {
 #hotkey-info div {
   padding: 1em;
   border-top: 1px solid #ddd;
-  background-color: white;
+  background-color: hsl(0, 0%, 95%);
 }
 
 #hotkey-info div:last-child {
+  background-color: hsl(0, 0%, 85%);
   box-shadow: 0 0 90px rgba(0, 0, 0, .25);
   position: relative;
 }
@@ -636,6 +1049,187 @@ body.blocked .actions > .main-controls {
   white-space: nowrap;
 }
 
+/***** icon UI actions on top *****/
+
+.actions-top #confirm {
+  order: 1;
+}
+
+.actions-top #installed {
+  order: 8;
+  border-top: 1px solid hsl(0, 0%, 80%);
+}
+
+.actions-top body:not(.search-results-shown) #installed {
+  border-bottom: 0;
+}
+
+.actions-top #popup-manage-wrapper {
+  order: 2;
+}
+
+.actions-top #popup-options-wrapper {
+  order: 3;
+}
+
+.actions-top #find-styles-wrapper {
+  order: 4;
+}
+
+.actions-top #popup-wiki-wrapper {
+  order: 5;
+}
+
+.actions-top #disable-all-wrapper {
+  order: 6;
+}
+
+.actions-top #write-style-wrapper {
+  order: 7;
+}
+
+.actions-top #search-results-error {
+  order: 9;
+}
+
+.actions-top #search-results {
+  order: 10;
+}
+
+/***** classic UI *****/
+
+.classicUI #confirm {
+  order: 1;
+}
+
+.classicUI #installed {
+  order: 2;
+}
+
+.classicUI #popup-manage-wrapper {
+  order: 6;
+}
+
+.classicUI #popup-options-wrapper {
+  order: 7;
+}
+
+.classicUI #find-styles-wrapper {
+  order: 4;
+}
+
+.classicUI #popup-wiki-wrapper {
+  order: 8;
+}
+
+.classicUI #disable-all-wrapper {
+  order: 3;
+}
+
+.classicUI #write-style-wrapper {
+  order: 5;
+}
+
+.classicUI #search-results-error {
+  order: 9;
+}
+
+.classicUI #search-results {
+  order: 10;
+}
+
+.classicUI #write-style {
+  flex-wrap: wrap;
+  padding: 0 4px 0 16px;
+}
+
+.classicUI #find-styles-wrapper {
+  align-items: baseline;
+  justify-content: flex-start;
+  padding: 0 4px 0 25px;
+}
+
+.classicUI #disable-all-wrapper {
+  padding: .6rem var(--outer-padding) .45rem;
+}
+
+.classicUI #find-styles-link {
+  font-size: 12px;
+  margin-right: .55rem;
+}
+
+.classicUI #write-style-for {
+  font-size: 12px;
+  flex-basis: 100%;
+}
+
+.classicUI #popup-manage-wrapper,
+.classicUI #popup-options-wrapper,
+.classicUI #popup-wiki-wrapper {
+  flex-grow: 1;
+  padding-bottom: var(--outer-padding);
+}
+
+.classicUI #popup-manage-wrapper {
+  padding-left: var(--outer-padding);
+  padding-right: 4px;
+}
+
+.classicUI #popup-wiki-wrapper {
+  padding-left: 4px;
+  padding-right: var(--outer-padding);
+}
+
+.toggleUI .style-name:hover {
+  color: #000;
+}
+
+.toggleUI .entry .style-name::before {
+  background: linear-gradient(to right, hsla(0, 0%, 0%, 0.15), hsla(0, 0%, 0%, 0.05) 50%, transparent);
+}
+
+/***** classic UI actions on top *****/
+
+.classicUI.actions-top #confirm {
+  order: 1;
+}
+
+.classicUI.actions-top #installed {
+  order: 8;
+}
+
+.classicUI.actions-top #popup-manage-wrapper {
+  order: 5;
+}
+
+.classicUI.actions-top #popup-options-wrapper {
+  order: 6;
+}
+
+.classicUI.actions-top #find-styles-wrapper {
+  order: 3;
+}
+
+.classicUI.actions-top #popup-wiki-wrapper {
+  order: 7;
+}
+
+.classicUI.actions-top #disable-all-wrapper {
+  order: 2;
+}
+
+.classicUI.actions-top #write-style-wrapper {
+  order: 4;
+}
+
+.classicUI.actions-top #search-results-error {
+  order: 9;
+}
+
+.classicUI.actions-top #search-results {
+  order: 10;
+}
+
 /******************************************/
 
 @keyframes lights-off {

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,35 @@ 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 = () => {
+    chrome.runtime.openOptionsPage();
+    window.close();
+  };
+
   $('#popup-wiki-button').onclick = handleEvent.openURLandHide;
 
-  if (!prefs.get('popup.stylesFirst')) {
+  $('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
-    document.body.insertBefore(
-      $('body > .actions'),
-      installed);
-  }
 
   if (!tabURL) {
     document.body.classList.add('blocked');
@@ -241,6 +283,11 @@ function showStyles(styles) {
     }
     window.dispatchEvent(new Event('showStyles:done'));
   });
+
+  var reverseZebra = $('.entry:last-child:nth-of-type(odd)');
+  if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) {
+    $('#installed').classList.add('reverse-stripe');
+  }
 }
 
 
@@ -272,6 +319,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,
@@ -323,7 +376,11 @@ Object.assign(handleEvent, {
   },
 
   name(event) {
+    if (prefs.get('popupclick') === 1) {
       this.checkbox.dispatchEvent(new MouseEvent('click'));
+    } else {
+      $('.style-edit-link').click();
+    }
     event.preventDefault();
   },
 
@@ -341,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();
+    $('button[data-cmd="ok"]', box).focus();
-    $('[data-cmd="ok"]', box).onclick = () => confirm(true);
+    $('button[data-cmd="ok"]', box).onclick = () => confirm(true);
-    $('[data-cmd="cancel"]', box).onclick = () => confirm(false);
+    $('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
@@ -429,7 +489,7 @@ Object.assign(handleEvent, {
     event.preventDefault();
     getActiveTab()
       .then(activeTab => API.openURL({
-        url: this.href || this.dataset.href,
+        url: this.hasAttribute('href') && this.hasAttribute('data-href') === true ? this.dataset.href : this.href || this.dataset.href,
         index: activeTab.index + 1,
         message: tryJSONparse(this.dataset.sendMessage),
       }))
@@ -474,6 +534,13 @@ function handleDelete(id) {
   if (!$('.entry')) {
     installed.appendChild(template.noStyles.cloneNode(true));
   }
+
+  var reverseZebra = $('.entry:last-child:nth-of-type(odd)');
+  if (typeof(reverseZebra) !== 'undefined' && reverseZebra !== null) {
+    $('#installed').classList.add('reverse-stripe');
+  } else {
+    $('#installed').classList.remove('reverse-stripe');
+  }
 }
 
 

popup/search-results.css

@@ -18,15 +18,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: hsla(0, 100%, 30%, .8);
+  color: #fff;
+  text-shadow: 2px 1px 1px #000;
   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 {
@@ -49,6 +51,10 @@ body.search-results-shown {
   background-color: #eee;
 }
 
+.search-result:last-of-type {
+  margin-bottom: 0;
+}
+
 .search-result:hover {
   border-color: #000;
   background-color: #fff;
@@ -227,8 +233,7 @@ body.search-results-shown {
 }
 
 .search-results-nav[data-type="bottom"] {
-  margin-top: -1em;
+  margin: 1.25rem 0 .5rem;
-  margin-bottom: 1em;
 }
 
 #search-results .search-results-nav button {
@@ -252,11 +257,6 @@ body.search-results-shown {
   text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
 }
 
-#find-styles-inline-group label {
-  position: relative;
-  padding-left: 16px;
-}
-
 /* spinner: https://github.com/loadingio/css-spinner */
 .lds-spinner {
   -webkit-user-select: none;

popup/search-results.js

@@ -94,7 +94,9 @@ window.addEventListener('showStyles:done', function _() {
   function init() {
     setTimeout(() => document.body.classList.add(BODY_CLASS));
 
+    if (prefs.get('popupui') === 1) {
       $('#find-styles-inline-group').classList.add('hidden');
+    }
 
     dom.container = $('#search-results');
     dom.container.dataset.empty = '';
@@ -207,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.documentElement.classList.add('error-shown');
     if (dom.error.getBoundingClientRect().bottom < 0) {
       dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
     }