Bug 1551202 - Update <message-bar> to fully match Photon's style r=jaws
☠☠ backed out by c07f5967e0fc ☠ ☠
authorRob Wu <rob@robwu.nl>
Fri, 17 May 2019 16:57:13 +0000
changeset 533216 1454297813951e8531bed6673e41fb38425b9def
parent 533215 5f5daca84fbeb06f7df1569b18ad49da977b024e
child 533217 70b0d5a417b826c34f76cc244a303200fc4de885
push id11276
push userrgurzau@mozilla.com
push dateMon, 20 May 2019 13:11:24 +0000
treeherdermozilla-beta@847755a7c325 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1551202
milestone68.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 1551202 - Update <message-bar> to fully match Photon's style r=jaws - Update info.svg to adjust color based on the fill color. - Use button colors as defined by Photon (without this, the background of the non-generic buttons are almost indistinguishable when dark themes are enabled). - Small refactor of message-bar.css to put all type-specific declarations in one location. Differential Revision: https://phabricator.services.mozilla.com/D31509
toolkit/mozapps/extensions/content/message-bar.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/incontent-icons/info.svg
--- a/toolkit/mozapps/extensions/content/message-bar.css
+++ b/toolkit/mozapps/extensions/content/message-bar.css
@@ -4,36 +4,58 @@
   --check-icon-url: url("chrome://global/skin/icons/check.svg");
   --error-icon-url: url("chrome://global/skin/icons/error.svg");
   --close-icon-url: url("chrome://global/skin/icons/close.svg");
   --icon-size: 16px;
 }
 
 /* MessageBar colors by message type */
 /* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */
+
+:host {
+  /* Colors used by default, and for [type=generic] message bars.*/
+  background-color: var(--in-content-box-info-background);
+  color: var(--in-content-text-color);
+
+  --message-bar-icon-url: var(--info-icon-url);
+  /* The default values of --in-content-button* are sufficient, even for dark themes */
+}
+
 :host([type=warning]) {
   background-color: var(--yellow-50);
   color: var(--yellow-90);
+
+  --message-bar-icon-url: var(--warn-icon-url);
+  --in-content-button-background: var(--yellow-60);
+  --in-content-button-background-hover: var(--yellow-70);
+  --in-content-button-background-active: var(--yellow-80);
 }
 
 :host([type=success]) {
-  background-color: #30e60b;
-  color: #003706;
+  background-color: var(--green-50);
+  color: var(--green-90);
+
+  --message-bar-icon-url: var(--check-icon-url);
+  --in-content-button-background: var(--green-60);
+  --in-content-button-background-hover: var(--green-70);
+  --in-content-button-background-active: var(--green-80);
 }
 
 :host([type=error]) {
-  background: #d70022;
+  background-color: var(--red-60);
   color: #ffffff;
+
+  --messsage-bar-icon-url: var(--error-icon-url);
+  --in-content-button-background: var(--red-70);
+  --in-content-button-background-hover: var(--red-80);
+  --in-content-button-background-active: var(--red-90);
 }
 
 :host {
   border-radius: 4px;
-  /* Colors used by default, and for [type=generic] message bars.*/
-  background-color: var(--in-content-box-info-background);
-  color: var(--in-content-text-color);
 }
 
 /* Make the host to behave as a block by default, but allow hidden to hide it. */
 :host(:not([hidden])) {
   display: block;
 }
 
 .container {
@@ -91,42 +113,23 @@ button.close {
 /* MessageBar icon style */
 
 .icon {
   padding: 4px;
   width: var(--icon-size);
   height: var(--icon-size);
 }
 
-.icon {
+.icon::after {
   -moz-appearance: none;
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill, stroke;
   color: inherit !important;
   fill: currentColor;
-  fill-opacity: 0;
-}
-
-:host([type=success]) .icon {
-  fill-opacity: 1;
-}
-
-:host(:not([type])) .icon::after, :host([type=generic]) .icon::after {
-  content: var(--info-icon-url);
-}
-
-:host([type=warning]) .icon::after {
-  content: var(--warn-icon-url);
-}
-
-:host([type=success]) .icon::after {
-  content: var(--check-icon-url);
-}
-
-:host([type=error]) .icon::after {
-  content: var(--error-icon-url);
+  stroke: currentColor;
+  content: var(--message-bar-icon-url);
 }
 
 /* Close icon styles */
 
 :host(:not([dismissable])) button.close {
   display: none;
 }
 
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -67,22 +67,33 @@
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-90: #0c0c0d;
   --grey-90-a10: rgba(12, 12, 13, 0.1);
   --grey-90-a20: rgba(12, 12, 13, 0.2);
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
+  --green-50: #30e60b;
+  --green-60: #12bc00;
+  --green-70: #058b00;
+  --green-80: #006504;
+  --green-90: #003706;
   --purple-70: #6200a4;
   --purple-70-a40: rgba(98, 0, 164, 0.4);
   --red-50: #ff0039;
   --red-50-a30: rgba(255, 0, 57, 0.3);
   --red-60: #d70022;
+  --red-70: #a4000f;
+  --red-80: #5a0002;
+  --red-90: #3e0200;
   --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
   --yellow-90: #3e2800;
 
   --shadow-10: 0 1px 4px var(--grey-90-a10);
   --shadow-30: 0 4px 16px var(--grey-90-a10);
 
   --card-padding: 16px;
   --card-shadow: var(--shadow-10);
   --card-outline-color: var(--grey-30);
--- a/toolkit/themes/shared/incontent-icons/info.svg
+++ b/toolkit/themes/shared/incontent-icons/info.svg
@@ -1,8 +1,8 @@
 <!-- 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 100 100" fill="#424e5a">
-  <circle cx="50" cy="50" r="44" stroke="#424e5a" stroke-width="11" fill="none"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="context-fill #424e5a">
+  <circle cx="50" cy="50" r="44" stroke="context-fill #424e5a" stroke-width="11" fill="none"/>
   <circle cx="50" cy="24.6" r="6.4"/>
   <rect x="45" y="39.9" width="10.1" height="41.8"/>
 </svg>