From 02e4b112630e2356cc6c645c65f2fb93803f88a5 Mon Sep 17 00:00:00 2001 From: Heather Arthur Date: Mon, 1 Oct 2012 19:34:05 +0300 Subject: [PATCH] Bug 789364 - Light theme for markup panel, orion, and rule view, r=paul --- browser/devtools/markupview/markup-view.xhtml | 11 ++--- .../themes/gnomestripe/devtools/common.css | 30 +++++++++++++ .../gnomestripe/devtools/csshtmltree.css | 4 +- .../gnomestripe/devtools/markup-view.css | 21 ++------- browser/themes/gnomestripe/devtools/orion.css | 43 ++++++++----------- browser/themes/pinstripe/devtools/common.css | 30 +++++++++++++ .../themes/pinstripe/devtools/csshtmltree.css | 4 +- .../themes/pinstripe/devtools/markup-view.css | 21 ++------- browser/themes/pinstripe/devtools/orion.css | 43 ++++++++----------- browser/themes/winstripe/devtools/common.css | 30 +++++++++++++ .../themes/winstripe/devtools/csshtmltree.css | 4 +- .../themes/winstripe/devtools/markup-view.css | 21 ++------- browser/themes/winstripe/devtools/orion.css | 43 ++++++++----------- 13 files changed, 168 insertions(+), 137 deletions(-) diff --git a/browser/devtools/markupview/markup-view.xhtml b/browser/devtools/markupview/markup-view.xhtml index a1aba6d033b7..3d0893add337 100644 --- a/browser/devtools/markupview/markup-view.xhtml +++ b/browser/devtools/markupview/markup-view.xhtml @@ -9,6 +9,7 @@ +
@@ -17,19 +18,19 @@
      • - <> + <> - + - + 
      
           
 
-    
+    
       <!--
      -->
           
 
-    </>
+    </>
    
    
      
      
      
diff --git a/browser/themes/gnomestripe/devtools/common.css b/browser/themes/gnomestripe/devtools/common.css
index c0a1779a6f72..b1ea67f6ca7b 100644
--- a/browser/themes/gnomestripe/devtools/common.css
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -174,3 +174,33 @@
   -moz-margin-end: -3px;
   position: relative;
 }
