Bug 1363056 - Update notification bar style for photon. r=dao draft
authorTim Nguyen <ntim.bugs@gmail.com>
Sun, 13 Aug 2017 14:06:33 +0000
changeset 645590 95666c02b353a1b7017a9adf23ef82ff805a3a20
parent 645499 59594b3879cc7b038ba8a1ed6e9e66c6423bf6e2
child 725930 c0fcc86132726410ce905ff78fff197257173efe
push id73789
push userbmo:ntim.bugs@gmail.com
push dateSun, 13 Aug 2017 14:06:44 +0000
reviewersdao
bugs1363056
milestone57.0a1
Bug 1363056 - Update notification bar style for photon. r=dao MozReview-Commit-ID: LcPr6wKvdpw
toolkit/themes/linux/global/notification.css
toolkit/themes/osx/global/notification.css
toolkit/themes/shared/aboutNetworking.css
toolkit/themes/shared/config.css
toolkit/themes/shared/icons/error.svg
toolkit/themes/shared/icons/help.svg
toolkit/themes/shared/icons/warning.svg
toolkit/themes/shared/incontent-icons/warning.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/shared/notification.inc.css
toolkit/themes/windows/global/notification.css
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -1,84 +1,13 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-notification {
-  color: -moz-gtk-info-bar-text;
-  -moz-appearance: -moz-gtk-info-bar;
-%if MOZ_WIDGET_GTK == 2
-  background-color: InfoBackground;
-%endif
-  text-shadow: none;
-}
-
-notification[type="info"] {
-  color: -moz-DialogText;
-  background-color: -moz-Dialog;
-  -moz-appearance: none;
-  border-top: 1px solid ThreeDShadow;
-  border-bottom: 1px solid ThreeDShadow;
-}
-
-notificationbox[notificationside="top"] > notification[type="info"] {
-  border-top-style: none;
-}
-
-notificationbox[notificationside="bottom"] > notification[type="info"] {
-  border-bottom-style: none;
-}
-
-notification[type="critical"] {
-  color: white;
-  background-image: linear-gradient(rgb(212,0,0), rgb(152,0,0));
-  -moz-appearance: none;
-}
-
-.notification-inner {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.messageText {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.messageText > .text-link {
-  color: inherit !important;
-  text-decoration: underline;
-}
-
-.messageImage {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 6px;
-  margin-inline-end: 1px;
-}
-
-/* Default icons for notifications */
-
-.messageImage[type="info"] {
-  list-style-image: url("moz-icon://stock/gtk-dialog-info?size=menu");
-}
-
-.messageImage[type="warning"] {
-  list-style-image: url("moz-icon://stock/gtk-dialog-warning?size=menu");
-}
-
-.messageImage[type="critical"] {
-  list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
-}
-
-.messageCloseButton {
-  padding-left: 11px;
-  padding-right: 11px;
-}
-
+%include ../../shared/notification.inc.css
 %include ../../shared/popupnotification.inc.css
 
 .popup-notification-button:-moz-focusring {
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -5px;
 }
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -1,87 +1,16 @@
 /* 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/. */
 
 %include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-notification {
-  padding: 2px 3px 3px;
-  text-shadow: none;
-}
-
-notification[type="info"] {
-  color: rgba(255,255,255,0.95);
-  background: linear-gradient(#606060, #404040);
-  border-top: 1px solid #2a2a2a;
-  border-bottom: 1px solid #2a2a2a;
-}
-
-notification[type="warning"] {
-  color: rgba(0,0,0,0.95);
-  background: linear-gradient(#ffe13e, #ffc703);
-  border-top: 1px solid #bf8a01;
-  border-bottom: 1px solid #bf8a01;
-}
-
-notification[type="critical"] {
-  color: rgba(255,255,255,0.95);
-  background: linear-gradient(#d40000, #980000);
-  border-top: 1px solid #5d0000;
-  border-bottom: 1px solid #5d0000;
-}
-
-notificationbox[notificationside="top"] > notification {
-  border-top-style: none;
-}
-
-notificationbox[notificationside="bottom"] > notification {
-  border-bottom-style: none;
-}
-
-.messageText > .text-link {
-  color: inherit !important;
-  text-decoration: underline;
-}
-
-.messageImage {
-  width: 16px;
-  height: 16px;
-  margin: 0 4px;
-}
-
-/* Default icons for notifications */
-
-.messageImage[type="info"] {
-  list-style-image: url("chrome://global/skin/notification/info-icon.png");
-}
-
-.messageImage[type="warning"] {
-  list-style-image: url("chrome://global/skin/notification/warning-icon.png");
-}
-
-.messageImage[type="critical"] {
-  list-style-image: url("chrome://global/skin/notification/error-icon.png");
-}
-
-.messageText {
-  margin: 0 3px !important;
-  padding: 0;
-  font-weight: bold;
-}
-
-.messageCloseButton {
-  -moz-appearance: none;
-  padding: 0;
-  margin: 0 2px;
-  border: none;
-}
-
+%include ../../shared/notification.inc.css
 %include ../../shared/popupnotification.inc.css
 
 .popup-notification-button:-moz-focusring {
   outline: 2px -moz-mac-focusring solid;
   outline-offset: -2px;
 }
 
 .popup-notification-warning {
--- a/toolkit/themes/shared/aboutNetworking.css
+++ b/toolkit/themes/shared/aboutNetworking.css
@@ -83,16 +83,18 @@ body {
   left: -2.3em;
   top: 0;
   position: absolute;
   display: block;
   width: 1.6em;
   height: 1.6em;
   background: url("chrome://global/skin/icons/warning.svg") no-repeat left center;
   background-size: 1.6em;
+  -moz-context-properties: fill;
+  fill: #fcd100;
 }
 
 .title:dir(rtl)::before {
   left: auto;
   right: -2.3em;
 }
 
 .warningBackground button {
--- a/toolkit/themes/shared/config.css
+++ b/toolkit/themes/shared/config.css
@@ -7,16 +7,18 @@
   padding-top: 0;
   padding-bottom: 0;
   padding-inline-start: calc(48px + 4.6em);
   padding-inline-end: 48px;
 }
 
 .title {
   background-image: url("chrome://global/skin/icons/warning.svg");
+  -moz-context-properties: fill;
+  fill: #fcd100;
 }
 
 #warningTitle {
   font-weight: lighter;
   line-height: 1.2;
   color: #333;
   margin: 0;
   margin-bottom: .5em;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/error.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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 15c-3.866 0-7-3.134-7-7s3.134-7 7-7 7 3.134 7 7-3.134 7-7 7zM3 7v2h10V7H3z" fill="context-fill" fill-rule="evenodd"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/help.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="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zM8 3.125A2.7 2.7 0 0 0 5.125 6a.875.875 0 0 0 1.75 0c0-1 .6-1.125 1.125-1.125a1.105 1.105 0 0 1 1.13.744.894.894 0 0 1-.53 1.016A2.738 2.738 0 0 0 7.125 9v.337a.875.875 0 0 0 1.75 0v-.37a1.041 1.041 0 0 1 .609-.824A2.637 2.637 0 0 0 10.82 5.16 2.838 2.838 0 0 0 8 3.125zm0 7.625A1.25 1.25 0 1 0 9.25 12 1.25 1.25 0 0 0 8 10.75z"></path>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/warning.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>
deleted file mode 100644
--- a/toolkit/themes/shared/incontent-icons/warning.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
-  <defs>
-    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="10" x2="30" y2="50">
-      <stop offset="0" style="stop-color: #fedb00"/>
-      <stop offset="1" style="stop-color: #fcce00"/>
-    </linearGradient>
-  </defs>
-  <path fill="url(#gradient)" d="M49.316,42.867L33.829,12.7c-0.879-1.715-2.274-2.7-3.828-2.7c-1.554,0-2.949,0.985-3.829,2.702 L10.685,42.864c-0.869,1.69-0.913,3.482-0.121,4.909C11.35,49.187,12.817,50,14.591,50h30.82c1.772,0,3.24-0.81,4.023-2.224 C50.227,46.349,50.185,44.56,49.316,42.867z M32.176,22.304l-0.48,14.304h-3.424L27.76,22.304H32.176z M30,44.896 c-1.44,0-2.592-1.184-2.592-2.592c0-1.44,1.152-2.592,2.592-2.592c1.472,0,2.592,1.152,2.592,2.592 C32.592,43.712,31.472,44.896,30,44.896z"/>
-</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -24,26 +24,28 @@ toolkit.jar:
   skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
   skin/classic/global/datetimepopup.css                    (../../shared/datetimepopup.css)
   skin/classic/global/filters.svg                          (../../shared/filters.svg)
   skin/classic/global/passwordmgr.css                      (../../shared/passwordmgr.css)
   skin/classic/global/scale.css                            (../../shared/scale.css)
   skin/classic/global/icons/calendar-arrow-left.svg        (../../shared/icons/calendar-arrow-left.svg)
   skin/classic/global/icons/calendar-arrow-right.svg       (../../shared/icons/calendar-arrow-right.svg)
   skin/classic/global/icons/close.svg                      (../../shared/icons/close.svg)
+  skin/classic/global/icons/error.svg                      (../../shared/icons/error.svg)
   skin/classic/global/icons/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
+  skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
   skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
   skin/classic/global/icons/menubutton-dropmarker.svg      (../../shared/icons/menubutton-dropmarker.svg)
-  skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
+  skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
   skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
   skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
   skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
   skin/classic/global/narrate/forward.svg                  (../../shared/narrate/forward.svg)
   skin/classic/global/narrate/slow.svg                     (../../shared/narrate/slow.svg)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/notification.inc.css
@@ -0,0 +1,66 @@
+/* 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/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+notification {
+  padding: 2px 12px 3px;
+  background: -moz-dialog;
+  color: -moz-dialogText;
+  border-color: rgba(12, 12, 13, .2);
+  text-shadow: none !important;
+}
+
+notificationbox[notificationside="top"] > notification {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+notificationbox[notificationside="bottom"] > notification {
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+notification[type="warning"] {
+  background: #ffe900;
+  color: #0c0c0d;
+}
+
+notification[type="critical"] {
+  background: #d70022;
+  color: #fff;
+}
+
+.messageText {
+  margin-inline-start: 12px !important;
+}
+
+.messageText > .text-link {
+  color: inherit !important;
+  text-decoration: underline;
+}
+
+.messageImage {
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.messageImage[type="info"] {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+}
+
+.messageImage[type="warning"] {
+  list-style-image: url("chrome://global/skin/icons/warning.svg");
+}
+
+.messageImage[type="critical"] {
+  list-style-image: url("chrome://global/skin/icons/error.svg");
+}
+
+.messageCloseButton {
+  margin: 0;
+  padding: 0;
+}
--- a/toolkit/themes/windows/global/notification.css
+++ b/toolkit/themes/windows/global/notification.css
@@ -1,76 +1,15 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-notification {
-  color: InfoText;
-  background-color: InfoBackground;
-  text-shadow: none;
-  border-top: 1px solid ThreeDShadow;
-  border-bottom: 1px solid ThreeDShadow;
-}
-
-notificationbox[notificationside="top"] > notification {
-  border-top-style: none;
-}
-
-notificationbox[notificationside="bottom"] > notification {
-  border-bottom-style: none;
-}
-
-notification[type="info"] {
-  color: -moz-DialogText;
-  background-color: -moz-Dialog;
-}
-
-notification[type="critical"] {
-  color: white;
-  background-image: linear-gradient(rgb(212,0,0), rgb(152,0,0));
-}
-
-.messageText > .text-link {
-  color: inherit !important;
-  text-decoration: underline;
-}
-
-.messageImage {
-  width: 16px;
-  height: 16px;
-  margin-inline-start: 6px;
-  margin-inline-end: 1px;
-}
-
-/* Default icons for notifications */
-
-.messageImage[type="info"] {
-  list-style-image: url("chrome://global/skin/icons/information-16.png");
-}
-
-.messageImage[type="warning"] {
-  list-style-image: url("chrome://global/skin/icons/warning-16.png");
-}
-
-.messageImage[type="critical"] {
-  list-style-image: url("chrome://global/skin/icons/error-16.png");
-}
-
-.messageCloseButton {
-  -moz-appearance: none;
-  padding: 4px 2px;
-  border: none !important;
-}
-
-.messageCloseButton > .toolbarbutton-icon {
-  margin-inline-end: 5px;
-}
-
+%include ../../shared/notification.inc.css
 %include ../../shared/popupnotification.inc.css
 
 /* Override default icon size which is too small for this dropdown */
 .popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
   width: 16px;
   height: 16px;
 }