Update unified extensions menu styling #131

Updates the extensions menu styling by: * Reducing labels to one line, adding ellipsis (…) if necessary. * Slightly smaller extensions icons (32px to 24px). * Adding greyscale filter to icons with no access to current site. * Adds new tweak to use a style that is closer to Edge, without permiss -ion labels, and with smaller icons.
bmFtZQ · Feb 4, 2024 · 9977abb · 9977abb
1 parent d5f24b5
commit 9977abb
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -170,6 +170,14 @@ the Firefox account menu can still be accessed from the Firefox account button.
 
 ---
 
+### Compact Extensions Menu
+Makes the unified extensions menu more compact, and closer to the design seen in
+Edge. This hides the permissions indicator label and makes the icons smaller.
+
+`uc.tweak.context-menu.compact-extensions-menu`
+
+---
+
 ## Acknowledgements
 [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox)
 

diff --git a/chrome/global/colors.css b/chrome/global/colors.css
@@ -58,7 +58,7 @@
   --arrowpanel-dimmed-further: light-dark(#707070, #707070) !important;
   --panel-separator-color: light-dark(#dadada, #636363) !important;
   --panel-description-color: light-dark(#000a, #fffb) !important;
-  --panel-disabled-color: light-dark(#9E9E9E, #ABABAA) !important;
+  --panel-disabled-color: light-dark(#9E9E9E, #B9B9B9) !important;
   --panel-item-hover-bgcolor: light-dark(#eee, #646464) !important;
   --panel-item-active-bgcolor: light-dark(#ddd, #747474) !important;
   --panel-banner-item-update-supported-bgcolor: light-dark(#188038, #81C995) !important;

diff --git a/chrome/global/popup.css b/chrome/global/popup.css
@@ -310,6 +310,88 @@
   fill-opacity: 1 !important;
 }
 
+/* ::::: Extensions Pop-up ::::: */
+/* #region */
+
+.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
+  opacity: 1 !important;
+  color: var(--panel-disabled-color) !important;
+}
+
+/* Removes space above extensions items. */
+#unified-extensions-messages-container {
+  margin-block: 0 !important;
+}
+
+:root {
+  --uei-icon-size: 24px !important;
+}
+
+@media (-moz-bool-pref: "uc.tweak.context-menu.compact-extensions-menu") {
+  :root {
+    --uei-icon-size: 16px !important;
+  }
+
+  /* Hide site access permissions label. */
+  .unified-extensions-item-message-deck {
+    display: none !important;
+  }
+
+  /* Use smaller toolbar extension icon if available. */
+  toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action {
+    list-style-image: var(--webextension-toolbar-image, var(--webextension-menupanel-image, inherit)) !important;
+  }
+}
+
+/* Use smaller font-size in extensions menu on Windows. */
+@media (-moz-platform: windows) {
+  #unified-extensions-panel .toolbarbutton-text {
+    font: menu !important;
+  }
+}
+
+/* Prevent extension labels from using >1 line, adding ellipsis if necessary. */
+.unified-extensions-item-contents {
+  flex: 1 !important;
+
+  & > .unified-extensions-item-name,
+  & > .unified-extensions-item-message-deck > .unified-extensions-item-message {
+    max-width: calc(100% - 4px) !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+}
+
+/* Extension item menu button. */
+.unified-extensions-item-menu-button {
+  padding: 0 !important;
+
+  & > .toolbarbutton-icon {
+    border: none !important;
+    padding-inline: var(--arrowpanel-menuitem-padding-inline) !important;
+    padding-block: var(--arrowpanel-menuitem-padding-block) !important;
+    margin-inline-start: var(--uc-arrowpanel-menuitem-margin-inline) !important;
+  }
+}
+
+/* Add grayscale filter to extensions with no access to current site. */
+.unified-extensions-list .unified-extensions-item-action-button:has(.unified-extensions-item-message[data-l10n-id="origin-controls-state-no-access"]) .unified-extensions-item-icon {
+  filter: grayscale(1) !important;
+}
+
+/* Adjust spacing between the extension item's icon and label. */
+.unified-extensions-item-name,
+.unified-extensions-item-message {
+  padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
+}
+
+.unified-extensions-item-icon,
+.unified-extensions-item .webextension-browser-action > .toolbarbutton-badge-stack {
+  margin-inline-end: 0 !important;
+}
+/* #endregion */
+
 /* auto complete popup */
 #PopupAutoComplete {
   /* workaround for inaccessible shadow-root element

diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
@@ -113,9 +113,9 @@
 
 #appMenu-passwords-button,
 #password-notification-icon,
-#PopupAutoComplete>richlistbox>richlistitem[originaltype="generatedPassword"]>.two-line-wrapper>.ac-site-icon,
-#PopupAutoComplete>richlistbox>richlistitem[originaltype="loginWithOrigin"]>.two-line-wrapper>.ac-site-icon,
-#PopupAutoComplete>richlistbox>richlistitem[originaltype="login"]>.ac-site-icon {
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
   list-style-image: url("passwords.svg") !important;
 }
 
@@ -124,7 +124,8 @@
 }
 
 #PanelUI-menu-button,
-#appMenu-more-button2 {
+#appMenu-more-button2,
+.unified-extensions-item-menu-button {
   list-style-image: url("menu.svg") !important;
 }
 
@@ -141,18 +142,18 @@
 }
 
 #sync-button,
-.urlbarView-row[source="tabs"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon,
+.urlbarView-row[source="tabs"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
 #urlbar-engine-one-off-item-tabs {
   list-style-image: url("tab.svg") !important;
 }
 
 #history-panelmenu,
-.urlbarView-row[source="history"]>.urlbarView-row-inner>.urlbarView-no-wrap>.urlbarView-favicon,
+.urlbarView-row[source="history"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
 #urlbar-engine-one-off-item-history,
 #appMenu-history-button,
 #appMenu-library-history-button,
 #sidebar-switcher-history,
-#sidebar-box[sidebarcommand="viewHistorySidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon {
+#sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
   list-style-image: url("history.svg") !important;
 }
 
@@ -186,7 +187,8 @@
 
 #add-ons-button,
 #appMenu-extensions-themes-button,
-#unified-extensions-button {
+#unified-extensions-button,
+#unified-extensions-manage-extensions {
   list-style-image: url("extension.svg") !important;
 }
 
@@ -223,7 +225,7 @@
 }
 
 #preferences-button,
-.search-setting-button>.button-box>.button-icon,
+.search-setting-button > .button-box > .button-icon,
 #appMenu-settings-button,
 .unified-extensions-item-open-menu.subviewbutton {
   list-style-image: url("settings.svg") !important;
@@ -245,7 +247,7 @@
   list-style-image: url("pocket-outline.svg") !important;
 }
 
-#profiler-button-button>.toolbarbutton-icon,
+#profiler-button-button > .toolbarbutton-icon,
 .subviewbutton[label="Task Manager"] {
   list-style-image: url("tool-profiler.svg") !important;
 }
@@ -275,7 +277,7 @@
 #appMenu-bookmarks-button,
 #sidebar-switcher-bookmarks,
 #appMenu-library-bookmarks-button,
-#sidebar-box[sidebarcommand="viewBookmarksSidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon {
+#sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon {
   list-style-image: url("bookmark-star-on-tray.svg") !important;
 }
 
@@ -300,11 +302,11 @@
   list-style-image: url("page-portrait.svg") !important;
 }
 
-#urlbar:not(.searchButton)>#urlbar-input-container>#identity-box[pageproxystate="invalid"] #identity-icon {
+#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] #identity-icon {
   list-style-image: url("search-glass.svg") !important;
 }
 
-#urlbar[actiontype="extension"]>#urlbar-input-container>#identity-box #identity-icon,
+#urlbar[actiontype="extension"] > #urlbar-input-container > #identity-box #identity-icon,
 #identity-box[pageproxystate="valid"].extensionPage #identity-icon {
   list-style-image: url("extension.svg") !important;
 }
@@ -314,7 +316,7 @@
   list-style-image: url("security.svg") !important;
 }
 
-#urlbar-input-container[pageproxystate="valid"]>#tracking-protection-icon-container>#tracking-protection-icon-box>#tracking-protection-icon {
+#urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container > #tracking-protection-icon-box > #tracking-protection-icon {
   list-style-image: url("tracking-protection.svg") !important;
 }
 
@@ -383,7 +385,7 @@
   list-style-image: url("arrow-right.svg") !important;
 }
 
-.panel-header>.subviewbutton-back {
+.panel-header > .subviewbutton-back {
   list-style-image: url("arrow-left.svg") !important;
 }
 
@@ -406,7 +408,7 @@
   list-style-image: url("bookmark.svg") !important;
 }
 
-#sidebar-box[sidebarcommand="viewTabsSidebar"]>#sidebar-header>#sidebar-switcher-target>#sidebar-icon,
+#sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon,
 #sidebar-switcher-tabs {
   list-style-image: url("send-to-device.svg") !important;
 }
@@ -547,27 +549,23 @@
 }
 
 /* reload/stop animation */
-#stop-reload-button[animate]>#reload-button[displaystop]+#stop-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image {
+#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: url("reload-to-stop.svg") !important;
 }
 
-#stop-reload-button[animate]>#reload-button>.toolbarbutton-animatable-box>.toolbarbutton-animatable-image {
+#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   background-image: url("stop-to-reload.svg") !important;
 }
 
-#reader-mode-button>.urlbar-icon {
+#reader-mode-button > .urlbar-icon {
   list-style-image: url("reader-mode.svg") !important;
 }
 
-#unified-extensions-manage-extensions {
-  list-style-image: url("manage.svg") !important;
-}
-
 /* disable context menu icons when this tweak is applied */
 @media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
 
   /* Context Menu Icons */
-  menupopup>menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon {
+  menupopup > menuitem:is([checked="true"], [selected="true"]) .menu-iconic-icon {
     list-style-image: url("checkmark.svg") !important;
 
     @media (-moz-platform: linux) {
@@ -583,8 +581,8 @@
     list-style-image: url("media-loop.svg") !important;
   }
 
-  :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
-  :not(:not(menubar)>menu, #ContentSelectDropdown)>menupopup>menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) {
+  :not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
+  :not(:not(menubar) > menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current) {
     background-image: var(--menu-image) !important;
     background-size: 16px !important;
     background-position: var(--uc-contextmenu-menuitem-padding-inline) center !important;
@@ -616,7 +614,7 @@
 
     #contentAreaContextMenu #context-bookmarkpage[starred] {
       --menu-image: url("bookmark.svg");
-      fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
+      fill: var(--toolbarbutton-icon-fill-attention, currentColor) !important;
     }
   }
 
@@ -722,7 +720,7 @@
   }
 
   #context-viewvideo {
-    --menu-image: url("video-open.svg")
+    --menu-image: url("video-open.svg");
   }
 
   #context-saveaudio {
@@ -868,7 +866,7 @@
   #toolbar-context-bookmarkSelectedTabs {
     --menu-image: url("bookmark-hollow.svg");
   }