+
+/* Theme */
+
+.devtools-theme-background {
+  background-color: white;
+}
+
+.devtools-theme-comment {
+  color: hsl(90,2%,46%); /* grey */
+}
+
+.devtools-theme-keyword {
+  color: hsl(276,44%,45%); /* purple */
+}
+
+.devtools-theme-string {
+  color: hsl(72,100%,27%); /* green */
+}
+
+.devtools-theme-tagname {
+  color: hsl(208,81%,21%); /* dark blue */
+}
+
+.devtools-theme-attrname {
+  color: hsl(208,56%,40%); /* blue */
+}
+
+.devtools-theme-attrvalue {
+  color: hsl(24,85%,39%); /* orange */
+}
diff --git a/browser/themes/gnomestripe/devtools/csshtmltree.css b/browser/themes/gnomestripe/devtools/csshtmltree.css
index de47b3d37b2b..f2196380fe67 100644
--- a/browser/themes/gnomestripe/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/devtools/csshtmltree.css
@@ -144,7 +144,7 @@
 }
 
 .ruleview-rule-source {
-  color: hsl(121,42%,43%); /* green */
+  color: hsl(90,2%,46%); /* grey */
   -moz-padding-start: 5px;
   cursor: pointer;
   text-align: right;
@@ -231,7 +231,7 @@
 
 .ruleview-propertyname {
   padding: 1px 0;
-  color: hsl(210,100%,38%); /* blue */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .ruleview-propertyvalue {
diff --git a/browser/themes/gnomestripe/devtools/markup-view.css b/browser/themes/gnomestripe/devtools/markup-view.css
index ef3483d2db2a..9e80d56f09b6 100644
--- a/browser/themes/gnomestripe/devtools/markup-view.css
+++ b/browser/themes/gnomestripe/devtools/markup-view.css
@@ -9,32 +9,19 @@
 
 body {
   font: message-box;
-  background-color: #131c26;
-  color: #8fa1b2;
+  color: hsl(0,0%,50%);
 }
 
-.tagname {
-  color: #a673bf;
-}
-
-.attrname {
-  color: #b26b47;
-}
-
-.attrvalue {
-  color: #3689b2;
+.text {
+  color: black;
 }
 
 .newattr {
   cursor: pointer;
 }
 
-.comment {
-  color: #5c6773;
-}
-
 .selected {
-  background-color: #253847;
+  background-color: hsl(0,0%,90%);
 }
 
 /* Give some padding to focusable elements to match the editor input
diff --git a/browser/themes/gnomestripe/devtools/orion.css b/browser/themes/gnomestripe/devtools/orion.css
index ae504a566a25..351a0bdc955a 100644
--- a/browser/themes/gnomestripe/devtools/orion.css
+++ b/browser/themes/gnomestripe/devtools/orion.css
@@ -3,24 +3,24 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .viewContainer {
-  background: #cddae5; /* This will be seen as the continuation of the ruler */
+  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
   font-family: monospace;
   font-size: inherit; /* inherit browser's default monospace font size */
 }
 
 .view {
   color: black; /* Default text color */
-  background: #f0f0ff; /* Background of the editor */
+  background: white; /* Background of the editor */
   padding-left: 4px;
 }
 
 .readonly > .view {
-  background: #f0f0ff;
+  background: #fdfefd; /* super light green */
 }
 
 .ruler {
-  background: #cddae5;
-  color: #7a8a99;
+  background: hsl(0,0%,89%);
+  color: hsl(0,0%,55%);
 }
 .ruler.annotations {
   width: 16px;
@@ -105,16 +105,10 @@
   outline: 1px solid grey;
 }
 
-.token_singleline_comment {
-  color: #45a946; /* green */
-}
-
-.token_multiline_comment {
-  color: #45a946; /* green */
-}
-
-.token_doc_comment {
-  color: #45a946; /* green */
+.token_singleline_comment,
+.token_multiline_comment,
+.token_doc_comment  {
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .token_doc_html_markup {
@@ -131,12 +125,12 @@
 }
 
 .token_string {
-  color: #1e66b1; /* blue */
+  color: hsl(72,100%,27%); /* green */
   font-style: italic;
 }
 
 .token_keyword {
-  color: #dd0058; /* purple */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .token_space {
@@ -155,34 +149,33 @@
 
 .line_caret,
 .annotationLine.currentLine { /* Current line */
-  background: #dae2ee; /* lighter than the background */
+  background: hsl(208, 93%, 94%);
 }
 
 .readonly .line_caret,
 .readonly .annotationLine.currentLine {
-  background: #cddae5; /* a bit darker than the background */
+  background: hsl(208, 80%, 90%);
 }
 
 /* Styling for html syntax highlighting */
 .entity-name-tag {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .entity-other-attribute-name {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .punctuation-definition-comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .string-quoted {
-  color: #1e66b1; /* blue */
-  font-style: italic;
+  color: hsl(24,85%,39%); /* orange */
 }
 
 .invalid {
diff --git a/browser/themes/pinstripe/devtools/common.css b/browser/themes/pinstripe/devtools/common.css
index cef576e9b688..ec8dcb6ce96b 100644
--- a/browser/themes/pinstripe/devtools/common.css
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -189,3 +189,33 @@
   -moz-margin-end: -3px;
   position: relative;
 }
+
+/* Theme */
+
+.devtools-theme-background {
+  background-color: white;
+}
+
+.devtools-theme-comment {
+  color: hsl(90,2%,46%); /* grey */
+}
+
+.devtools-theme-keyword {
+  color: hsl(276,44%,45%); /* purple */
+}
+
+.devtools-theme-string {
+  color: hsl(72,100%,27%); /* green */
+}
+
+.devtools-theme-tagname {
+  color: hsl(208,81%,21%); /* dark blue */
+}
+
+.devtools-theme-attrname {
+  color: hsl(208,56%,40%); /* blue */
+}
+
+.devtools-theme-attrvalue {
+  color: hsl(24,85%,39%); /* orange */
+}
diff --git a/browser/themes/pinstripe/devtools/csshtmltree.css b/browser/themes/pinstripe/devtools/csshtmltree.css
index e787aa7a071c..cab007834754 100644
--- a/browser/themes/pinstripe/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/devtools/csshtmltree.css
@@ -146,7 +146,7 @@
 }
 
 .ruleview-rule-source {
-  color: hsl(121,42%,43%); /* green */
+  color: hsl(90,2%,46%); /* grey */
   -moz-padding-start: 5px;
   cursor: pointer;
   text-align: right;
@@ -233,7 +233,7 @@
 
 .ruleview-propertyname {
   padding: 1px 0;
-  color: hsl(210,100%,38%); /* blue */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .ruleview-propertyvalue {
diff --git a/browser/themes/pinstripe/devtools/markup-view.css b/browser/themes/pinstripe/devtools/markup-view.css
index ef3483d2db2a..9e80d56f09b6 100644
--- a/browser/themes/pinstripe/devtools/markup-view.css
+++ b/browser/themes/pinstripe/devtools/markup-view.css
@@ -9,32 +9,19 @@
 
 body {
   font: message-box;
-  background-color: #131c26;
-  color: #8fa1b2;
+  color: hsl(0,0%,50%);
 }
 
-.tagname {
-  color: #a673bf;
-}
-
-.attrname {
-  color: #b26b47;
-}
-
-.attrvalue {
-  color: #3689b2;
+.text {
+  color: black;
 }
 
 .newattr {
   cursor: pointer;
 }
 
-.comment {
-  color: #5c6773;
-}
-
 .selected {
-  background-color: #253847;
+  background-color: hsl(0,0%,90%);
 }
 
 /* Give some padding to focusable elements to match the editor input
diff --git a/browser/themes/pinstripe/devtools/orion.css b/browser/themes/pinstripe/devtools/orion.css
index ae504a566a25..351a0bdc955a 100644
--- a/browser/themes/pinstripe/devtools/orion.css
+++ b/browser/themes/pinstripe/devtools/orion.css
@@ -3,24 +3,24 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .viewContainer {
-  background: #cddae5; /* This will be seen as the continuation of the ruler */
+  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
   font-family: monospace;
   font-size: inherit; /* inherit browser's default monospace font size */
 }
 
 .view {
   color: black; /* Default text color */
-  background: #f0f0ff; /* Background of the editor */
+  background: white; /* Background of the editor */
   padding-left: 4px;
 }
 
 .readonly > .view {
-  background: #f0f0ff;
+  background: #fdfefd; /* super light green */
 }
 
 .ruler {
-  background: #cddae5;
-  color: #7a8a99;
+  background: hsl(0,0%,89%);
+  color: hsl(0,0%,55%);
 }
 .ruler.annotations {
   width: 16px;
@@ -105,16 +105,10 @@
   outline: 1px solid grey;
 }
 
-.token_singleline_comment {
-  color: #45a946; /* green */
-}
-
-.token_multiline_comment {
-  color: #45a946; /* green */
-}
-
-.token_doc_comment {
-  color: #45a946; /* green */
+.token_singleline_comment,
+.token_multiline_comment,
+.token_doc_comment  {
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .token_doc_html_markup {
@@ -131,12 +125,12 @@
 }
 
 .token_string {
-  color: #1e66b1; /* blue */
+  color: hsl(72,100%,27%); /* green */
   font-style: italic;
 }
 
 .token_keyword {
-  color: #dd0058; /* purple */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .token_space {
@@ -155,34 +149,33 @@
 
 .line_caret,
 .annotationLine.currentLine { /* Current line */
-  background: #dae2ee; /* lighter than the background */
+  background: hsl(208, 93%, 94%);
 }
 
 .readonly .line_caret,
 .readonly .annotationLine.currentLine {
-  background: #cddae5; /* a bit darker than the background */
+  background: hsl(208, 80%, 90%);
 }
 
 /* Styling for html syntax highlighting */
 .entity-name-tag {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .entity-other-attribute-name {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .punctuation-definition-comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .string-quoted {
-  color: #1e66b1; /* blue */
-  font-style: italic;
+  color: hsl(24,85%,39%); /* orange */
 }
 
 .invalid {
diff --git a/browser/themes/winstripe/devtools/common.css b/browser/themes/winstripe/devtools/common.css
index b7966694b452..2cda5ad9ea13 100644
--- a/browser/themes/winstripe/devtools/common.css
+++ b/browser/themes/winstripe/devtools/common.css
@@ -195,3 +195,33 @@
   -moz-margin-end: -3px;
   position: relative;
 }
+
+/* Theme */
+
+.devtools-theme-background {
+  background-color: white;
+}
+
+.devtools-theme-comment {
+  color: hsl(90,2%,46%); /* grey */
+}
+
+.devtools-theme-keyword {
+  color: hsl(276,44%,45%); /* purple */
+}
+
+.devtools-theme-string {
+  color: hsl(72,100%,27%); /* green */
+}
+
+.devtools-theme-tagname {
+  color: hsl(208,81%,21%); /* dark blue */
+}
+
+.devtools-theme-attrname {
+  color: hsl(208,56%,40%); /* blue */
+}
+
+.devtools-theme-attrvalue {
+  color: hsl(24,85%,39%); /* orange */
+}
diff --git a/browser/themes/winstripe/devtools/csshtmltree.css b/browser/themes/winstripe/devtools/csshtmltree.css
index 74a946b9d1ba..87b4604c73b4 100644
--- a/browser/themes/winstripe/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/devtools/csshtmltree.css
@@ -146,7 +146,7 @@
 }
 
 .ruleview-rule-source {
-  color: hsl(121,42%,43%); /* green */
+  color: hsl(90,2%,46%); /* grey */
   -moz-padding-start: 5px;
   cursor: pointer;
   text-align: right;
@@ -233,7 +233,7 @@
 
 .ruleview-propertyname {
   padding: 1px 0;
-  color: hsl(210,100%,38%); /* blue */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .ruleview-propertyvalue {
diff --git a/browser/themes/winstripe/devtools/markup-view.css b/browser/themes/winstripe/devtools/markup-view.css
index fbf8b644bb30..2e4b26112418 100644
--- a/browser/themes/winstripe/devtools/markup-view.css
+++ b/browser/themes/winstripe/devtools/markup-view.css
@@ -9,32 +9,19 @@
 
 body {
   font: message-box;
-  background-color: #131c26;
-  color: #8fa1b2;
+  color: hsl(0,0%,50%);
 }
 
-.tagname {
-  color: #a673bf;
-}
-
-.attrname {
-  color: #b26b47;
-}
-
-.attrvalue {
-  color: #3689b2;
+.text {
+  color: black;
 }
 
 .newattr {
   cursor: pointer;
 }
 
-.comment {
-  color: #5c6773;
-}
-
 .selected {
-  background-color: #253847;
+  background-color: hsl(0,0%,90%);
 }
 
 /* Give some padding to focusable elements to match the editor input
diff --git a/browser/themes/winstripe/devtools/orion.css b/browser/themes/winstripe/devtools/orion.css
index ae504a566a25..351a0bdc955a 100644
--- a/browser/themes/winstripe/devtools/orion.css
+++ b/browser/themes/winstripe/devtools/orion.css
@@ -3,24 +3,24 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .viewContainer {
-  background: #cddae5; /* This will be seen as the continuation of the ruler */
+  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
   font-family: monospace;
   font-size: inherit; /* inherit browser's default monospace font size */
 }
 
 .view {
   color: black; /* Default text color */
-  background: #f0f0ff; /* Background of the editor */
+  background: white; /* Background of the editor */
   padding-left: 4px;
 }
 
 .readonly > .view {
-  background: #f0f0ff;
+  background: #fdfefd; /* super light green */
 }
 
 .ruler {
-  background: #cddae5;
-  color: #7a8a99;
+  background: hsl(0,0%,89%);
+  color: hsl(0,0%,55%);
 }
 .ruler.annotations {
   width: 16px;
@@ -105,16 +105,10 @@
   outline: 1px solid grey;
 }
 
-.token_singleline_comment {
-  color: #45a946; /* green */
-}
-
-.token_multiline_comment {
-  color: #45a946; /* green */
-}
-
-.token_doc_comment {
-  color: #45a946; /* green */
+.token_singleline_comment,
+.token_multiline_comment,
+.token_doc_comment  {
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .token_doc_html_markup {
@@ -131,12 +125,12 @@
 }
 
 .token_string {
-  color: #1e66b1; /* blue */
+  color: hsl(72,100%,27%); /* green */
   font-style: italic;
 }
 
 .token_keyword {
-  color: #dd0058; /* purple */
+  color: hsl(276,44%,45%); /* purple */
 }
 
 .token_space {
@@ -155,34 +149,33 @@
 
 .line_caret,
 .annotationLine.currentLine { /* Current line */
-  background: #dae2ee; /* lighter than the background */
+  background: hsl(208, 93%, 94%);
 }
 
 .readonly .line_caret,
 .readonly .annotationLine.currentLine {
-  background: #cddae5; /* a bit darker than the background */
+  background: hsl(208, 80%, 90%);
 }
 
 /* Styling for html syntax highlighting */
 .entity-name-tag {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .entity-other-attribute-name {
-  color: #dd0058; /* purple */
+  color: hsl(208,48%,40%); /* blue */
 }
 
 .punctuation-definition-comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .comment {
-  color: #45a946; /* green */
+  color: hsl(90,2%,50%); /* grey */
 }
 
 .string-quoted {
-  color: #1e66b1; /* blue */
-  font-style: italic;
+  color: hsl(24,85%,39%); /* orange */
 }
 
 .invalid {