Bug 1264312 - DOM panel support for Firebug Theme; r=ntim
authorJan Odvarko <odvarko@gmail.com>
Wed, 13 Apr 2016 17:35:42 +0200
changeset 354462 c1a9497a212d54fda334e9174aac33926196df8e
parent 354461 a1823d3e691960016d156ed062eb416d2d135707
child 354463 be1fd1c7e43f3969243b8c768d5dbe6de17f4f7c
push id16088
push usergkruglov@mozilla.com
push dateWed, 20 Apr 2016 23:45:23 +0000
reviewersntim
bugs1264312
milestone48.0a1
Bug 1264312 - DOM panel support for Firebug Theme; r=ntim MozReview-Commit-ID: Cg2oSr4bbfP
devtools/client/shared/components/reps/reps.css
devtools/client/shared/components/tree/tree-view.css
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@@ -1,112 +1,125 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+.theme-dark,
+.theme-light {
+  --number-color: var(--theme-highlight-green);
+  --string-color: var(--theme-highlight-orange);
+  --null-color: var(--theme-comment);
+  --object-color: var(--theme-body-color);
+  --caption-color: var(--theme-highlight-blue);
+  --location-color: var(--theme-content-color1);
+  --source-link-color: var(--theme-highlight-blue);
+  --node-color: var(--theme-highlight-bluegrey);
+  --reference-color: var(--theme-highlight-purple);
+}
+
+.theme-firebug {
+  --number-color: #000088;
+  --string-color: #FF0000;
+  --null-color: #787878;
+  --object-color: DarkGreen;
+  --caption-color: #444444;
+  --location-color: #555555;
+  --source-link-color: blue;
+  --node-color: rgb(0, 0, 136);
+  --reference-color: rgb(102, 102, 255);
+}
+
+/******************************************************************************/
+
 .objectLink:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
-/******************************************************************************/
-
 .inline {
   display: inline;
   white-space: normal;
 }
 
 .objectBox-object {
   font-weight: bold;
-  color: DarkGreen;
+  color: var(--object-color);
   white-space: pre-wrap;
 }
 
 .objectBox-string,
 .objectBox-text,
 .objectLink-textNode,
 .objectBox-table {
   white-space: pre-wrap;
 }
 
 .objectBox-number,
 .objectLink-styleRule,
 .objectLink-element,
 .objectLink-textNode,
 .objectBox-array > .length {
-  color: #000088;
+  color: var(--number-color);
 }
 
 .objectBox-string {
-  color: #FF0000;
+  color: var(--string-color);
 }
 
 .objectLink-function,
 .objectBox-stackTrace,
 .objectLink-profile {
-  color: DarkGreen;
+  color: var(--object-color);
 }
 
 .objectLink-Location {
   font-style: italic;
-  color: #555555;
+  color: var(--location-color);
 }
 
 .objectBox-null,
 .objectBox-undefined,
 .objectBox-hint,
 .logRowHint {
   font-style: italic;
-  color: #787878;
-}
-
-.objectBox-scope {
-  color: #707070;
-}
-.objectBox-optimizedAway {
-  color: #909090;
+  color: var(--null-color);
 }
 
 .objectLink-sourceLink {
   position: absolute;
   right: 4px;
   top: 2px;
   padding-left: 8px;
   font-weight: bold;
-  color: #0000FF;
-}
-
-.objectLink-sourceLink > .systemLink {
-  float: right;
-  color: #FF0000;
+  color: var(--source-link-color);
 }
 
 /******************************************************************************/
 
 .objectLink-event,
 .objectLink-eventLog,
 .objectLink-regexp,
 .objectLink-object,
 .objectLink-Date {
   font-weight: bold;
-  color: DarkGreen;
+  color: var(--object-color);
   white-space: pre-wrap;
 }
 
 /******************************************************************************/
 
 .objectLink-object .nodeName,
 .objectLink-NamedNodeMap .nodeName,
 .objectLink-NamedNodeMap .objectEqual,
 .objectLink-NamedNodeMap .arrayLeftBracket,
 .objectLink-NamedNodeMap .arrayRightBracket,
 .objectLink-Attr .attrEqual,
 .objectLink-Attr .attrTitle {
-  color: rgb(0, 0, 136)
+  color: var(--node-color);
 }
 
 .objectLink-object .nodeName {
   font-weight: normal;
 }
 
 /******************************************************************************/
 
@@ -128,68 +141,41 @@
   margin-left: 4px;
 }
 
 /******************************************************************************/
 /* Cycle reference*/
 
 .objectLink-Reference {
   font-weight: bold;
-  color: rgb(102, 102, 255);
+  color: var(--reference-color);
 }
 
 .objectBox-array > .objectTitle {
   font-weight: bold;
-  color: DarkGreen;
+  color: var(--object-color);
 }
 
-/******************************************************************************/
-
 .caption {
   font-weight: bold;
-  color:  #444444;
+  color:  var(--caption-color);
 }
 
 /******************************************************************************/
