Bug 1264312 - DOM panel support for Firebug Theme; r=ntim
authorJan Odvarko <odvarko@gmail.com>
Wed, 13 Apr 2016 17:35:42 +0200
changeset 331954 c1a9497a212d54fda334e9174aac33926196df8e
parent 331953 a1823d3e691960016d156ed062eb416d2d135707
child 331955 be1fd1c7e43f3969243b8c768d5dbe6de17f4f7c
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1264312
milestone48.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 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);
 }
-}