From a49f8984828cc98f920121967c862d17ab297f1b Mon Sep 17 00:00:00 2001
From: aminomancer <33384265+aminomancer@users.noreply.github.com>
Date: Sat, 3 Sep 2022 21:32:10 -0700
Subject: [PATCH] (JS) update verticalTabsPane.uc.js and
 allTabsMenuExpansionPack.uc.js to fix an issue with the mute buttons and
 update tab tooltip labels. (CSS) update appearance of onboarding dialogs.
 update appearance of addon badges in about:addons. add styles for the new
 firefox view button and related elements.

---
 JS/allTabsMenuExpansionPack.uc.js | 21 ++++---
 JS/verticalTabsPane.uc.js         | 11 ++--
 resources/in-content/root.css     |  6 ++
 resources/in-content/system.css   | 34 +++++++++--
 uc-context-menu-icons.css         |  6 ++
 uc-globals.css                    |  1 +
 uc-navbar.css                     | 70 +++++++++++------------
 uc-popups.css                     | 95 ++++++++++++++++++-------------
 uc-variables.css                  |  1 +
 9 files changed, 146 insertions(+), 99 deletions(-)

diff --git a/JS/allTabsMenuExpansionPack.uc.js b/JS/allTabsMenuExpansionPack.uc.js
index 3c636af..24e856f 100644
--- a/JS/allTabsMenuExpansionPack.uc.js
+++ b/JS/allTabsMenuExpansionPack.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           All Tabs Menu Expansion Pack
-// @version        2.1.1
+// @version        2.1.2
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer
 // @description    Next to the "new tab" button in Firefox there's a V-shaped button that opens a
@@ -312,11 +312,10 @@
               gFissionBrowser
             );
             if (contentPid) {
-              label += " (pid " + contentPid + ")";
-              if (gFissionBrowser) {
-                label += " [F";
-                if (framePids.length) label += " " + framePids.join(", ");
-                label += "]";
+              if (framePids && framePids.length) {
+                label += ` (pids ${contentPid}, ${framePids.sort().join(", ")})`;
+              } else {
+                label += ` (pid ${contentPid})`;
               }
             }
             if (linkedBrowser.docShellIsActive) label += " [A]";
@@ -747,10 +746,14 @@
       }
     };
     tabsPanel._onCommand = function(e, tab) {
+      if (e.target.hasAttribute("activemedia-blocked")) {
+        if (tab.multiselected) this.gBrowser.resumeDelayedMediaOnMultiSelectedTabs(tab);
+        else tab.resumeDelayedMedia();
+        return;
+      }
       if (e.target.hasAttribute("toggle-mute")) {
-        tab.multiselected
-          ? this.gBrowser.toggleMuteAudioOnMultiSelectedTabs(tab)
-          : tab.toggleMuteAudio();
+        if (tab.multiselected) this.gBrowser.toggleMuteAudioOnMultiSelectedTabs(tab);
+        else tab.toggleMuteAudio();
         return;
       }
       if (e.target.hasAttribute("close-button")) {
diff --git a/JS/verticalTabsPane.uc.js b/JS/verticalTabsPane.uc.js
index 62e1a41..76d179b 100644
--- a/JS/verticalTabsPane.uc.js
+++ b/JS/verticalTabsPane.uc.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Vertical Tabs Pane
-// @version        1.6.8
+// @version        1.6.9
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer/uc.css.js
 // @description    Create a vertical pane across from the sidebar that functions
@@ -1631,11 +1631,10 @@
               gFissionBrowser
             );
             if (contentPid) {
-              label += " (pid " + contentPid + ")";
-              if (gFissionBrowser) {
-                label += " [F";
-                if (framePids.length) label += " " + framePids.join(", ");
-                label += "]";
+              if (framePids && framePids.length) {
+                label += ` (pids ${contentPid}, ${framePids.sort().join(", ")})`;
+              } else {
+                label += ` (pid ${contentPid})`;
               }
             }
             if (linkedBrowser.docShellIsActive) label += " [A]";
diff --git a/resources/in-content/root.css b/resources/in-content/root.css
index adc35d6..a4eef2c 100644
--- a/resources/in-content/root.css
+++ b/resources/in-content/root.css
@@ -29,6 +29,12 @@
     background-color: var(--pdf-selection-bgcolor) !important;
     color: revert !important;
   }
+
+  /* optional dark mode for PDFs. to use, open the inspector
+  and change class="pdfViewer" to class="pdfViewer invert" */
+  .pdfViewer.invert {
+    filter: invert(1) brightness(1.15) contrast(0.85);
+  }
 }
 
 :read-only:focus:not(:focus-visible),