-  
+
   #sidebar-switcher-bookmarks {
     --menu-image: url("bookmark-star-on-tray.svg");
   }
@@ -924,49 +922,51 @@
   }
 }
 
-/* header icons for the app menu sub menus (eg. fx account, history...) */
-.panel-header>h1>span::before {
-  content: "";
-  background: var(--header-image, none) center / 16px no-repeat;
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  padding-inline-start: calc(var(--uc-enabled, 0) * 16px);
-  margin-inline-end: calc(var(--uc-enabled, 0) * 8px);
-}
+/* Header icons for the app menu sub menus (eg. fx account, history...) */
+.panel-header > h1 > span {
+  &::before {
+    content: "";
+    background: var(--header-image, none) center / 16px no-repeat;
+    -moz-context-properties: fill, fill-opacity;
+    fill: currentColor;
+    padding-inline-start: calc(var(--uc-enabled, 0) * 16px);
+    margin-inline-end: calc(var(--uc-enabled, 0) * 8px);
+  }
 
-#PanelUI-fxa .panel-header>h1>span::before {
-  --header-image: var(--avatar-image-url);
-  --uc-enabled: 1;
-  transform: scale(1.25);
-  border-radius: 99px;
-  display: inline-block;
-  height: 16px;
-  vertical-align: text-bottom;
-}
+  #PanelUI-fxa &::before {
+    --header-image: var(--avatar-image-url);
+    --uc-enabled: 1;
+    transform: scale(1.25);
+    border-radius: 99px;
+    display: inline-block;
+    height: 16px;
+    vertical-align: text-bottom;
+  }
 
