Bug 1544111 - Fix contrast of various elements in HTML about:addons in dark mode. r=dao
☠☠ backed out by 7e40e33da3da ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 25 Apr 2019 13:29:15 +0000
changeset 530124 1d5e9d6d4dffe8de0d1f110f78f12b5002af4b7b
parent 530123 00fcbf4c4aac4f492e7734d0eac68b25f50e79ba
child 530125 d4f22be5eb413a9d2cb5eb610d6f9c0cee6039cf
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1544111
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 1544111 - Fix contrast of various elements in HTML about:addons in dark mode. r=dao Differential Revision: https://phabricator.services.mozilla.com/D28378
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/panel-item.css
toolkit/mozapps/extensions/content/panel-list.css
toolkit/mozapps/extensions/content/shortcuts.css
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -48,41 +48,42 @@ addon-list .addon.card {
   object-fit: cover;
 }
 
 .card-heading-icon {
   flex-shrink: 0;
   width: var(--addon-icon-size);
   height: var(--addon-icon-size);
   margin-inline-end: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .card-contents {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
 .card-actions {
   flex-shrink: 0;
 }
 
 .addon-name {
   font-size: 16px;
   font-weight: 600;
-  color: var(--grey-90);
   line-height: 22px;
   /* Subtract the top line-height so the text and icon align at the top. */
   margin-top: -3px;
 }
 
 .addon-description {
   font-size: 14px;
   line-height: 20px;
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
   font-weight: 400;
 }
 
 /* Prevent the content from wrapping unless expanded. */
 addon-card:not([expanded]) .card-contents {
   /* Card padding times 4: 2 times for card, 1 between icon and content,
    * 1 for the ... button. */
   width: calc(var(--section-width) - var(--card-padding) * 4 - var(--addon-icon-size));
@@ -98,20 +99,16 @@ addon-card:not([expanded]) .addon-descri
 
 .more-options-menu {
   position: relative;
   /* Add some negative margin to account for the button's padding */
   margin-top: -10px;
   margin-inline-end: -8px;
 }
 
-addon-details {
-  color: var(--grey-60);
-}
-
 .addon-detail-description {
   margin: 16px 0;
 }
 
 .addon-detail-contribute {
   padding: var(--card-padding);
   border: 1px solid var(--grey-90-a20);
   border-radius: var(--panel-border-radius);
@@ -189,28 +186,30 @@ addon-details {
 }
 
 button[action="more-options"] {
   min-width: auto;
   min-height: auto;
   width: 24px;
   height: 24px;
   margin: 0;
+  -moz-context-properties: fill;
+  fill: currentColor;
   background: url("chrome://global/skin/icons/more.svg") no-repeat center center;
 }
 
 panel-item[action="remove"] {
   -moz-context-properties: fill;
   fill: currentColor;
   --icon: url("chrome://global/skin/icons/delete.svg");
 }
 
 panel-item-separator {
   display: block;
   height: 1px;
-  background: var(--panel-border-color);
+  background: var(--in-content-box-border-color);
   padding: 0;
   margin: 6px 0;
 }
 
 panel-item-separator[hidden] {
   display: none;
 }
--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -1,9 +1,10 @@
 button {
+  color: inherit;
   background-color: transparent;
   background-image: var(--icon);
   background-position: 16px center;
   background-repeat: no-repeat;
   background-size: 16px;
   border: none;
   display: block;
   font-size: inherit;
--- a/toolkit/mozapps/extensions/content/panel-list.css
+++ b/toolkit/mozapps/extensions/content/panel-list.css
@@ -4,17 +4,17 @@
 
 :host([showing]) {
   visibility: hidden;
 }
 
 :host {
   position: absolute;
   background: var(--in-content-box-background);
-  border: 1px solid var(--panel-border-color);
+  border: 1px solid var(--in-content-box-border-color);
   border-radius: var(--panel-border-radius);
   padding: 6px 0;
   margin-bottom: 16px;
   box-shadow: var(--shadow-30);
   min-width: 12em;
   z-index: 1;
   white-space: nowrap;
 }
@@ -39,17 +39,17 @@
   margin: 0;
   padding: 0;
 }
 
 .arrow {
   width: 18px;
   height: 9px;
   -moz-context-properties: fill, stroke;
-  stroke: var(--panel-border-color);
+  stroke: var(--in-content-box-border-color);
   fill: var(--in-content-box-background);
   background: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
   position: absolute;
 }
 
 :host([valign="bottom"]) > .arrow.bottom,
 :host([valign="top"]) > .arrow.top {
   display: none;
--- a/toolkit/mozapps/extensions/content/shortcuts.css
+++ b/toolkit/mozapps/extensions/content/shortcuts.css
@@ -15,16 +15,18 @@
 .shortcut.card:hover {
   box-shadow: var(--card-shadow);
 }
 
 .card-heading-icon {
   width: 24px;
   height: 24px;
   margin-inline-end: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .card-heading {
   display: flex;
   font-weight: 600;
 }
 
 .shortcuts-empty-label {
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -5,22 +5,23 @@
 %endif
 @namespace html "http://www.w3.org/1999/xhtml";
 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 *|*:root {
   --in-content-page-color: #0c0c0d;
   --in-content-page-background: #f9f9fa;
   --in-content-text-color: var(--grey-90);
+  --in-content-deemphasized-text: var(--grey-60);
   --in-content-selected-text: #fff;
   --in-content-box-background: #fff;
   --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
   --in-content-box-background-hover: #ededf0; /* grey 20 */
   --in-content-box-background-active: #d7d7db; /* grey 30 */
-  --in-content-box-border-color: var(--grey-90-a40);
+  --in-content-box-border-color: var(--grey-90-a30);
   --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
   --in-content-border-focus: #0a84ff;
   --in-content-border-hover: var(--grey-90-a50);
   --in-content-border-active: var(--blue-50);
   --in-content-border-active-shadow: var(--blue-50-a30);
   --in-content-border-invalid: var(--red-50);
@@ -43,31 +44,31 @@
   --in-content-button-background-active: var(--grey-90-a30);
   --in-content-primary-button-background: var(--blue-60);
   --in-content-primary-button-background-hover: var(--blue-70);
   --in-content-primary-button-background-active: var(--blue-80);
   --in-content-table-background: #ebebeb;
   --in-content-table-border-dark-color: #d1d1d1;
   --in-content-table-header-background: #0a84ff;
 
-  --panel-border-color: var(--grey-90-a20);
   --panel-border-radius: 2px; /* This is overridden on Windows */
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
   --blue-40: #45a1ff;
   --blue-40-a10: rgb(69, 161, 255, 0.1);
   --blue-50: #0a84ff;
   --blue-50-a30: rgba(10, 132, 255, 0.3);
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
+  --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-a40: rgba(12, 12, 13, 0.4);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
@@ -90,16 +91,17 @@
 }
 
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
 @media (prefers-color-scheme: dark) {
   :root {
     --in-content-page-background: #2A2A2E;
     --in-content-page-color: rgb(249, 249, 250);
     --in-content-text-color: var(--in-content-page-color);
+    --in-content-deemphasized-text: var(--grey-40);
     --in-content-box-background: #202023;
     --in-content-box-background-hover: rgba(249,249,250,0.15);
     --in-content-box-background-active: rgba(249,249,250,0.2);
     --in-content-box-background-odd: rgba(249,249,250,0.05);
 
     --in-content-border-color: rgba(249,249,250,0.2);
     --in-content-border-hover: rgba(249,249,250,0.3);
     --in-content-box-border-color: rgba(249,249,250,0.2);