Bug 1429288 - Fix up app menu warning stripe colors. r=Gijs
authorDão Gottwald <dao@mozilla.com>
Thu, 11 Jan 2018 14:40:48 +0100
changeset 398773 5acf096b4c7c90e3666a6776c5f19483a5296d9f
parent 398772 a89326c8f25c65566e0d5c54bf86857671a8d97e
child 398774 ec1a634f8feaa198469acf34f37d13e917175226
push id33232
push usernerli@mozilla.com
push dateThu, 11 Jan 2018 21:53:31 +0000
treeherdermozilla-central@185d2695bf96 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1429288
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1429288 - Fix up app menu warning stripe colors. r=Gijs MozReview-Commit-ID: EudPyH5Nt8
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -16,22 +16,21 @@
 %define buttonStateHover :not(:-moz-any([disabled],[open],:active)):-moz-any(:hover,:focus)
 %define menuStateHover :not(:-moz-any([disabled],:active))[_moz-menuactive]
 %define buttonStateActive :not([disabled]):-moz-any([open],:hover:active)
 %define menuStateActive :not([disabled])[_moz-menuactive]:active
 %define menuStateMenuActive :not([disabled])[_moz-menuactive]
 %define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 %define panelPaletteIconSize 16px
 
-:root {
-  --appmenu-yellow-warning-border-color: hsl(45, 100%, 77%);
-  --appmenu-yellow-warning-color: #FFEFBF;
-  --appmenu-yellow-warning-hover-color: #FFE8A2;
-  --appmenu-yellow-warning-active-color: #FFE38F;
-}
+%define appmenuWarningBackgroundColor #FFEFBF
+%define appmenuWarningBackgroundColorHover #FFE8A2
+%define appmenuWarningBackgroundColorActive #FFE38F
+%define appmenuWarningColor black
+%define appmenuWarningBorderColor hsl(45,100%,77%)
 
 :root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
   border-inline-start: 1px solid;
   border-image: linear-gradient(transparent 4px, rgba(0,0,0,.1) 4px, rgba(0,0,0,.1) calc(100% - 4px), transparent calc(100% - 4px));
   border-image-slice: 1;
 }
 
@@ -432,33 +431,34 @@ toolbarbutton[constrain-size="true"][cui
   width: 16px;
   height: 16px;
   margin-inline-start: 10px;
   margin-inline-end: 12px;
   display: -moz-box;
 }
 
 .addon-banner-item {
-  background-color: var(--appmenu-yellow-warning-color);
+  background-color: @appmenuWarningBackgroundColor@;
+  color: @appmenuWarningColor@;
   /* Force border to override `.addon-banner-item` selector below */
-  border-top: 1px solid var(--appmenu-yellow-warning-border-color) !important;
+  border-top: 1px solid @appmenuWarningBorderColor@ !important;
   display: flex;
   flex: 1 1 0%;
   width: calc(@menuPanelWidth@ + 30px);
   padding-inline-start: 15px;
   border-inline-start-style: none;
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .addon-banner-item:hover {
-  background-color: var(--appmenu-yellow-warning-hover-color);
+  background-color: @appmenuWarningBackgroundColorHover@;
 }
 
-.addon-banner-item:active {
-  background-color: var(--appmenu-yellow-warning-active-color);
+.addon-banner-item:hover:active {
+  background-color: @appmenuWarningBackgroundColorActive@;
 }
 
 .addon-banner-item > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 .addon-banner-item::after {
@@ -559,29 +559,30 @@ toolbarbutton[constrain-size="true"][cui
 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
   list-style-image: url(chrome://browser/skin/warning.svg);
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 #appMenu-fxa-container[fxastatus="login-failed"],
 #appMenu-fxa-container[fxastatus="unverified"] {
-  background-color: var(--appmenu-yellow-warning-color);
-  border-top: 1px solid var(--appmenu-yellow-warning-border-color);
-  border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
+  background-color: @appmenuWarningBackgroundColor@;
+  color: @appmenuWarningColor@;
+  border-top: 1px solid @appmenuWarningBorderColor@;
+  border-bottom: 1px solid @appmenuWarningBorderColor@;
 }
 
 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
-  background-color: var(--appmenu-yellow-warning-hover-color);
+  background-color: @appmenuWarningBackgroundColorHover@;
 }
 
 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
-  background-color: var(--appmenu-yellow-warning-active-color);
+  background-color: @appmenuWarningBackgroundColorActive@;
 }
 
 .addon-banner-item > .toolbarbutton-text,
 .panel-banner-item > .toolbarbutton-text {
   margin: 0;
   padding: 0 6px;
   text-align: start;
 }