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.

--HG--
extra : rebase_source : f916aac0bb07c3a75ab45ece3fd58d1cdcf8bf46
extra : source : a78bc7ff3de5a0ea4aea060731253fed63a59d00

mobile/android/themes/core/aboutMemory.css

@@ -10,6 +10,7 @@
 
 html {
   background: -moz-Dialog;
+  color: -moz-DialogText;
   font: message-box;
 }
 
@@ -31,6 +32,7 @@ div.section {
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
 }
 
 div.opsRow {
@@ -40,6 +42,7 @@ div.opsRow {
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
   display: inline-block;
 }
 
@@ -65,25 +68,38 @@ h1 {
 }
 
 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 {
@@ -92,14 +108,6 @@ h2 {
 .mrSep {
 }
 
-.mrName {
-  color: #004;
-}
-
-.mrNote {
-  color: #604;
-}
-
 .hasKids {
   cursor: pointer;
 }
@@ -130,11 +138,6 @@ h2 {
   display: none;
 }
 
-.invalid {
-  color: #fff;
-  background-color: #f00;
-}
-
 /* Mobile-specific parts go here. */
 
 /* buttons are different sizes and overlapping without this */

toolkit/components/aboutmemory/content/aboutMemory.css

@@ -10,6 +10,7 @@
 
 html {
   background: -moz-Dialog;
+  color: -moz-DialogText;
   font: message-box;
 }
 
@@ -31,6 +32,7 @@ div.section {
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
 }
 
 div.opsRow {
@@ -40,6 +42,7 @@ div.opsRow {
   border: 1px solid ThreeDShadow;
   border-radius: 10px;
   background: -moz-Field;
+  color: -moz-FieldText;
   display: inline-block;
 }
 
@@ -66,7 +69,6 @@ h1 {
 }
 
 h2 {
-  background: #ddd;
   padding-left: .1em;
 }
 
@@ -80,21 +82,35 @@ a.upDownArrow {
   -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 {
@@ -103,14 +119,6 @@ a.upDownArrow {
 .mrSep {
 }
 
-.mrName {
-  color: #004;
-}
-
-.mrNote {
-  color: #604;
-}
-
 .hasKids {
   cursor: pointer;
 }
@@ -141,11 +149,6 @@ a.upDownArrow {
   display: none;
 }
 
-.invalid {
-  color: #fff;
-  background-color: #f00;
-}
-
 /* Desktop-specific parts go here. */
 
 .hasKids:hover {