Bug 1454231 - Improved dark theme colors of popup warnings. r?jaws draft
authorHarry Twyford <htwyford@mozilla.com>
Tue, 15 May 2018 13:06:05 -0400
changeset 798164 515099cb5038
parent 798084 b75acf965293
child 798165 4a695757e0e8
child 798946 e0fc2308b4b6
push id110686
push userbmo:htwyford@mozilla.com
push dateTue, 22 May 2018 14:05:44 +0000
reviewersjaws
bugs1454231
milestone62.0a1
Bug 1454231 - Improved dark theme colors of popup warnings. r?jaws MozReview-Commit-ID: Ggxep9WeIUz
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/warning-clear.svg
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -22,16 +22,21 @@
 %define panelPaletteIconSize 16px
 
 %define appmenuWarningBackgroundColor #FFEFBF
 %define appmenuWarningBackgroundColorHover #FFE8A2
 %define appmenuWarningBackgroundColorActive #FFE38F
 %define appmenuWarningColor black
 %define appmenuWarningBorderColor hsl(45,100%,77%)
 
+%define appmenuWarningBackgroundColorDark hsla(55, 100%, 50%, 0.1)
+%define appmenuWarningBackgroundColorHoverDark hsla(55, 100%, 50%, 0.15)
+%define appmenuWarningBackgroundColorActiveDark hsla(55, 100%, 50%, 0.2)
+%define appmenuWarningColorDark #F9F9FA
+
 :root:not([uidensity=compact]):not([chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
   border-inline-start: 1px solid;
   border-image: linear-gradient(
     transparent 4px,
     var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.1)) 4px,
     var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.1)) calc(100% - 4px),
     transparent calc(100% - 4px)
@@ -94,17 +99,22 @@
 }
 
 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
   filter: none;
 }
 
 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   height: 13px;
-  background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
+  background: #FFBF00 no-repeat center;
+  mask-image: url(chrome://browser/skin/warning-clear.svg);
+}
+
+:root[lwt-popup-brighttext] #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+  background: #FFE900 no-repeat center;
 }
 
 panelview {
   -moz-box-orient: vertical;
   -moz-box-flex: 1;
   background: var(--arrowpanel-background);
   padding: 0;
 }
@@ -447,17 +457,22 @@ toolbarbutton[constrain-size="true"][cui
 }
 
 .addon-banner-item > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 .addon-banner-item::after {
-  background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
+  background: #FFBF00 no-repeat center;
+  mask-image: url(chrome://browser/skin/warning-clear.svg);
+}
+
+:root[lwt-popup-brighttext] .addon-banner-item::after {
+  background: #FFE900 no-repeat center;
 }
 
 .addon-banner-item,
 .panel-banner-item {
   margin: 0;
   padding: 11px 0;
   box-sizing: border-box;
   min-height: 40px;
@@ -592,16 +607,48 @@ toolbarbutton[constrain-size="true"][cui
 }
 
 .addon-banner-item {
   flex: 1;
   padding-inline-start: 15px;
   border-inline-start-style: none;
 }
 
+:root[lwt-popup-brighttext] .addon-banner-item {
+  color: @appmenuWarningColorDark@;
+  background: @appmenuWarningBackgroundColorDark@;
+  border: 0 !important;
+}
+
+:root[lwt-popup-brighttext] .addon-banner-item:hover,
+:root[lwt-popup-brighttext] .addon-banner-item:focus {
+  background: @appmenuWarningBackgroundColorHoverDark@;
+}
+
+:root[lwt-popup-brighttext] .addon-banner-item:hover:active,
+:root[lwt-popup-brighttext] .addon-banner-item:focus:active {
+  background: @appmenuWarningBackgroundColorActiveDark@;
+}
+
+:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"],
+:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] {
+  background-color: @appmenuWarningBackgroundColorDark@;
+  color: @appmenuWarningColorDark@;
+}
+
+:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
+:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
+  background-color: @appmenuWarningBackgroundColorHoverDark@;
+}
+
+:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
+:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
+  background-color: @appmenuWarningBackgroundColorActiveDark@;
+}
+
 #PanelUI-remotetabs {
   --panel-ui-sync-illustration-height: 91px;
 }
 
 .PanelUI-remotetabs-instruction-label {
   /* If you change the margin here, the min-height of the synced tabs panel
     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
     need adjusting (see bug 1248506) */
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -206,16 +206,17 @@
   skin/classic/browser/translating-16.png                      (../shared/translation/translating-16.png)
   skin/classic/browser/translating-16@2x.png                   (../shared/translation/translating-16@2x.png)
   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-badge-failed.svg                 (../shared/update-badge-failed.svg)
   skin/classic/browser/warning.svg                             (../shared/warning.svg)
   skin/classic/browser/warning-white.svg                       (../shared/warning-white.svg)
+  skin/classic/browser/warning-clear.svg                       (../shared/warning-clear.svg)
   skin/classic/browser/cert-error.svg                          (../shared/incontent-icons/cert-error.svg)
   skin/classic/browser/wifi.svg                                (../shared/incontent-icons/wifi.svg)
   skin/classic/browser/tab-crashed.svg                         (../shared/incontent-icons/tab-crashed.svg)
   skin/classic/browser/favicon-search-16.svg                   (../shared/favicon-search-16.svg)
   skin/classic/browser/icon-search-64.svg                      (../shared/incontent-icons/icon-search-64.svg)
   skin/classic/browser/welcome-back.svg                        (../shared/incontent-icons/welcome-back.svg)
   skin/classic/browser/readerMode.svg                          (../shared/reader/readerMode.svg)
   skin/classic/browser/panic-panel/header.png                  (../shared/panic-panel/header.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/warning-clear.svg
@@ -0,0 +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" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z"></path>
+</svg>