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 649084 3bff68f93884bc50509ea99f1819aa985582034b
parent 648905 4e2421fbfbd36829df559ec155c6f377e3431274
child 726998 82264cb01d9aad3e33005a54dce7e47d444cde12
push id74946
push userbmo:ntim.bugs@gmail.com
push dateFri, 18 Aug 2017 15:34:07 +0000
reviewersdao
bugs1363056
milestone57.0a1
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
@@ -626,17 +626,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
@@ -103,17 +103,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)
@@ -159,17 +158,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..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 55d45f165cd8473bd7cde5b2ce0d871b4f154f07..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 13cf79d6df563d7d69bf05bd9c6f2b22e9e57bc3..0000000000000000000000000000000000000000
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;
 }