diff options
Diffstat (limited to 'browser/themes/shared/addons')
5 files changed, 383 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..029061a7cb --- /dev/null +++ b/browser/themes/shared/addons/unified-extensions.css @@ -0,0 +1,240 @@ +/* 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)); +} + +#unified-extensions-view { + width: var(--menu-panel-width-wide); +} + +/* Align extensions rendered with custom elements. */ +unified-extensions-item { + display: flex; + align-items: center; +} + +unified-extensions-item > .subviewbutton { + flex-shrink: 1; +} + +#unified-extensions-panel .unified-extensions-item { + -moz-context-properties: fill; + fill: currentColor; + /* Have some spacing between items in the panel; mainly useful for when HCM is enabled. */ + margin-block: 2px !important; /* override panelUI-shared.css */ +} + +.unified-extensions-item > .subviewbutton { + margin: 0; +} + +/* 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. */ +.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .toolbarbutton-badge-stack, +.unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton { + 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, +.unified-extensions-item[attention] > .unified-extensions-item-action-button.toolbarbutton-1 > .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-item[attention] > .unified-extensions-item-action-button.subviewbutton { + 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-item[attention] > .unified-extensions-item-action-button.subviewbutton:-moz-locale-dir(rtl) { + background-position-x: right var(--uei-dot-horizontal-position-in-panel); +} + +.unified-extensions-item-action-button { + flex: 1; + overflow: hidden; +} + +/* 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-icon, +.unified-extensions-item .webextension-browser-action.subviewbutton > .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, +.unified-extensions-item .webextension-browser-action.subviewbutton > .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; + word-break: break-word; +} + +.unified-extensions-item-message { + color: var(--text-color-deemphasized); +} + +.unified-extensions-item-menu-button.subviewbutton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); + /* subtract the child's ~1px border from the block padding */ + padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) + var(--arrowpanel-menuitem-margin-inline); + padding-inline-end: 0; + border-radius: 0; + /* override panelUI-shared.css */ + background-color: transparent !important; + box-shadow: none !important; + outline: none !important; +} + +/* Hide subview label. */ +.unified-extensions-item .toolbarbutton-text { + display: none !important; /* override panelUI-shared.css */ +} + +.unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon { + box-sizing: content-box; + padding: var(--arrowpanel-menuitem-padding-inline); + border: 1px solid transparent; + border-radius: var(--arrowpanel-menuitem-border-radius); +} + +/* Background color, outline, and shadow on the icon to allow the clickable + * padding on the button to remain invisible */ +.unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon { + background-color: var(--uei-button-hover-bgcolor); +} + +.unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon { + background-color: var(--uei-button-active-bgcolor); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +/* --- warning messages --- */ + +#unified-extensions-messages-container { + margin: var(--arrowpanel-menuitem-margin); +} + +.unified-extensions-message-bar { + padding-bottom: 2px; +} + +/* Stack each child in the message bar. */ +.unified-extensions-message-bar > * { + display: inline-block; + padding-block: 1px; +} + +/* Hide the menu button and the unified extensions content when the extension + * item is placed on the toolbar. */ +.unified-extensions-item-menu-button.toolbarbutton-1, +.unified-extensions-item-action-button.toolbarbutton-1 > .unified-extensions-item-contents { + display: none; +} + +/* --- browser action CUI widget styles in the extensions panel --- */ + +@media (prefers-contrast) { + :root:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonText; + } + + .unified-extensions-item-action-button.subviewbutton:not([disabled], :-moz-lwtheme), + .unified-extensions-item-menu-button.subviewbutton > .toolbarbutton-icon:not(:-moz-lwtheme) { + 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-item-action-button[disabled].subviewbutton:not(:-moz-lwtheme) { + background-color: Canvas; + color: GrayText !important; /* override panelUI-shared.css */ + opacity: 1 !important; /* override panelUI-shared.css */ + } + + .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonFace; + } + + .unified-extensions-item[attention] > .unified-extensions-item-action-button.subviewbutton:hover:active:not(:-moz-lwtheme) { + --uei-button-attention-dot-color: ButtonText; + } + + .unified-extensions-item-message:not(:-moz-lwtheme) { + color: inherit; + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:not([disabled], :-moz-lwtheme), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover > .toolbarbutton-icon:not(:-moz-lwtheme) { + background-color: var(--uei-button-hover-bgcolor); + color: var(--uei-button-hover-color); + border-color: var(--uei-button-hover-bgcolor); + } + + .unified-extensions-item > .unified-extensions-item-action-button.subviewbutton:hover:active:not([disabled], :-moz-lwtheme), + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:hover:active > .toolbarbutton-icon:not(:-moz-lwtheme) { + background-color: var(--uei-button-active-bgcolor); + color: var(--uei-button-active-color); + border-color: var(--uei-button-active-color); + } + + .unified-extensions-item > .unified-extensions-item-menu-button.subviewbutton:focus-visible > .toolbarbutton-icon:not(:-moz-lwtheme) { + /* The border would otherwise overlap with the focus outline, causing an + * unsightly anti-aliasing artifact */ + border-color: transparent; + } +} |
