Bug 1443396 - Use colours that contrast well on about:memory r=jaws,snorp
☠☠ backed out by 15bc0efa7203 ☠ ☠
authorPaul Bone <pbone@mozilla.com>
Wed, 07 Mar 2018 16:41:13 +1100
changeset 468083 a78bc7ff3de5a0ea4aea060731253fed63a59d00
parent 468082 525f1fb9501e36f69a8d5b7fbfbeb62335ec6d73
child 468084 268e499a9da807f3eb9a11ae14a10c68184b5b77
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, snorp
bugs1443396
milestone61.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 1443396 - Use colours that contrast well on about:memory r=jaws,snorp The about:memory page specified some colours using constants and others using variables whose values can change. If those variables changed, for example due to the desktop toolkit using a dark theme, then it could create poor contrast with the constants in these CSS files (desktop & mobile). This change ensures that only the Mozilla system colour extensions and Mozilla colour preference extensions colours are used. Creating fore/back-ground combinations that hopefully contrast well regardless of the desktop theme.
mobile/android/themes/core/aboutMemory.css
toolkit/components/aboutmemory/content/aboutMemory.css
--- a/mobile/android/themes/core/aboutMemory.css
+++ b/mobile/android/themes/core/aboutMemory.css
@@ -5,16 +5,17 @@
 /*
  * The version used for desktop is located at
  * toolkit/components/aboutmemory/content/aboutMemory.css.
  * Mobile-specific stuff is at the bottom of this file.
  */
 
 html {
   background: -moz-Dialog;
+  color: -moz-DialogText;
   font: message-box;
 }
 
 body {
   padding: 0 2em;
   margin: 0;
   min-width: 45em;
   margin: auto;
@@ -26,25 +27,27 @@ div.ancillary {
 }
 
 div.section {
   padding: 2em;
   margin: 1em 0em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
 }
 
 div.opsRow {
   padding: 0.5em;
   margin-right: 0.5em;
   margin-top: 0.5em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
   display: inline-block;
 }
 
 div.opsRowLabel {
   display: block;
   margin-bottom: 0.2em;
   font-weight: bold;
 }
@@ -60,51 +63,62 @@ div.non-verbose pre.entries {
 }
 
 h1 {
   padding: 0;
   margin: 0;
 }
 
 h2 {
-  background: #ddd;
   padding-left: .1em;
 }
 
+.accuracyWarning, .badInputWarning, .invalid {
+  /*
+   * Technically this should be used with the default background colour,
+   * instead we're using the default field background colour,
+   * I hope this will be okay.
+   */
+  color: -moz-activehyperlinktext;
+}
+
+/*
+ * Very the colour a little bit idealy without changing how it contrasts
+ * with the background too much
+ */
 .accuracyWarning {
-  color: #d22;
+  filter: hue-rotate(30);
 }
 
 .badInputWarning {
-  color: #f00;
+  filter: hue-rotate(-30);
 }
 
 .treeline {
-  color: #888;
+  color: -moz-FieldText;
+  opacity: 50%;
+}
+
+/*
+ * We might like to style these but cannot find a colour that always
+ * contrasts with the background colour.
+ */
+.mrValue, .mrName, .mrNote {
 }
 
 .mrValue {
   font-weight: bold;
-  color: #400;
 }
 
 .mrPerc {
 }
 
 .mrSep {
 }
 
-.mrName {
-  color: #004;
-}
-
-.mrNote {
-  color: #604;
-}
-
 .hasKids {
   cursor: pointer;
 }
 
 .hasKids:hover {
   text-decoration: underline;
 }
 
@@ -125,21 +139,16 @@ h2 {
 .debug {
   font-size: 80%;
 }
 
 .hidden {
   display: none;
 }
 
-.invalid {
-  color: #fff;
-  background-color: #f00;
-}
-
 /* Mobile-specific parts go here. */
 
 /* buttons are different sizes and overlapping without this */
 button {
   margin: 1%;
   padding: 2%;
 }
 
--- a/toolkit/components/aboutmemory/content/aboutMemory.css
+++ b/toolkit/components/aboutmemory/content/aboutMemory.css
@@ -5,16 +5,17 @@
 /*
  * The version used for mobile is located at
  * mobile/android/themes/core/aboutMemory.css.
  * Desktop-specific stuff is at the bottom of this file.
  */
 
 html {
   background: -moz-Dialog;
+  color: -moz-DialogText;
   font: message-box;
 }
 
 body {
   padding: 0 2em;
   margin: 0;
   min-width: 45em;
   margin: auto;
@@ -26,25 +27,27 @@ div.ancillary {
 }
 
 div.section {
   padding: 2em;
   margin: 1em 0em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
 }
 
 div.opsRow {
   padding: 0.5em;
   margin-right: 0.5em;
   margin-top: 0.5em;
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
   display: inline-block;
 }
 
 div.opsRowLabel {
   display: block;
   margin-bottom: 0.2em;
   font-weight: bold;
 }
@@ -61,61 +64,72 @@ div.non-verbose pre.entries {
 
 h1 {
   padding: 0;
   margin: 0;
   display: inline;  /* allow subsequent text to the right of the heading */
 }
 
 h2 {
-  background: #ddd;
   padding-left: .1em;
 }
 
 h3 {
   display: inline;  /* allow subsequent text to the right of the heading */
 }
 
 a.upDownArrow {
   font-size: 130%;
   text-decoration: none;
   -moz-user-select: none;  /* no need to include this when cutting+pasting */
 }
 
+.accuracyWarning, .badInputWarning, .invalid {
+  /*
+   * Technically this should be used with the default background colour,
+   * instead we're using the default field background colour,
+   * I hope this will be okay.
+   */
+  color: -moz-activehyperlinktext;
+}
+
+/*
+ * Very the colour a little bit idealy without changing how it contrasts
+ * with the background too much
+ */
 .accuracyWarning {
-  color: #d22;
+  filter: hue-rotate(30);
 }
 
 .badInputWarning {
-  color: #f00;
+  filter: hue-rotate(-30);
 }
 
 .treeline {
-  color: #888;
+  color: -moz-FieldText;
+  opacity: 50%;
+}
+
+/*
+ * We might like to style these but cannot find a colour that always
+ * contrasts with the background colour.
+ */
+.mrValue, .mrName, .mrNote {
 }
 
 .mrValue {
   font-weight: bold;
-  color: #400;
 }
 
 .mrPerc {
 }
 
 .mrSep {
 }
 
-.mrName {
-  color: #004;
-}
-
-.mrNote {
-  color: #604;
-}
-
 .hasKids {
   cursor: pointer;
 }
 
 .hasKids:hover {
   text-decoration: underline;
 }
 
@@ -136,19 +150,14 @@ a.upDownArrow {
 .debug {
   font-size: 80%;
 }
 
 .hidden {
   display: none;
 }
 
-.invalid {
-  color: #fff;
-  background-color: #f00;
-}
-
 /* Desktop-specific parts go here. */
 
 .hasKids:hover {
   text-decoration: underline;
 }