Bug 1551202 - Support dark theme at HTML about:addons r=jaws
☠☠ backed out by c07f5967e0fc ☠ ☠
authorRob Wu <rob@robwu.nl>
Fri, 17 May 2019 16:58:02 +0000
changeset 536282 5f5daca84fbeb06f7df1569b18ad49da977b024e
parent 536281 f5f6979aa22ac36f8caefbed781a6d97788d5f89
child 536283 1454297813951e8531bed6673e41fb38425b9def
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [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 - Support dark theme at HTML about:addons r=jaws Most colors have been replaced with a variable that has the same color value. The exception is the border color at the add-on details. `--grey-90-a20` was replaced with `--in-content-box-border-color`, whose value is `--grey-90-a30`. This is close enough. Differential Revision: https://phabricator.services.mozilla.com/D31508
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/abuse-report-panel.css
toolkit/mozapps/extensions/content/message-bar.css
toolkit/mozapps/extensions/content/panel-item.css
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -211,26 +211,26 @@ recommended-addon-card .addon-descriptio
   margin-top: 30px;
 }
 
 .discopane-privacy-policy-link {
   font-size: small;
 }
 
 addon-details {
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
 }
 
 .addon-detail-description {
   margin: 16px 0;
 }
 
 .addon-detail-contribute {
   padding: var(--card-padding);
-  border: 1px solid var(--grey-90-a20);
+  border: 1px solid var(--in-content-box-border-color);
   border-radius: var(--panel-border-radius);
   margin-bottom: var(--card-padding);
   display: flex;
   flex-direction: column;
 }
 
 .addon-detail-contribute > label {
   font-style: italic;
@@ -247,25 +247,25 @@ addon-details {
   margin-bottom: 0;
   align-self: flex-end;
 }
 
 .addon-detail-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid var(--grey-90-a20);
+  border-top: 1px solid var(--in-content-box-border-color);
   margin: 0 calc(var(--card-padding) * -1);
   padding: var(--card-padding);
-  color: var(--grey-90);
+  color: var(--in-content-text-color);
 }
 
 .addon-detail-row.addon-detail-help-row {
   display: block;
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
   padding-top: 4px;
   padding-bottom: var(--card-padding);
   border: none;
 }
 
 .addon-detail-row-has-help,
 .addon-detail-row:last-of-type {
   padding-bottom: 0;
--- a/toolkit/mozapps/extensions/content/abuse-report-panel.css
+++ b/toolkit/mozapps/extensions/content/abuse-report-panel.css
@@ -26,17 +26,17 @@
 
 /* Ensure that the document (embedded in the XUL about:addons using a
    XUL browser) has a transparent background */
 html {
   background-color: transparent;
 }
 
 .modal-overlay-outer {
-  background: rgba(12, 12, 13, 0.6);
+  background: var(--grey-90-a60);
   width: 100%;
   height: 100%;
   position: fixed;
   z-index: -1;
 }
 
 .modal-panel-container {
   padding-top: var(--modal-panel-margin-top);
@@ -97,17 +97,17 @@ button.abuse-report-close-icon:hover:act
 }
 
 .abuse-report-contents,
 .abuse-report-contents > hr {
   width: 100%;
 }
 
 .abuse-report-note {
-  color: var(--grey-50);
+  color: var(--in-content-deemphasized-text);
   font-size: var(--note-font-size);
   font-weight: var(--note-font-weight);
   line-height: var(--line-height);
 }
 
 .abuse-report-subtitle {
   font-size: var(--subtitle-font-size);
   font-weight: var(--subtitle-font-weight);
--- a/toolkit/mozapps/extensions/content/message-bar.css
+++ b/toolkit/mozapps/extensions/content/message-bar.css
@@ -3,17 +3,17 @@
   --warn-icon-url: url("chrome://global/skin/icons/warning.svg");
   --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([type=warning]) {
   background-color: var(--yellow-50);
   color: var(--yellow-90);
 }
 
 :host([type=success]) {
   background-color: #30e60b;
   color: #003706;
@@ -22,18 +22,18 @@
 :host([type=error]) {
   background: #d70022;
   color: #ffffff;
 }
 
 :host {
   border-radius: 4px;
   /* Colors used by default, and for [type=generic] message bars.*/
-  background-color: var(--grey-20);
-  color: var(--grey-90);
+  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 {
--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -1,10 +1,11 @@
 button {
   background-color: transparent;
+  color: inherit;
   background-image: var(--icon);
   background-position: 16px center;
   background-repeat: no-repeat;
   background-size: 16px;
   border: none;
   position: relative;
   display: block;
   font-size: inherit;