-/* Light Theme & Dark Theme */
-
-.theme-dark .domLabel,
-.theme-light .domLabel {
-  color: var(--theme-highlight-blue);
-}
-
-.theme-dark .objectBox-array .length,
-.theme-light .objectBox-array .length,
-.theme-dark .objectBox-number,
-.theme-light .objectBox-number {
-  color: var(--theme-highlight-green);
-}
-
-.theme-dark .objectBox-string,
-.theme-light .objectBox-string {
-  color: var(--theme-highlight-orange);
-}
+/* Themes */
 
 .theme-dark .objectBox-null,
 .theme-dark .objectBox-undefined,
 .theme-light .objectBox-null,
 .theme-light .objectBox-undefined {
   font-style: normal;
-  color: var(--theme-comment);
-}
-
-.theme-dark .objectBox-array,
-.theme-light .objectBox-array {
-  color: var(--theme-body-color);
 }
 
 .theme-dark .objectBox-object,
 .theme-light .objectBox-object {
   font-weight: normal;
-  color: var(--theme-highlight-blue);
   white-space: pre-wrap;
 }
 
 .theme-dark .caption,
 .theme-light .caption {
   font-weight: normal;
-  color: var(--theme-highlight-blue);
 }
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@@ -41,20 +41,16 @@
 }
 
 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
   cursor: pointer;
   color: var(--tree-link-color);
   text-decoration: underline;
 }
 
-.treeTable .treeRow:hover {
-  background-color: var(--theme-body-background);
-}
-
 /* Filtering */
 .treeTable .treeRow.hidden {
   display: none;
 }
 
 /******************************************************************************/
 /* Toggle Icon */
 
@@ -77,27 +73,16 @@
 /* Spinner (used for async fetch). Needs to have higher priority than
    theme toggle icons */
 .treeTable .treeRow.hasChildren.loading > .treeLabelCell > .treeIcon {
   background-image: url(chrome://devtools/skin/images/firebug/spinner.png) !important;
   background-position: 2px 1px !important;
   background-size: 9px 9px !important;
 }
 
-/* Default toggle icon. The immediate children operator must be
- used here since there might be nested tree components inside
- a tree and we don't want to alter those. */
-.treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-  background-image: url(chrome://devtools/skin/images/firebug/twisty-closed-firebug.svg);
-}
-
-.treeTable .treeRow.hasChildren.opened > .treeLabelCell > .treeIcon {
-  background-image: url(chrome://devtools/skin/images/firebug/twisty-open-firebug.svg);
-}
-
 /******************************************************************************/
 /* Header */
 
 .treeTable .treeHeaderRow {
   height: 18px;
 }
 
 .treeTable .treeHeaderCell {
@@ -144,58 +129,61 @@
           transparent 80%);
 }
 
 /******************************************************************************/
 /* Themes */
 
 /* Light Theme: toggle icon */
 .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url(chrome://devtools/skin/images/controls.png);
   background-size: 56px 28px;
   background-position: 0 -14px;
 }
 
 .theme-light .treeTable .treeRow.hasChildren.opened > .treeLabelCell > .treeIcon {
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url(chrome://devtools/skin/images/controls.png);
   background-size: 56px 28px;
   background-position: -14px -14px;
 }
 
 /* Dark Theme: toggle icon */
 .theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url(chrome://devtools/skin/images/controls.png);
   background-size: 56px 28px;
   background-position: -28px -14px;
 }
 
 .theme-dark .treeTable .treeRow.hasChildren.opened > .treeLabelCell > .treeIcon {
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url(chrome://devtools/skin/images/controls.png);
   background-size: 56px 28px;
   background-position: -42px -14px;
 }
 
-.theme-dark .treeTable .treeRow:hover {
-  background-color: var(--theme-selection-background-semitransparent);
+/* Dark and Light Themes: Support for retina displays */
+@media (min-resolution: 1.1dppx) {
+  .theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon,
+  .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
+    background-image: url("chrome://devtools/skin/images/controls@2x.png");
+  }
 }
 
-/* Dark and Light Themes: colors */
 .theme-light .treeTable .treeRow:hover,
 .theme-dark .treeTable .treeRow:hover {
   background-color: var(--theme-selection-background) !important;
 }
 
+.theme-firebug .treeTable .treeRow:hover {
+  background-color: var(--theme-body-background);
+}
+
 .theme-light .treeTable .treeLabel,
 .theme-dark .treeTable .treeLabel {
   color: var(--theme-highlight-pink);
 }
 
 .theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
   color: var(--theme-highlight-pink);
 }
 
-/* Dark and Light Themes: Support for retina displays */
-@media (min-resolution: 1.1dppx) {
-.theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon,
-.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
-  background-image: url("chrome://devtools/skin/images/controls@2x.png");
+.theme-firebug .treeTable .treeLabel {
+  color: var(--theme-body-color);
 }
-}