diff --git a/resources/in-content/system.css b/resources/in-content/system.css
index 6c78372..8e4d92a 100644
--- a/resources/in-content/system.css
+++ b/resources/in-content/system.css
@@ -335,14 +335,12 @@
     margin-inline: -15.5px !important;
   }
 
-  link[rel="stylesheet"][href="chrome://global/content/elements/message-bar.css"] ~ .container
-  {
+  link[rel="stylesheet"][href="chrome://global/content/elements/message-bar.css"] ~ .container {
     padding: 8px !important;
     border-radius: 0 !important;
   }
 
-  link[rel="stylesheet"][href="chrome://global/content/elements/message-bar.css"] ~ .container .content
-  {
+  link[rel="stylesheet"][href="chrome://global/content/elements/message-bar.css"] ~ .container .content {
     display: flex !important;
     flex-flow: row nowrap;
     justify-content: space-between !important;
@@ -394,6 +392,31 @@
     --message-bar-text-color: var(--text-color) !important;
   }
 
+  @-moz-document url-prefix("about:addons") {
+    .addon-badge {
+      border: 1px solid transparent !important;
+      width: 22px !important;
+      height: 22px !important;
+      border-radius: 11px !important;
+    }
+
+    .addon-badge-private-browsing-allowed {
+      background-color: var(--purple-40) !important;
+      border-color: var(--purple-30) !important;
+      background-position: center !important;
+      background-size: 15px !important;
+    }
+
+    .addon-badge-recommended {
+      background-color: hsl(40, 100%, 43%) !important;
+      border-color: hsl(40, 70%, 70%) !important;
+    }
+
+    .addon-badge-line {
+      background-size: 17px !important;
+    }
+  }
+
   .home-section .section .selector {
     background-color: var(--newtab-element-secondary-color) !important;
     border-color: transparent !important;
@@ -959,8 +982,7 @@
 }
 
 /* firefox screenshots addon overlay */
-@-moz-document regexp("^moz-extension://.*/blank.html.*")
-{
+@-moz-document regexp("^moz-extension://.*/blank.html.*") {
   :root[uc-extension-id="screenshots@mozilla.org"] .all-buttons-container {
     background-color: var(--uc-content-box-background) !important;
     height: 88px !important;
diff --git a/uc-context-menu-icons.css b/uc-context-menu-icons.css
index c2b15aa..cd2e695 100644
--- a/uc-context-menu-icons.css
+++ b/uc-context-menu-icons.css
@@ -148,6 +148,7 @@ menuitem#menu_openAddons .menu-text,
 #menu_pageInfo .menu-text,
 menuitem:is(#sync-setup, #sync-unverifieditem, #sync-reauthitem) .menu-text,
 menuitem:is(#sync-enable, #sync-syncnowitem) .menu-text,
+menuitem#menu_openFirefoxView > .menu-text,
 menu#browserToolsMenu:not(.menu-iconic) > .menu-text,
 menuitem#menu_preferences > .menu-text,
 menuitem#menu_openHelp > .menu-text,
@@ -409,6 +410,7 @@ menuitem#menu_openAddons::before,
 #menu_pageInfo::before,
 menuitem:is(#sync-setup, #sync-unverifieditem, #sync-reauthitem)::before,
 menuitem:is(#sync-enable, #sync-syncnowitem)::before,
+menuitem#menu_openFirefoxView::before,
 menu#browserToolsMenu:not(.menu-iconic)::before,
 menuitem#menu_preferences::before,
 menuitem#menu_openHelp::before,
@@ -888,6 +890,10 @@ menuitem:is(#sync-enable, #sync-syncnowitem)::before {
   background-image: url(chrome://userchrome/content/skin/sync.svg);
 }
 
+menuitem#menu_openFirefoxView::before {
+  background-image: var(--uc-firefox-view-icon);
+}
+
 menu#browserToolsMenu:not(.menu-iconic)::before {
   background-image: url(chrome://userchrome/content/skin/developer.svg);
 }
diff --git a/uc-globals.css b/uc-globals.css
index 6bd6794..399cc1d 100644
--- a/uc-globals.css
+++ b/uc-globals.css
@@ -325,6 +325,7 @@ but other than that these variables should be available everywhere. */
   /* --screenshot-icon: url(chrome://userchrome/content/skin/screenshot.svg); */
   --screenshot-icon: url(chrome://userchrome/content/devtools/command-screenshot.svg);
   --fxa-ui-img: url(chrome://userchrome/content/fxa/avatar-big.svg);
+  --uc-firefox-view-icon: url(chrome://userchrome/content/engines/searchfox.svg);
   --uc-smooth-timing-function: cubic-bezier(0.07, 0.78, 0.21, 0.95);
 
   --download-button-focus-within-bg: var(--button-bgcolor);
diff --git a/uc-navbar.css b/uc-navbar.css
index 5b8d933..6496a42 100644
--- a/uc-navbar.css
+++ b/uc-navbar.css
@@ -118,7 +118,10 @@ toolbarpaletteitem[place="palette"] > toolbarspring {
   filter: none !important;
 }
 
-#tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+#tabbrowser-tabs[hiddensoundplaying]
+  ~ #alltabs-button
+  > .toolbarbutton-badge-stack
+  > .toolbarbutton-badge {
   background: transparent url(chrome://userchrome/content/audioUnmutedButton.svg) center/contain !important;
   box-shadow: none !important;
   color: inherit !important;
@@ -328,16 +331,17 @@ toolbar
   background-color: var(--toolbarbutton-checked-background) !important;
 }
 
-#firefox-view-button:is(:focus-visible, [checked="true"]):not([open], :hover, :active) > .toolbarbutton-icon {
-	background: var(--toolbarbutton-checked-background) !important;
+#firefox-view-button:is(:focus-visible, [checked="true"]):not([open], :hover, :active)
+  > .toolbarbutton-icon {
+  background: var(--toolbarbutton-checked-background) !important;
 }
 
 #firefox-view-button:hover > .toolbarbutton-icon {
-	background: var(--toolbarbutton-hover-background) !important;
+  background: var(--toolbarbutton-hover-background) !important;
 }
 
 #firefox-view-button:is(:hover:active, [open]) > .toolbarbutton-icon {
-	background: var(--toolbarbutton-active-background) !important;
+  background: var(--toolbarbutton-active-background) !important;
 }
 
 toolbar .toolbarbutton-1:not([disabled], [open])[checked]:hover > .toolbarbutton-icon {
@@ -761,8 +765,7 @@ translucent with acrylic effect. enable layout.css.backdrop-filter.enabled */
   flex-shrink: 0.75 !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar {
   border-radius: 0 !important;
   overflow: hidden !important;
   background-color: var(--notification-box-bgcolor) !important;
@@ -803,8 +806,7 @@ link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infob
   transition: margin-top 100ms linear, max-width 100ms ease-in-out, opacity 100ms ease-in-out !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content {
   flex-flow: row nowrap !important;
   flex-grow: 2 !important;
   display: flex !important;
@@ -816,8 +818,7 @@ link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infob
   height: 100% !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-message
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-message {
   padding-block: 6px !important;
   min-height: auto !important;
   text-overflow: ellipsis !important;
@@ -826,14 +827,12 @@ link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infob
   margin-inline: 0 !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar > .spacer
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar > .spacer {
   flex-grow: 0.1 !important;
   display: none !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-button-container
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-button-container {
   flex-flow: row nowrap !important;
   flex-grow: 2 !important;
   display: flex !important;
@@ -844,29 +843,25 @@ link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infob
   gap: 4px !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-button
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-button {
   margin: revert !important;
   outline-offset: 0 !important;
 }
 
 .notificationbox-stack notification :is(button, toolbarbutton),
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button {
   border-radius: var(--in-content-button-border-radius) !important;
   font-weight: inherit !important;
   padding-block: 0 !important;
   outline-offset: 0 !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-button-container > .notification-button.small
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-content .notification-button-container > .notification-button.small {
   margin: 0 !important;
   font-weight: var(--uc-font-weight-bold, 600) !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button .button-text
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button .button-text {
   margin-block: 2px 1px !important;
 }
 
@@ -876,8 +871,7 @@ notification .messageImage {
   margin: 8px 0 8px 6px !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar > .icon
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar > .icon {
   margin-inline-start: 6px !important;
 }
 
@@ -904,15 +898,13 @@ notification .messageCloseButton > .toolbarbutton-icon {
 notification .messageCloseButton,
 notification .messageImage,
 link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-close,
-    link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .icon
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .icon {
   transition: 0.25s transform var(--animation-easing-function),
     0.25s opacity var(--animation-easing-function) !important;
 }
 
 notification .messageCloseButton,
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-close
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar .notification-close {
   width: 20px !important;
   height: 20px !important;
   margin: 0 4px !important;
@@ -925,25 +917,21 @@ link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infob
 }
 
 notification:is(:hover, :focus-within) .messageCloseButton,
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar:is(:hover, :focus-within) .notification-close
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar:is(:hover, :focus-within) .notification-close {
   transform: none !important;
   opacity: 1 !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button.ghost-button:not(.semi-transparent):enabled:is(:hover, :focus-visible)
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button.ghost-button:not(.semi-transparent):enabled:is(:hover, :focus-visible) {
   background-color: var(--in-content-button-background) !important;
 }
 
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button.ghost-button:not(.semi-transparent):enabled:hover:active
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar button.ghost-button:not(.semi-transparent):enabled:hover:active {
   background-color: var(--in-content-button-background-hover) !important;
 }
 
 notification:is(:hover, :focus-within) .messageImage,
-link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar:is(:hover, :focus-within) .icon
-{
+link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infobar:is(:hover, :focus-within) .icon {
   transform: translateX(15px) scale(0.5) !important;
   opacity: 0 !important;
 }
@@ -957,5 +945,11 @@ link[href="chrome://global/content/elements/message-bar.css"] ~ .container.infob
 }
 
 #firefox-view-button {
-	list-style-image: url(chrome://userchrome/content/engines/searchfox.svg) !important;
+  list-style-image: var(--uc-firefox-view-icon) !important;
+}
+
+#firefox-view-button[attention] {
+  background-image: url(chrome://userchrome/content/indicator-tab-attention-purple.svg) !important;
+  background-size: 10px !important;
+  background-position: top 0 right 2px !important;
 }
diff --git a/uc-popups.css b/uc-popups.css
index 310894a..cecbb5f 100644
--- a/uc-popups.css
+++ b/uc-popups.css
@@ -334,8 +334,7 @@ panel[type="autocomplete-richlistbox"]
 }
 
 /* push notification popup (lower right corner) */
-@-moz-document url("chrome://global/content/alerts/alert.xhtml")
-{
+@-moz-document url("chrome://global/content/alerts/alert.xhtml") {
   #alertBox {
     box-shadow: var(--tooltip-box-shadow) !important;
     color: var(--ui-text-100) !important;
@@ -424,8 +423,7 @@ panel[type="autocomplete-richlistbox"]
   }
 }
 
-@-moz-document url("chrome://global/content/pictureinpicture/player.xhtml")
-{
+@-moz-document url("chrome://global/content/pictureinpicture/player.xhtml") {
   :root {
     --panel-bgcolor: var(--in-content-button-highlight-dark) !important;
   }
@@ -500,8 +498,7 @@ panel[type="autocomplete-richlistbox"]
 }
 
 @-moz-document url-prefix("chrome://global/content/timepicker.xhtml"),
-    url-prefix("chrome://global/content/datepicker.xhtml")
-{
+    url-prefix("chrome://global/content/datepicker.xhtml") {
   body {
     background-color: var(--arrowpanel-background) !important;
     color: var(--font-color) !important;
@@ -712,8 +709,7 @@ rtl languages. adjust the border radius accordingly */
     url("chrome://mozapps/content/handling/appChooser.xhtml"),
     url("chrome://global/content/appPicker.xhtml"),
     url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
-    url-prefix("chrome://browser/content/sanitize.xhtml")
-{
+    url-prefix("chrome://browser/content/sanitize.xhtml") {
   /* use this selector to exclude null-window prompts, which open in their own
   windows and don't inherit styles from the chrome window. we don't want to
   apply theme styles to these prompts because no matter what we do, we can't
@@ -741,6 +737,7 @@ rtl languages. adjust the border radius accordingly */
     --in-content-button-background-hover: var(--arrowpanel-dimmed-further) !important;
     --in-content-button-background-active: var(--arrowpanel-dimmed-even-further) !important;
     --in-content-item-selected: var(--purple-40) !important;
+    --in-content-deemphasized-text: var(--uc-panel-description-color) !important;
     --in-content-border-color: var(--dialog-box-border-color) !important;
     --in-content-border-hover: var(--dialog-box-border-hover) !important;
     --in-content-link-color: var(--purple-35) !important;
@@ -815,7 +812,7 @@ rtl languages. adjust the border radius accordingly */
   }
 
   .dialog-button-box > button:not([disabled="true"]):focus-visible {
-    outline: var(--default-focusring, auto) !important;
+    outline: var(--global-focus-outline, var(--default-focusring, auto)) !important;
   }
 
   .dialog-button-box > button:not([disabled="true"]):hover:active,
@@ -1022,8 +1019,7 @@ rtl languages. adjust the border radius accordingly */
 }
 
 @-moz-document url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
-    url("chrome://global/content/appPicker.xhtml")
-{
+    url("chrome://global/content/appPicker.xhtml") {
   :root,
   :root dialog,
   .dialog-button-box {
@@ -1114,8 +1110,7 @@ rtl languages. adjust the border radius accordingly */
     url("chrome://browser/content/places/bookmarkProperties.xhtml"),
     url("chrome://browser/content/places/bookmarkProperties2.xhtml"),
     url-prefix("chrome://browser/content/sanitize.xhtml"),
-    url("chrome://browser/content/spotlight.html")
-{
+    url("chrome://browser/content/spotlight.html") {
   :root[dialogroot],
   :root[dialogroot] dialog,
   :root[dialogroot] richlistbox[id]:not(#categories) > richlistitem[selected],
@@ -1131,6 +1126,7 @@ rtl languages. adjust the border radius accordingly */
     --in-content-button-background-active: var(--arrowpanel-dimmed-even-further) !important;
     --in-content-item-selected: var(--purple-40) !important;
     --in-content-item-hover: var(--arrowpanel-dimmed) !important;
+    --in-content-deemphasized-text: var(--uc-panel-description-color) !important;
     --in-content-border-color: var(--dialog-box-border-color) !important;
     --in-content-border-hover: var(--dialog-box-border-hover) !important;
     --in-content-link-color: var(--purple-35) !important;
@@ -1157,7 +1153,7 @@ rtl languages. adjust the border radius accordingly */
     --in-content-button-vertical-padding: 5px !important;
     --mr-welcome-background-color: var(--in-content-page-background) !important;
   }
-  
+
   .onboardingContainer .screen.light-text {
     --in-content-page-color: var(--ui-text-100) !important;
     --in-content-primary-button-text-color: var(--ui-text-100) !important;
@@ -1465,8 +1461,7 @@ rtl languages. adjust the border radius accordingly */
     text-decoration-color: var(--ui-selection-color) !important;
   }
 
-  @-moz-document url("chrome://mozapps/content/handling/permissionDialog.xhtml")
-  {
+  @-moz-document url("chrome://mozapps/content/handling/permissionDialog.xhtml") {
     :root[dialogroot] dialog > #description,
     :root[dialogroot] dialog > #description-box > #description {
       font-size: 1.15em !important;
@@ -1482,6 +1477,24 @@ rtl languages. adjust the border radius accordingly */
     }
   }
 
+  @-moz-document url("chrome://browser/content/spotlight.html") {
+    .onboardingContainer :is(.primary, .secondary) {
+      line-height: revert !important;
+      min-height: revert !important;
+    }
+
+    .onboardingContainer
+      .screen[pos="split"]
+      .section-main
+      .main-content
+      .action-buttons
+      .secondary-cta
+      .arrow-icon {
+      padding-inline-end: 28px !important;
+      background-position-x: right 10px !important;
+    }
+  }
+
   @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") {
     :root[dialogroot],
     :root[dialogroot] dialog {
@@ -1496,8 +1509,7 @@ rtl languages. adjust the border radius accordingly */
   }
 }
 
-@-moz-document url-prefix("chrome://global/content/print.html")
-{
+@-moz-document url-prefix("chrome://global/content/print.html") {
   :root {
     --in-content-page-background: var(--uc-content-page-background) !important;
     --dropdown-bgcolor: var(--in-content-page-background) !important;
@@ -1557,8 +1569,7 @@ link[href="chrome://global/content/printPagination.css"]
   border-end-end-radius: 4px !important;
 }
 
-@-moz-document url("chrome://browser/content/webrtcLegacyIndicator.xhtml")
-{
+@-moz-document url("chrome://browser/content/webrtcLegacyIndicator.xhtml") {
   button {
     min-width: 28px !important;
   }
@@ -1572,15 +1583,13 @@ link[href="chrome://global/content/printPagination.css"]
   }
 }
 
-@-moz-document url("chrome://browser/content/webrtcIndicator.xul")
-{
+@-moz-document url("chrome://browser/content/webrtcIndicator.xul") {
   :root {
     display: none !important;
   }
 }
 
-@-moz-document url("chrome://browser/content/webrtcIndicator.xhtml")
-{
+@-moz-document url("chrome://browser/content/webrtcIndicator.xhtml") {
   :root {
     --indicator-height: 40px !important;
   }
@@ -1665,8 +1674,7 @@ link[href="chrome://global/content/printPagination.css"]
 }
 
 /* about firefox dialog */
-@-moz-document url("chrome://browser/content/aboutDialog.xhtml")
-{
+@-moz-document url("chrome://browser/content/aboutDialog.xhtml") {
   #leftBox {
     background-image: url(chrome://branding/content/about-logo.svg) !important;
   }
@@ -1769,9 +1777,8 @@ link[href="chrome://global/content/printPagination.css"]
   }
 }
 
-/* page info popup. kinda lame */
-@-moz-document url(chrome://browser/content/pageinfo/pageInfo.xhtml)
-{
+/* page info popup */
+@-moz-document url(chrome://browser/content/pageinfo/pageInfo.xhtml) {
   :root {
     --focus-outline-color: var(--global-focus-outline-color) !important;
   }
@@ -1785,8 +1792,8 @@ link[href="chrome://global/content/printPagination.css"]
   }
 
   #main-window {
-    background-color: var(--arrowpanel-background) !important;
-    color: var(--arrowpanel-color) !important;
+    background-color: var(--uc-arrowpanel-background) !important;
+    color: var(--uc-arrowpanel-color) !important;
   }
 
   #topBar {
@@ -1802,7 +1809,7 @@ link[href="chrome://global/content/printPagination.css"]
   #viewGroup > radio {
     margin: 4px 0 !important;
     padding: 2px !important;
-    color: var(--arrowanel-color) !important;
+    color: var(--uc-arrowanel-color) !important;
     background: none !important;
     fill: currentColor;
     -moz-image-region: initial !important;
@@ -1825,6 +1832,10 @@ link[href="chrome://global/content/printPagination.css"]
     background-color: var(--uc-places-cell-hover-bgcolor) !important;
   }
 
+  #viewGroup > radio[focused="true"] .radio-label-box {
+    outline: var(--global-focus-outline, auto) !important;
+  }
+
   #viewGroup > radio .radio-icon {
     width: 16px !important;
     height: 16px !important;
@@ -1862,8 +1873,8 @@ link[href="chrome://global/content/printPagination.css"]
   treecolpicker,
   button {
     appearance: none !important;
-    background-color: var(--arrowpanel-dimmed) !important;
-    color: var(--arrowpanel-color) !important;
+    background-color: var(--uc-arrowpanel-dimmed) !important;
+    color: var(--uc-arrowpanel-color) !important;
     border-color: var(--button-solid-active-background) !important;
   }
 
@@ -1872,12 +1883,16 @@ link[href="chrome://global/content/printPagination.css"]
   #permList {
     appearance: none !important;
     background: var(--ui-secondary-bg) !important;
-    color: var(--arrowpanel-color) !important;
+    color: var(--uc-arrowpanel-color) !important;
     border-radius: var(--general-button-border-radius) !important;
     overflow: clip !important;
     border: 1px solid var(--button-solid-active-background) !important;
   }
 
+  :is(tree, richlistbox, #permList):focus-visible {
+    outline: var(--global-focus-outline, auto) !important;
+  }
+
   .permission {
     border-bottom: 1px solid var(--button-solid-active-background) !important;
   }
@@ -1896,7 +1911,7 @@ link[href="chrome://global/content/printPagination.css"]
   }
 
   :is(treecol, treecolpicker):where(:hover) {
-    background-color: var(--arrowpanel-dimmed-further) !important;
+    background-color: var(--uc-arrowpanel-dimmed-further) !important;
   }
 
   treechildren {
@@ -1914,7 +1929,7 @@ link[href="chrome://global/content/printPagination.css"]
 
   treechildren::-moz-tree-row(selected) {
     background-color: var(--uc-places-cell-hover-bgcolor) !important;
-    color: var(--arrowpanel-color) !important;
+    color: var(--uc-arrowpanel-color) !important;
   }
 
   treechildren::-moz-tree-row(selected),
@@ -1924,7 +1939,7 @@ link[href="chrome://global/content/printPagination.css"]
   }
 
   treechildren::-moz-tree-cell-text {
-    color: var(--arrowpanel-color) !important;
+    color: var(--uc-arrowpanel-color) !important;
   }
 
   button {
@@ -2014,8 +2029,8 @@ link[href="chrome://global/content/printPagination.css"]
 
   #imagecontainerbox {
     background: var(--transparent-img-background-context) !important;
-    background-color: var(--arrowpanel-faint) !important;
-    fill: var(--arrowpanel-dimmed);
+    background-color: var(--uc-arrowpanel-faint) !important;
+    fill: var(--uc-arrowpanel-dimmed);
     fill-opacity: 0.5;
     border: 1px solid var(--button-solid-active-background) !important;
     border-radius: var(--general-button-border-radius);
diff --git a/uc-variables.css b/uc-variables.css
index 27dc16e..fba7891 100644
--- a/uc-variables.css
+++ b/uc-variables.css
@@ -40,6 +40,7 @@ menupopup {
   --lwt-toolbarbutton-icon-fill-attention: var(--attention-color) !important;
   --lwt-toolbar-field-icon-fill-attention: var(--attention-color) !important;
   --lwt-tab-attention-icon-color: var(--attention-color) !important;
+  --tab-attention-icon-color: var(--lwt-tab-attention-icon-color) !important;
   --lwt-background-alignment: right top !important;
   --lwt-background-tiling: no-repeat !important;
   --lwt-brighttext-url-color: var(--pink-action) !important;