diff --git a/README.md b/README.md index 619dc11..2a6c297 100644 --- 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 index 022cb76..a2e679e 100644 --- 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 index 12fc08f..b9d8f51 100644 --- 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 index 40f8e02..ba38067 100644 --- 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 */