Bug 1363056 - Update notification bar style for photon. r=dao
authorTim Nguyen <ntim.bugs@gmail.com>
Sun, 13 Aug 2017 14:06:33 +0000
changeset 375700 089706dfb4812683bb456300b5695a56f6ec2183
parent 375699 c7fc4a1e4360754e329262aaa1125b1ca1bb5aa7
child 375701 a08bb8b25b9bc881bda34314160d4e224111bcf8
push id32361
push userphilringnalda@gmail.com
push dateSat, 19 Aug 2017 22:28:34 +0000
treeherdermozilla-central@c40774ced661 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1363056
milestone57.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 1363056 - Update notification bar style for photon. r=dao MozReview-Commit-ID: LcPr6wKvdpw
browser/themes/shared/icons/help.svg
browser/themes/shared/incontentprefs/help.svg
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/menupanel.inc.css
toolkit/themes/linux/global/notification.css
toolkit/themes/osx/global/jar.mn
toolkit/themes/osx/global/notification.css
toolkit/themes/osx/global/notification/error-icon.png
toolkit/themes/osx/global/notification/info-icon.png
toolkit/themes/osx/global/notification/warning-icon.png
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
deleted file mode 100644
--- a/browser/themes/shared/icons/help.svg
+++ /dev/null
@@ -1,6 +0,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/. -->
-<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"/>
-</svg>
deleted file mode 100644
--- a/browser/themes/shared/incontentprefs/help.svg
+++ /dev/null
@@ -1,7 +0,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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 2a6 6 0 1 0 .01 12.01A6 6 0 0 0 8 2m0 13A7 7 0 0 1 8 1a7 7 0 0 1 0 14"/>
-  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 10.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5m2.82-5.6A2.84 2.84 0 0 0 8 3.13C6.25 3.13 5.12 4.25 5.12 6a.88.88 0 0 0 1.75 0c0-1 .6-1.13 1.13-1.13.64 0 1.03.38 1.13.75.1.39-.08.75-.53 1.01C7.35 7.38 7.09 8.52 7.13 9v.34a.88.88 0 0 0 1.75 0v-.37c0-.05.01-.48.6-.83 1.13-.66 1.65-1.83 1.34-2.98"/>
-</svg>
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -621,17 +621,17 @@ separator.thin:not([orient="vertical"]) 
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
 .help-button {
   position: fixed;
   left: 0;
   bottom: 36px;
-  background-image: url("chrome://browser/skin/preferences/in-content-new/help.svg");
+  background-image: url("chrome://global/skin/icons/help.svg");
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.8;
   font-size: 13px;
   line-height: 16px;
   height: 16px;
   background-position: 8px;
   padding-inline-start: 38px;
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -91,17 +91,16 @@
 #else
   skin/classic/browser/panel-icon-magnifier.svg                (../shared/panel-icon-magnifier.svg)
 #endif
   skin/classic/browser/panel-icon-retry.svg                    (../shared/panel-icon-retry.svg)
   skin/classic/browser/preferences/in-content-new/face-sad.svg     (../shared/incontentprefs/face-sad.svg)
   skin/classic/browser/preferences/in-content-new/face-smile.svg   (../shared/incontentprefs/face-smile.svg)
   skin/classic/browser/preferences/in-content-new/fxa-avatar.svg   (../shared/incontentprefs/fxa-avatar.svg)
   skin/classic/browser/preferences/in-content-new/general.svg      (../shared/incontentprefs/general.svg)
-  skin/classic/browser/preferences/in-content-new/help.svg         (../shared/incontentprefs/help.svg)
   skin/classic/browser/preferences/in-content-new/logo-android.svg (../shared/incontentprefs/logo-android.svg)
   skin/classic/browser/preferences/in-content-new/logo-ios.svg     (../shared/incontentprefs/logo-ios.svg)
   skin/classic/browser/preferences/in-content-new/no-search-results.svg       (../shared/incontentprefs/no-search-results.svg)
   skin/classic/browser/preferences/in-content-new/privacy-security.svg        (../shared/incontentprefs/privacy-security.svg)
   skin/classic/browser/preferences/in-content-new/privacy.css      (../shared/incontentprefs/privacy.css)
   skin/classic/browser/preferences/in-content-new/search-arrow-indicator.svg  (../shared/incontentprefs/search-arrow-indicator.svg)
   skin/classic/browser/preferences/in-content-new/search.css       (../shared/incontentprefs/search.css)
   skin/classic/browser/preferences/in-content-new/search.svg       (../shared/incontentprefs/search.svg)
@@ -147,17 +146,16 @@
   skin/classic/browser/email-link.svg                 (../shared/icons/email-link.svg)
   skin/classic/browser/feed.svg                       (../shared/icons/feed.svg)
   skin/classic/browser/find.svg                       (../shared/icons/find.svg)
   skin/classic/browser/forget.svg                     (../shared/icons/forget.svg)
   skin/classic/browser/forward.svg                    (../shared/icons/forward.svg)
   skin/classic/browser/fullscreen.svg                 (../shared/icons/fullscreen.svg)
   skin/classic/browser/fullscreen-enter.svg           (../shared/icons/fullscreen-enter.svg)
   skin/classic/browser/fullscreen-exit.svg            (../shared/icons/fullscreen-exit.svg)
-  skin/classic/browser/help.svg                       (../shared/icons/help.svg)
   skin/classic/browser/history.svg                    (../shared/icons/history.svg)
   skin/classic/browser/home.svg                       (../shared/icons/home.svg)
   skin/classic/browser/library.svg                    (../shared/icons/library.svg)
   skin/classic/browser/library-bookmark-animation.svg (../shared/icons/library-bookmark-animation.svg)
   skin/classic/browser/link.svg                       (../shared/icons/link.svg)
   skin/classic/browser/mail.svg                       (../shared/icons/mail.svg)
   skin/classic/browser/menu.svg                       (../shared/icons/menu.svg)
   skin/classic/browser/new-tab.svg                    (../shared/icons/new-tab.svg)
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -30,17 +30,17 @@
 }
 
 #appMenu-find-button,
 #panelMenu_searchBookmarks {
   list-style-image: url(chrome://browser/skin/find.svg);
 }
 
 #appMenu-help-button {