-#PanelUI-bookmarks .panel-header>h1>span::before {
-  --header-image: url("bookmark-star-on-tray.svg");
-  --uc-enabled: 1;
-}
+  #PanelUI-bookmarks &::before {
+    --header-image: url("bookmark-star-on-tray.svg");
+    --uc-enabled: 1;
+  }
 
-#PanelUI-history .panel-header>h1>span::before {
-  --header-image: url("history.svg");
-  --uc-enabled: 1;
-}
+  #PanelUI-history &::before {
+    --header-image: url("history.svg");
+    --uc-enabled: 1;
+  }
 
-#PanelUI-helpView .panel-header>h1>span::before {
-  --header-image: url("help.svg");
-  --uc-enabled: 1;
-}
+  #PanelUI-helpView &::before {
+    --header-image: url("help.svg");
+    --uc-enabled: 1;
+  }
 
-#appMenu-libraryView .panel-header>h1>span::before {
-  --header-image: url("library.svg");
-  --uc-enabled: 1;
-}
+  #appMenu-libraryView &::before {
+    --header-image: url("library.svg");
+    --uc-enabled: 1;
+  }
 
-#unified-extensions-panel .panel-header>h1>span::before {
-  --header-image: url("extension.svg");
-  --uc-enabled: 1;
+  #unified-extensions-panel &::before {
+    --header-image: url("extension.svg");
+    --uc-enabled: 1;
+  }
 }
 
 /* Tree items used for side bar and library windows */