Bug 1443396 - Use colours that contrast well on about:memory r=jaws,snorp
authorPaul Bone <pbone@mozilla.com>
Mon, 23 Apr 2018 12:40:09 +1000
changeset 468737 9b20ccf5448b55feef48f9830268b7acf53eac75
parent 468736 42781c5977453fc4c1ac9538c9eef240456b3e10
child 468738 0819fc14fc57f1a10a9aaf179882a532ac2f6835
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,56 @@ 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;
+}
+
 .accuracyWarning {
-  color: #d22;
 }
 
 .badInputWarning {
-  color: #f00;
 }
 
 .treeline {
-  color: #888;
+  color: -moz-FieldText;
+  opacity: 0.5;
+}
+
+/*
+ * 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 +133,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,66 @@ 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;
+}
+
 .accuracyWarning {
-  color: #d22;
 }
 
 .badInputWarning {
-  color: #f00;
 }
 
 .treeline {
-  color: #888;
+  color: -moz-FieldText;
+  opacity: 0.5;
+}
+
+/*
+ * 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 +144,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;
 }