-  list-style-image: url(chrome://browser/skin/help.svg);
+  list-style-image: url(chrome://global/skin/icons/help.svg);
 }
 
 #appMenu-cut-button {
   list-style-image: url(chrome://browser/skin/edit-cut.svg);
 }
 
 #appMenu-copy-button {
   list-style-image: url(chrome://browser/skin/edit-copy.svg);
--- 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/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -92,19 +92,16 @@ toolkit.jar:
   skin/classic/global/icons/warning-64.png                           (icons/warning-64.png)
   skin/classic/global/icons/warning-large.png                        (icons/warning-large.png)
   skin/classic/global/icons/error-16.png                             (icons/error-16.png)
   skin/classic/global/icons/error-64.png                             (icons/error-64.png)
   skin/classic/global/icons/question-16.png                          (icons/question-16.png)
   skin/classic/global/icons/question-32.png                          (icons/question-32.png)
   skin/classic/global/icons/question-64.png                          (icons/question-64.png)
   skin/classic/global/icons/sslWarning.png                           (icons/sslWarning.png)
-  skin/classic/global/notification/error-icon.png                    (notification/error-icon.png)
-  skin/classic/global/notification/info-icon.png                     (notification/info-icon.png)
-  skin/classic/global/notification/warning-icon.png                  (notification/warning-icon.png)
 * skin/classic/global/in-content/common.css                          (in-content/common.css)
 * skin/classic/global/in-content/info-pages.css                      (in-content/info-pages.css)
   skin/classic/global/splitter/dimple.png                            (splitter/dimple.png)
   skin/classic/global/splitter/grip-bottom.gif                       (splitter/grip-bottom.gif)
   skin/classic/global/splitter/grip-top.gif                          (splitter/grip-top.gif)
   skin/classic/global/splitter/grip-left.gif                         (splitter/grip-left.gif)
   skin/classic/global/splitter/grip-right.gif                        (splitter/grip-right.gif)
   skin/classic/global/toolbar/spring.png                             (toolbar/spring.png)
--- 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 {
deleted file mode 100644
index 54cc7e663b95362b82555f65ae3ebb609e45e928..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 55d45f165cd8473bd7cde5b2ce0d871b4f154f07..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 13cf79d6df563d7d69bf05bd9c6f2b22e9e57bc3..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- 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" fill-opacity="context-fill-opacity" 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"/>
+</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"/>
+</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
@@ -23,26 +23,28 @@ toolkit.jar:
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
   skin/classic/global/datetimepopup.css                    (../../shared/datetimepopup.css)
   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,78 @@
+/* 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 0 3px;
+  padding-inline-start: 12px;
+  background: -moz-dialog;
+  color: -moz-dialogText;
+  border-color: ThreeDLightShadow;
+  border-style: solid;
+  border-width: 1px 0;
+  text-shadow: none;
+}
+
+notificationbox[notificationside="top"] > notification {
+  border-top-style: none;
+}
+
+notificationbox[notificationside="bottom"] > notification {
+  border-bottom-style: none;
+}
+
+notification[type="warning"],
+notification[type="critical"] {
+  border-color: rgba(12, 12, 13, 0.2);
+}
+
+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;
+}
+
+/* Close button needs to be clickable from the edge of the window */
+.messageCloseButton > .toolbarbutton-icon {
+  margin-inline-end: 12px;
+}
+
--- 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;
 }