Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1704461 - Use new icons for update and warning badges for the AppMenu button. r=mhowell

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D113003
This commit is contained in:
Mike Conley 2021-04-21 20:24:46 +00:00
parent b02dede164
commit 607f21442a
7 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
browser/themes/shared/customizableui/panelUI.inc.css
View File

@ -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);
}
}

1
browser/themes/shared/jar.inc.mn
View File

@ -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)

3
browser/themes/shared/toolbarbutton-icons.inc.css
View File

@ -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");
}

4
browser/themes/shared/update-badge.svg
View File

@ -1,6 +1,6 @@
<!-- 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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M8 14.375 8 3.048 3.693 7.357a.626.626 0 0 1-.885-.885L8.281 1l.689 0 5.473 5.472a.623.623 0 0 1 0 .884.628.628 0 0 1-.885 0L9.25 3.048l0 11.327a.625.625 0 0 1-1.25 0z"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill">
<path d="M7.625.5a7.5 7.5 0 1 0 0 15 7.5 7.5 0 0 0 0-15zm3.317 7.38a.623.623 0 0 1-.884 0L8.25 6.072l0 5.304A.625.625 0 0 1 7 11.375l0-5.303L5.192 7.88a.626.626 0 0 1-.885-.885L7.304 4l.643 0 2.996 2.995a.627.627 0 0 1-.001.885z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 547 B

After

Width:  |  Height:  |  Size: 563 B

7
browser/themes/shared/update-circle-fill-12.svg Normal file
View File

@ -0,0 +1,7 @@
<!-- 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" viewBox="0 0 12 12" width="12" height="12">
<circle fill="context-stroke" cx="6.5" cy="6.5" r="5.5"/>
<path fill="context-fill" d="M6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm1.685 4L7 6l0 2.5a.5.5 0 0 1-1 0L6 6 4.815 6a.314.314 0 0 1-.222-.536L6.367 3.69l.267 0 1.774 1.774A.314.314 0 0 1 8.185 6z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 566 B

7
toolkit/themes/shared/icons/warning-fill-12.svg Normal file
View File

@ -0,0 +1,7 @@
<!-- 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" viewBox="0 0 12 12" width="12" height="12" fill-opacity="context-fill-opacity">
<path fill="context-stroke" d="M10.76 8.336 6.97 1.729c-.651-1.135-2.288-1.135-2.939 0L.241 8.336c-.686 1.196.177 2.686 1.556 2.686l7.407 0c1.378 0 2.241-1.49 1.556-2.686z"/>
<path fill="context-fill" d="M9.846 8.266 6.534 2.493c-.454-.791-1.615-.791-2.069 0L1.154 8.266C.709 9.041 1.281 10 2.189 10l6.623 0c.907 0 1.479-.959 1.034-1.734zM6.125 6.375a.625.625 0 0 1-1.25 0l0-1.75a.625.625 0 0 1 1.25 0l0 1.75zM5.5 8.95a.625.625 0 1 1-.001-1.25.625.625 0 0 1 .001 1.25z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 815 B

1
toolkit/themes/shared/jar.inc.mn
View File

@ -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)