Bug 1441833 - Stop using fill: GrayText in panels. r=dao
MozReview-Commit-ID: KeJEykpGDzo
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -377,39 +377,40 @@ description#identity-popup-content-verif
.identity-popup-permission-remove-button {
-moz-appearance: none;
margin: 0;
border-width: 0;
border-radius: 50%;
min-width: 0;
padding: 2px;
background-color: transparent;
+ opacity: 0.6;
}
.identity-popup-permission-remove-button > .button-box {
padding: 0;
}
.identity-popup-permission-remove-button > .button-box > .button-icon {
margin: 0;
width: 16px;
height: 16px;
list-style-image: url(chrome://browser/skin/panel-icon-cancel.svg);
-moz-context-properties: fill;
- fill: graytext;
+ fill: currentColor;
}
.identity-popup-permission-remove-button > .button-box > .button-text {
display: none;
}
/* swap foreground / background colors on hover */
.identity-popup-permission-remove-button:not(:-moz-focusring):hover {
- background-color: graytext;
+ background-color: currentColor;
}
.identity-popup-permission-remove-button:not(:-moz-focusring):hover > .button-box > .button-icon {
- fill: -moz-field;
+ fill: var(--arrowpanel-background);
}
.identity-popup-permission-remove-button:not(:-moz-focusring):hover:active {
- background-color: -moz-fieldtext;
+ opacity: 0.8;
}
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -856,19 +856,20 @@ panelview .toolbarbutton-1,
.subviewbutton[shortcut]::after {
content: attr(shortcut);
float: right;
color: GrayText;
}
.PanelUI-subView .subviewbutton-nav::after {
- -moz-context-properties: fill;
+ -moz-context-properties: fill, fill-opacity;
content: url(chrome://browser/skin/back-12.svg);
- fill: GrayText;
+ fill: currentColor;
+ fill-opacity: 0.6;
float: right;
transform: translateY(1px);
}
#main-window:not([customizing]) .subviewbutton-nav[disabled=true]::after {
opacity: 0.4;
}
@@ -887,20 +888,20 @@ panelview .toolbarbutton-1,
}
.subviewbutton[type="highlight-history"]::after {
content: url("chrome://browser/skin/history.svg");
}
.subviewbutton[type="highlight-bookmark"]::after,
.subviewbutton[type="highlight-history"]::after {
- -moz-context-properties: fill;
- fill: GrayText;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.4;
float: right;
- opacity: .5;
/* Centers the icon and resizes it to 12px square. */
transform: translateY(2px) scaleX(.75);
}
/* This is a <label> but it should fit in with the menu font- and colorwise. */
#PanelUI-characterEncodingView-autodetect-label {
font: menu;
color: inherit;
@@ -1257,25 +1258,26 @@ toolbaritem[overflowedItem=true],
}
.widget-overflow-list .toolbarbutton-1 {
-moz-box-align: center;
-moz-box-orient: horizontal;
}
.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(ltr)::after {
- transform: scaleX(-1);
+ transform: scaleX(-1);
}
.widget-overflow-list .subviewbutton-nav::after {
- margin-inline-start: 10px;
- -moz-context-properties: fill;
- content: url(chrome://browser/skin/back-12.svg);
- fill: GrayText;
- float: right;
+ margin-inline-start: 10px;
+ -moz-context-properties: fill, fill-opacity;
+ content: url(chrome://browser/skin/back-12.svg);
+ fill: currentColor;
+ fill-opacity: 0.6;
+ float: right;
}
toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
opacity: 0.5;
}
.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
text-align: start;
@@ -1537,35 +1539,36 @@ menuitem[checked="true"].subviewbutton >
.subviewbutton.download > .toolbarbutton-text > .status-text {
color: GrayText;
font-size: .9em;
}
.subviewbutton.download > .action-button {
-moz-appearance: none; /* To avoid native Windows hover styling */
- -moz-context-properties: fill;
+ -moz-context-properties: fill, fill-opacity;
fill: currentColor;
+ fill-opacity: 1;
%ifdef XP_MACOSX
list-style-image: url("chrome://browser/skin/search-glass.svg");
%else
list-style-image: url("chrome://browser/skin/folder.svg");
%endif
/* Measurement to vertically center this button: 1 line of text minus half of 4px top margin. */
margin: calc(1em - 2px) 0 0;
padding: 4px;
}
.subviewbutton.download[retryLabel] > .action-button {
list-style-image: url("chrome://browser/skin/reload.svg");
}
.subviewbutton.download:not([openLabel]):not([retryLabel]) > .action-button {
- fill: GrayText;
- opacity: .5;
+ fill: currentColor;
+ fill-opacity: 0.4;
}
.subviewbutton.download:-moz-any([openLabel],[retryLabel]) > .action-button@buttonStateHover@ {
background-color: var(--arrowpanel-dimmed-further);
}
.subviewbutton.download:-moz-any([openLabel],[retryLabel]) > .action-button@buttonStateActive@ {
background-color: var(--arrowpanel-dimmed-even-further);
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -1,18 +1,19 @@
%if 0
/* 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/. */
%endif
.popup-notification-icon,
.identity-popup-permission-icon {
- -moz-context-properties: fill;
- fill: GrayText;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.6;
}
#notification-popup-box {
padding: 5px 0px;
margin: -5px 0px;
margin-inline-end: -5px;
padding-inline-end: 5px;
}
--- a/browser/themes/windows/customizableui/menu-arrow.svg
+++ b/browser/themes/windows/customizableui/menu-arrow.svg
@@ -1,7 +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"
- height="16" width="16" viewBox="0 0 16 16">
- <path fill="context-fill" d="m 6,4 0,8 5,-4 z"/>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16">
+ <path fill="context-fill" fill-opacity="context-fill-opacity" d="m 6,4 0,8 5,-4 z"/>
</svg>
--- a/browser/themes/windows/customizableui/panelUI.css
+++ b/browser/themes/windows/customizableui/panelUI.css
@@ -43,30 +43,24 @@ menuitem[type="checkbox"].subviewbutton
/* This is 16px for an icon + 3px for its margins + 1px for its padding +
* 2px for its border, see above */
min-height: 22px;
}
menu.subviewbutton > .menu-right {
-moz-appearance: none;
list-style-image: url(chrome://browser/skin/customizableui/menu-arrow.svg);
- -moz-context-properties: fill;
- fill: MenuText;
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
/* Reset the rect we inherit from the button: */
-moz-image-region: auto;
}
menu[disabled="true"].subviewbutton > .menu-right {
- fill: GrayText;
-}
-
-@media (-moz-windows-default-theme: 0) {
- menu[_moz-menuactive].subviewbutton > .menu-right {
- fill: HighlightText;
- }
+ fill-opacity: 0.6;
}
menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
/* Win8 and beyond. */
@media not all and (-moz-os-version: windows-win7) {