(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.
aminomancer · Sep 4, 2022 · a49f898 · a49f898
1 parent 6264915
commit a49f898
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 99 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }