Bug 1318259 - Firebug theme - Adjust UI of markup view in Inspector panel. r=ntim
authorRuturaj K. Vartak <ruturaj@gmail.com>
Fri, 09 Dec 2016 04:10:00 +0100
changeset 325628 285af284df45
parent 325627 0dc28cac4e7e
child 325629 291d703d4964
push id84743
push usercbook@mozilla.com
push dateMon, 12 Dec 2016 11:35:24 +0000
treeherdermozilla-inbound@600a0d1afdf0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1318259
milestone53.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 1318259 - Firebug theme - Adjust UI of markup view in Inspector panel. r=ntim
devtools/client/inspector/markup/views/read-only-editor.js
devtools/client/themes/common.css
devtools/client/themes/markup.css
devtools/client/themes/variables.css
--- a/devtools/client/inspector/markup/views/read-only-editor.js
+++ b/devtools/client/inspector/markup/views/read-only-editor.js
@@ -15,17 +15,17 @@ function ReadOnlyEditor(container, node)
   this.template = this.markup.template.bind(this.markup);
   this.elt = null;
   this.template("generic", this);
 
   if (node.isPseudoElement) {
     this.tag.classList.add("theme-fg-color5");
     this.tag.textContent = node.isBeforePseudoElement ? "::before" : "::after";
   } else if (node.nodeType == nodeConstants.DOCUMENT_TYPE_NODE) {
-    this.elt.classList.add("comment");
+    this.elt.classList.add("comment", "doctype");
     this.tag.textContent = node.doctypeString;
   } else {
     this.tag.textContent = node.nodeName;
   }
 }
 
 ReadOnlyEditor.prototype = {
   destroy: function () {
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -30,16 +30,20 @@
 .devtools-monospace {
   font-family: var(--monospace-font-family);
 }
 
 :root[platform="linux"] .devtools-monospace {
   font-size: 80%;
 }
 
+:root[platform="linux"].theme-firebug .devtools-monospace {
+  font-size: 11px; /* Font becomes too small for linux with 80% */
+}
+
 /* Override wrong system font from forms.css */
 html|button, html|select {
   font: message-box;
 }
 
 /* Autocomplete Popup */
 
 .devtools-autocomplete-popup {
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -294,16 +294,17 @@ ul.children + .tag-line::before {
   position: absolute;
   z-index: 1;
 }
 
 /* Firebug Theme */
 
 .theme-firebug .theme-fg-color3 {
   color: var(--theme-graphs-full-blue);
+  font-weight: normal;
 }
 
 .theme-firebug .open,
 .theme-firebug .close,
 .theme-firebug .attr-name.theme-fg-color2 {
   color: var(--theme-highlight-purple);
 }
 
@@ -330,20 +331,29 @@ ul.children + .tag-line::before {
 }
 
 /* Make sure even text nodes are white when selected in the Inspector panel. */
 .theme-firebug .theme-selected ~ .editor .open,
 .theme-firebug .theme-selected ~ .editor .close {
   color: var(--theme-selection-color);
 }
 
+/* Applicable to the DOCTYPE */
+.doctype {
+  font-style: italic;
+}
+
+.theme-firebug .doctype {
+  color: #787878;
+}
+
 /* In case a node isn't displayed in the page, we fade the syntax highlighting */
 .not-displayed .open,
 .not-displayed .close {
-  opacity: .7;
+  opacity: .5;
 }
 
 /* Events */
 .markupview-events {
   font-size: 8px;
   font-weight: bold;
   line-height: 10px;
   border-radius: 3px;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -130,41 +130,41 @@
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
 
   /* Command line */
   --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
 }
 
 :root.theme-firebug {
-  --theme-body-background: #fcfcfc;
+  --theme-body-background: #fff;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: #d8eaf9;
   --theme-toolbar-background: #f0f1f2;
   --theme-selection-background: #3399ff;
   --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
   --theme-selection-color: white;
   --theme-splitter-color: #aabccf;
-  --theme-comment: green;
+  --theme-comment: darkgreen;
 
   --theme-body-color: #000000;
   --theme-body-color-alt: #585959;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #667380;
 
   --theme-highlight-green: #2cbb0f;
   --theme-highlight-blue: #3455db;
   --theme-highlight-bluegrey: #0072ab;
-  --theme-highlight-purple: #887ce6;
+  --theme-highlight-purple: #000080;
   --theme-highlight-lightorange: #d97e00;
   --theme-highlight-orange: #f13c00;
-  --theme-highlight-red: #e22f6f;
+  --theme-highlight-red: #f00;
   --theme-highlight-pink: #b82ee5;
   --theme-highlight-gray: #dde1e4;
 
   /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
   --theme-graphs-green: #85d175;
   --theme-graphs-blue: #83b7f6;
   --theme-graphs-bluegrey: #0072ab;
   --theme-graphs-purple: #b693eb;