Bug 1565896 - Change about:performance energy bar color and column sort arrow fill color for better contrast in dark mode r=dao
authorKestrel <ke5trel@protonmail.com>
Tue, 16 Jul 2019 08:40:41 +0000
changeset 543488 70e6db69c88f316792e5276bb60d502a6a39c047
parent 543487 fb3217bef0ecf64076980aeef763d386d680ccb4
child 543489 e7998a2833e1b8db0ef949961391728bafe3b240
push id11848
push userffxbld-merge
push dateMon, 26 Aug 2019 19:26:25 +0000
treeherdermozilla-beta@9b31bfdfac10 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1565896
milestone70.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 1565896 - Change about:performance energy bar color and column sort arrow fill color for better contrast in dark mode r=dao Differential Revision: https://phabricator.services.mozilla.com/D38011
toolkit/components/aboutperformance/content/aboutPerformance.css
--- a/toolkit/components/aboutperformance/content/aboutPerformance.css
+++ b/toolkit/components/aboutperformance/content/aboutPerformance.css
@@ -123,17 +123,17 @@ tr:-moz-any([selected], :hover) > td > .
 
 #dispatch-thead > tr > td {
   border: none;
   background-color: var(--in-content-button-background);
 }
 #dispatch-thead > tr > td:not(:first-child) {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
+  border-image: linear-gradient(transparent 0%, transparent 20%, var(--in-content-box-border-color) 20%, var(--in-content-box-border-color) 80%, transparent 80%, transparent 100%) 1 1;
   border-bottom: 1px solid var(--in-content-border-color);
 }
 td {
   padding: 5px 10px;
   min-height: 2em;
   color: var(--in-content-text-color);
   max-width: 70vw;
   overflow: hidden;
@@ -212,26 +212,30 @@ td {
   background-repeat: no-repeat;
   background-position: right 4px center;
 }
 .clickable:dir(rtl) {
   background-position: left 4px center;
 }
 .asc {
   background-image: url(chrome://global/skin/icons/arrow-up-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 .desc {
   background-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 #dispatch-thead > tr > td.clickable:hover {
   background-color: var(--in-content-button-background-hover);
 }
 #dispatch-thead > tr > td.clickable:active {
   background-color: var(--in-content-button-background-active);
 }
 
 .energy-impact {
   --bar-width: 0;
-  background: linear-gradient(to right, rgb(182, 211, 252) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
+  background: linear-gradient(to right, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
 }
 .energy-impact:dir(rtl) {
-  background: linear-gradient(to left, rgb(182, 211, 252) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
+  background: linear-gradient(to left, var(--blue-40) calc(var(--bar-width) * 1%), transparent calc(var(--bar-width) * 1%));
 }