From 607f21442a2e36055d84a4a6b1bc45a87b0ea0d9 Mon Sep 17 00:00:00 2001 From: Mike Conley Date: Wed, 21 Apr 2021 20:24:46 +0000 Subject: [PATCH] Bug 1704461 - Use new icons for update and warning badges for the AppMenu button. r=mhowell Differential Revision: https://phabricator.services.mozilla.com/D113003 --- .../shared/customizableui/panelUI.inc.css | 49 ++++++++----------- browser/themes/shared/jar.inc.mn | 1 + .../themes/shared/toolbarbutton-icons.inc.css | 3 +- browser/themes/shared/update-badge.svg | 4 +- .../themes/shared/update-circle-fill-12.svg | 7 +++ .../themes/shared/icons/warning-fill-12.svg | 7 +++ toolkit/themes/shared/jar.inc.mn | 1 + 7 files changed, 40 insertions(+), 32 deletions(-) create mode 100644 browser/themes/shared/update-circle-fill-12.svg create mode 100644 toolkit/themes/shared/icons/warning-fill-12.svg diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css index 07e4934f129b..9c4e0acef5e7 100644 --- a/browser/themes/shared/customizableui/panelUI.inc.css +++ b/browser/themes/shared/customizableui/panelUI.inc.css @@ -51,6 +51,8 @@ --panel-banner-item-background-color: hsla(96,65%,75%,.5); --panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8); --panel-banner-item-active-bgcolor: hsl(96,65%,75%); + --panel-banner-item-update-supported-bgcolor: #74BF43; + --panel-banner-item-warning-icon-bgcolor: #FFBF00; } :root[lwt-popup-brighttext] { @@ -117,7 +119,6 @@ #PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - border-radius: 50%; box-shadow: none; /* "!important" is necessary to override the rule in toolbarbutton.css */ margin: -7px 0 0 !important; @@ -125,7 +126,8 @@ min-width: 12px; min-height: 12px; -moz-context-properties: fill; - fill: var(--toolbar-bgcolor); + background: url(chrome://browser/skin/update-circle-fill-12.svg) no-repeat center; + background-size: 12px; } #PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, @@ -133,13 +135,12 @@ #PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: var(--panel-banner-item-update-supported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center; - background-size: 10px; + fill: var(--panel-banner-item-update-supported-bgcolor); } #PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: var(--panel-banner-item-warning-icon-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center; - background-size: 10px; + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--panel-banner-item-warning-icon-bgcolor); } @media (-moz-proton) { @@ -148,14 +149,11 @@ .panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon, .panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon, .panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon { - background-color: var(--panel-banner-item-update-supported-bgcolor); background-image: url(chrome://browser/skin/update-badge.svg); background-repeat: no-repeat; background-position: center; - background-size: 10px; - border-radius: 50%; -moz-context-properties: fill; - fill: var(--arrowpanel-background); + fill: var(--panel-banner-item-update-supported-bgcolor); } .panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon { @@ -167,28 +165,24 @@ } @media not (-moz-proton) { +#PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background-image: url(chrome://browser/skin/update-circle-fill-12.svg); +} + .panel-banner-item[notificationid="update-available"]::after, .panel-banner-item[notificationid="update-downloading"]::after, .panel-banner-item[notificationid="update-manual"]::after, .panel-banner-item[notificationid="update-other-instance"]::after, -.panel-banner-item[notificationid="update-restart"]::after { - background-color: var(--panel-banner-item-update-supported-bgcolor); - background-image: url(chrome://browser/skin/update-badge.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 10px; - border-radius: 50%; - -moz-context-properties: fill; - fill: #fff; -} - +.panel-banner-item[notificationid="update-restart"]::after, .panel-banner-item[notificationid="update-unsupported"]::after { - background-color: var(--panel-banner-item-warning-icon-bgcolor); background-image: url(chrome://browser/skin/update-badge.svg); background-repeat: no-repeat; background-position: center; - background-size: 10px; - border-radius: 50%; + -moz-context-properties: fill; + fill: var(--panel-banner-item-update-supported-bgcolor); +} +.panel-banner-item[notificationid="update-unsupported"]::after { + fill: var(--panel-banner-item-warning-icon-bgcolor); } .panel-banner-item[notificationid^=update] { list-style-image: url(chrome://branding/content/icon16.png); @@ -199,11 +193,10 @@ #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { height: 13px; - background: url(chrome://browser/skin/warning.svg) center / contain no-repeat transparent; + background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent; box-shadow: none; border-radius: 0; - /* Use the included fallbacks defined in the SVG file instead of inheriting from .toolbarbutton-1. */ - -moz-context-properties: none; + -moz-context-properties: fill; } #fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { @@ -214,8 +207,6 @@ #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - -moz-context-properties: stroke, fill; - stroke: var(--toolbar-bgcolor); fill: var(--panel-banner-item-warning-icon-bgcolor); } } diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn index 805446ed3ce3..1edcd561b6db 100644 --- a/browser/themes/shared/jar.inc.mn +++ b/browser/themes/shared/jar.inc.mn @@ -243,6 +243,7 @@ skin/classic/browser/translation-16.png (../shared/translation/translation-16.png) skin/classic/browser/translation-16@2x.png (../shared/translation/translation-16@2x.png) skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/update-circle-fill-12.svg (../shared/update-circle-fill-12.svg) skin/classic/browser/badge-blue.svg (../shared/badge-blue.svg) skin/classic/browser/warning.svg (../shared/warning.svg) skin/classic/browser/profiler-popup-backdrop.png (../shared/profiler-popup-backdrop.png) diff --git a/browser/themes/shared/toolbarbutton-icons.inc.css b/browser/themes/shared/toolbarbutton-icons.inc.css index 66b6b8894ee8..f891280ff8ed 100644 --- a/browser/themes/shared/toolbarbutton-icons.inc.css +++ b/browser/themes/shared/toolbarbutton-icons.inc.css @@ -276,7 +276,8 @@ toolbar[brighttext] { #PanelUI-menu-button[badge-status="update-downloading"], #PanelUI-menu-button[badge-status="update-manual"], #PanelUI-menu-button[badge-status="update-other-instance"], -#PanelUI-menu-button[badge-status="update-restart"] { +#PanelUI-menu-button[badge-status="update-restart"], +#PanelUI-menu-button[badge-status="update-unsupported"] { list-style-image: url("chrome://browser/skin/menu-badged.svg"); } diff --git a/browser/themes/shared/update-badge.svg b/browser/themes/shared/update-badge.svg index e0ddfbda94cf..aac3a5f97c8b 100644 --- a/browser/themes/shared/update-badge.svg +++ b/browser/themes/shared/update-badge.svg @@ -1,6 +1,6 @@ - - + + diff --git a/browser/themes/shared/update-circle-fill-12.svg b/browser/themes/shared/update-circle-fill-12.svg new file mode 100644 index 000000000000..50895ad61084 --- /dev/null +++ b/browser/themes/shared/update-circle-fill-12.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/icons/warning-fill-12.svg b/toolkit/themes/shared/icons/warning-fill-12.svg new file mode 100644 index 000000000000..1fddca1c4430 --- /dev/null +++ b/toolkit/themes/shared/icons/warning-fill-12.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn index 16ce5d7047a4..406a171af5af 100644 --- a/toolkit/themes/shared/jar.inc.mn +++ b/toolkit/themes/shared/jar.inc.mn @@ -89,6 +89,7 @@ toolkit.jar: skin/classic/global/icons/arrow-up-16.svg (../../shared/icons/arrow-up-16.svg) skin/classic/global/pictureinpicture/unpip.svg (../../shared/pictureinpicture/unpip.svg) skin/classic/global/icons/warning.svg (../../shared/icons/warning.svg) + skin/classic/global/icons/warning-fill-12.svg (../../shared/icons/warning-fill-12.svg) skin/classic/global/illustrations/about-rights.svg (../../shared/illustrations/about-rights.svg) skin/classic/global/illustrations/about-license.svg (../../shared/illustrations/about-license.svg) skin/classic/global/narrate.css (../../shared/narrate.css)