diff options
Diffstat (limited to 'browser/themes/shared/addons')
5 files changed, 398 insertions, 0 deletions
diff --git a/browser/themes/shared/addons/addon-install-blocked.svg b/browser/themes/shared/addons/addon-install-blocked.svg new file mode 100644 index 0000000000..b2f739a868 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-blocked.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #e62117; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#999999" stop-opacity="1"/> + <stop offset="100%" stop-color="#8c8c8c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <rect class="style-badge-icon" x="9" y="13" width="14" height="4" rx="1" ry="1" /> + </svg> +</svg> diff --git a/browser/themes/shared/addons/addon-install-downloading.svg b/browser/themes/shared/addons/addon-install-downloading.svg new file mode 100644 index 0000000000..2b8ba7cb86 --- /dev/null +++ b/browser/themes/shared/addons/addon-install-downloading.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #55cc3d; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/> + <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <path class="style-badge-icon" d="M22.7,16.1l-5.6,5.5C16.8,21.9,16.4,22,16,22c-0.4,0-0.7-0.1-1-0.4 l-5.6-5.5C8.8,15.5,8.9,15,9.8,15l3.2,0V9c0-0.6,0.5-1,1.1-1h4c0.6,0,1,0.4,1,1v6h3.2C23.1,15,23.3,15.5,22.7,16.1z"/> + </svg> +</svg> diff --git a/browser/themes/shared/addons/addon-install-installed.svg b/browser/themes/shared/addons/addon-install-installed.svg new file mode 100644 index 0000000000..86ebe4975d --- /dev/null +++ b/browser/themes/shared/addons/addon-install-installed.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> + <defs> + <style> + .style-puzzle-piece { + fill: url('#gradient-linear-puzzle-piece'); + } + .style-badge-shadow { + fill: #0d131a; + fill-opacity: .15; + } + .style-badge-background { + fill: #fff; + } + .style-badge-inside { + fill: #55cc3d; + } + .style-badge-icon { + fill: #fff; + } + </style> + <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/> + <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/> + </linearGradient> + </defs> + <path class="style-puzzle-piece" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/> + <svg width="32" height="32" x="32" y="0"> + <ellipse class="style-badge-shadow" rx="14" ry="15" cx="16" cy="17" /> + <circle class="style-badge-background" r="15" cy="15" cx="16" /> + <circle class="style-badge-inside" r="12" cy="15" cx="16" /> + <path class="style-badge-icon" d="M22.8,12.3c0,0-6.7,8.1-6.9,8.3c-0.4,0.5-1.5,0.3-1.7,0 c-0.2-0.3-5-5.8-5-5.8c-0.3-0.3-0.3-0.7,0-1l1-1c0.4-0.4,0.9,0,1.2,0.3c0.3,0.4,3.4,3.8,3.4,3.8s5.2-6.1,5.4-6.4 c0.5-0.8,1.6-0.8,1.9-0.5l0.7,0.6C23.1,11.1,23.1,12,22.8,12.3z" /> + </svg> +</svg> diff --git a/browser/themes/shared/addons/extension-controlled.css b/browser/themes/shared/addons/extension-controlled.css new file mode 100644 index 0000000000..69d78373fc --- /dev/null +++ b/browser/themes/shared/addons/extension-controlled.css @@ -0,0 +1,32 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body { + width: 30em; +} + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > hbox > vbox > .popup-notification-description { + font-weight: 600; +} + +.extension-controlled-notification { + margin-bottom: 0; +} + +.extension-controlled-notification popupnotificationcontent > description > .extension-controlled-icon { + height: 16px; + width: 16px; + vertical-align: bottom; +} + +.extension-controlled-icon.alltabs-icon { + background: url("chrome://global/skin/icons/arrow-down.svg"); + /* This icon has a lot of extra space to the sides, reduce that a little. */ + margin: 0 -1px 1px; +} + +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning, +.extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon { + display: none; +} diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css new file mode 100644 index 0000000000..3356695e1e --- /dev/null +++ b/browser/themes/shared/addons/unified-extensions.css @@ -0,0 +1,255 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +:root { + /* uei = unified extensions item */ + --uei-icon-size: 32px; + --uei-attention-dot-size: 8px; + --uei-button-hover-bgcolor: var(--panel-item-hover-bgcolor); + --uei-button-hover-color: inherit; + --uei-button-active-bgcolor: var(--panel-item-active-bgcolor); + --uei-button-active-color: inherit; + --uei-button-attention-dot-color: var(--tab-attention-icon-color); +} + +:root[uidensity="compact"] { + --uei-icon-size: 24px; +} + +#unified-extensions-panel { + --uei-dot-horizontal-position-in-panel: calc(var(--uei-icon-size) / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); + --uei-dot-vertical-position-in-panel: max(0px, calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2)); +} + +/* Align extensions rendered with custom elements. */ +unified-extensions-item { + display: flex; + align-items: center; +} + +#unified-extensions-panel .unified-extensions-item { + /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */ + padding-block: 2px; +} + +/* The "attention UI" for the unified extensions is based on: + * https://searchfox.org/mozilla-central/rev/560b7b1b17/browser/themes/shared/tabs.css#624 */ + +/* On the main unified extensions button, we draw the attention on the icon element. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +/* For extension widgets placed in a toolbar, we use the stack element (containing the icon) + * of the action button to draw the attention dot. + * Otherwise (in the extensions panel), we use the action button itself. */ +toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack, +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button, +.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-image: radial-gradient(circle, var(--uei-button-attention-dot-color), var(--uei-button-attention-dot-color) 2px, transparent 2px); + background-size: var(--uei-attention-dot-size) var(--uei-attention-dot-size); + background-repeat: no-repeat; +} + +/* Adjust attention dots position in the toolbar. */ +#unified-extensions-button[attention] > .toolbarbutton-icon, +toolbar .unified-extensions-item[attention] > .unified-extensions-item-action-button > .toolbarbutton-badge-stack { + background-position: center bottom calc(var(--toolbarbutton-inner-padding) / 2 - var(--uei-attention-dot-size) / 2); +} + +/* Adjust attention dots position in the unified extensions panel. */ +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button { + background-position: left var(--uei-dot-horizontal-position-in-panel) bottom var(--uei-dot-vertical-position-in-panel); +} + +/* Adjust attention dots position in the unified extensions panel for RTL. */ +#unified-extensions-panel .unified-extensions-item[attention] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) { + background-position-x: right var(--uei-dot-horizontal-position-in-panel); +} + +/* Adjust attention dots position in the overflow panel. */ +.widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-position-x: left calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); + background-position-y: bottom calc(var(--arrowpanel-menuitem-padding-block) / 2 - var(--uei-attention-dot-size) / 2); +} + +:root[uidensity="compact"] .widget-overflow-list .unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button { + background-position-y: bottom -2px; +} + +/* Adjust attention dots position in the overflow panel for RTL. */ +.widget-overflow-list toolbaritem.unified-extensions-item[attention][unified-extensions="false"] > .unified-extensions-item-action-button:-moz-locale-dir(rtl) { + background-position-x: right calc(16px / 2 + var(--arrowpanel-menuitem-padding-inline) - var(--uei-attention-dot-size) / 2); +} + +.unified-extensions-item-action-button { + overflow: hidden; + background-color: transparent; +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * extension icon being 32px in this case, makes the item look crowded even for + * compact mode. */ +:root[uidensity="compact"] panel:not([touchmode]) .unified-extensions-item-action-button { + padding-block: 4px; +} + +.unified-extensions-item-action-button[disabled].subviewbutton { + color: var(--panel-description-color); +} + +.unified-extensions-item-action-button[disabled] .unified-extensions-item-icon { + opacity: 0.5; +} + +.unified-extensions-item-icon, +/* When the unified extensions pref is enabled, we also want to increase the + * size of the icons in the extension CUI widgets. */ +panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--uei-icon-size); + width: var(--uei-icon-size); +} + +/* The first selector is for the custom elements icon, which appears only in the UEP. */ +.unified-extensions-item-icon, +panel .unified-extensions-item[unified-extensions="true"] .webextension-browser-action > .toolbarbutton-badge-stack { + margin-inline-end: 6px; +} + +.unified-extensions-item-icon, +.unified-extensions-item-contents { + pointer-events: none; +} + +.unified-extensions-item-name, +.unified-extensions-item-message { + margin: 0; + padding-inline-start: .5em; + width: 22em; + word-break: break-word; +} + +.unified-extensions-item-message { + color: var(--panel-description-color); +} + +.unified-extensions-item-menu-button.subviewbutton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + margin: 0; + margin-inline-end: var(--arrowpanel-menuitem-margin-inline); + /* Have the icon even padding all around by default */ + padding: var(--arrowpanel-menuitem-padding-inline); + border: 1px solid transparent; + background-color: transparent; +} + +.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-text { + display: none; +} + +/* --- browser action CUI widget styles --- */ + +/* Hide secondary (menu) button when the widget is in the list of widgets in + * customization mode. */ +toolbaritem.unified-extensions-item:not([cui-areatype="panel"], [overflowedItem=true]) .unified-extensions-item-menu-button { + display: none; +} + +/* Hide subviewbutton label by default, it should only be shown in the old + * overflow panel and the palette. */ +toolbaritem.unified-extensions-item[cui-areatype="toolbar"] .toolbarbutton-text, +#unified-extensions-area > toolbaritem.unified-extensions-item .toolbarbutton-text { + display: none; +} + +/* Hide unified extensions content by default, unless the item is overflowed or in + * a panel. Also hide this content if the item is visible in customize mode. */ +toolbaritem.unified-extensions-item:not([overflowedItem="true"], [cui-areatype="panel"]) .unified-extensions-item-contents, +toolbarpaletteitem > toolbaritem.unified-extensions-item .unified-extensions-item-contents { + display: none; +} + +toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton { + -moz-box-flex: 0; + margin-inline-start: var(--arrowpanel-menuitem-margin-inline); + padding: var(--arrowpanel-menuitem-padding); + border: 1px solid transparent; +} + +/* When the unified extensions pref is set, we want to always have a "large" + * menu button, even on compact mode since each extension has two lines of text + * anyway (extension name and message). */ +toolbaritem.unified-extensions-item[unified-extensions="true"] .unified-extensions-item-menu-button.subviewbutton { + padding: 8px; +} + +/* --- browser action CUI widget styles in the overflow/unified extensions panel --- */ + +/* Align CUI widgets with the custom elements in the unified extensions panel. */ +#unified-extensions-panel toolbaritem.unified-extensions-item { + max-width: max-content; +} + +/* Show CUI widget label in overflow panel when the unified extensions pref is + * not set. */ +.widget-overflow-list toolbaritem.unified-extensions-item[unified-extensions="false"] .unified-extensions-item-action-button .toolbarbutton-text { + text-align: start; + display: block; +} + +@media (prefers-contrast) { + :root { + --uei-button-attention-dot-color: ButtonText; + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ) { + border-color: currentColor; + background-color: ButtonFace; + color: ButtonText; + --uei-button-hover-bgcolor: SelectedItem; + --uei-button-hover-color: SelectedItemText; + --uei-button-active-bgcolor: ButtonFace; + --uei-button-active-color: ButtonText; + } + + #unified-extensions-panel .unified-extensions-item-action-button[disabled].subviewbutton { + background-color: Canvas; + color: GrayText; + } + + .unified-extensions-item-action-button[disabled] .unified-extensions-item-message { + color: GrayText; + } + + .unified-extensions-item-action-button:not([disabled]) .unified-extensions-item-message { + color: ButtonText; + } + + .unified-extensions-item-action-button:not([disabled]):hover .unified-extensions-item-message { + color: inherit; + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ):hover:not(:active) { + background-color: var(--uei-button-hover-bgcolor); + color: var(--uei-button-hover-color); + border-color: var(--uei-button-hover-bgcolor); + } + + #unified-extensions-panel :is( + .unified-extensions-item-action-button:not([disabled]).subviewbutton, + .unified-extensions-item-menu-button.subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-action-button:not([disabled]).subviewbutton, + toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton + ):hover:active { + background-color: var(--uei-button-active-bgcolor); + color: var(--uei-button-active-color); + } +} |
