Bug 1398880 - Implement the new photon font and syntax colors for the inspector and debugger. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 12 Sep 2017 14:43:04 -0400
changeset 663366 246cba2233e3103ac3e0f160c40ccec9e6946ec9
parent 663365 f255ec4e8c361e4526b7bfb1083cecb41fabbdd1
child 663367 beb2e1710ae47fe77e02f2d644aa830751045790
push id79424
push userbmo:tchiovoloni@mozilla.com
push dateTue, 12 Sep 2017 23:17:54 +0000
reviewerspbro
bugs1398880
milestone57.0a1
Bug 1398880 - Implement the new photon font and syntax colors for the inspector and debugger. r=pbro
devtools/client/inspector/markup/views/text-editor.js
devtools/client/inspector/rules/views/rule-editor.js
devtools/client/shared/test/browser_theme.js
devtools/client/themes/boxmodel.css
devtools/client/themes/computed.css
devtools/client/themes/dark-theme.css
devtools/client/themes/light-theme.css
devtools/client/themes/markup.css
devtools/client/themes/styleeditor.css
devtools/client/themes/variables.css
--- a/devtools/client/inspector/markup/views/text-editor.js
+++ b/devtools/client/inspector/markup/views/text-editor.js
@@ -63,18 +63,16 @@ function TextEditor(container, node, typ
 TextEditor.prototype = {
   buildMarkup: function (type) {
     let doc = this.markup.doc;
 
     this.elt = doc.createElement("span");
     this.elt.classList.add("editor", type);
 
     if (type === "comment") {
-      this.elt.classList.add("theme-comment");
-
       let openComment = doc.createElement("span");
       openComment.textContent = "<!--";
       this.elt.appendChild(openComment);
     }
 
     this.value = doc.createElement("pre");
     this.value.setAttribute("style", "display:inline-block;white-space: normal;");
     this.value.setAttribute("tabindex", "-1");
--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -125,17 +125,17 @@ RuleEditor.prototype = {
 
     let code = createChild(this.element, "div", {
       class: "ruleview-code"
     });
 
     let header = createChild(code, "div", {});
 
     this.selectorText = createChild(header, "span", {
-      class: "ruleview-selectorcontainer theme-fg-color3",
+      class: "ruleview-selectorcontainer",
       tabindex: this.isSelectorEditable ? "0" : "-1",
     });
 
     if (this.isSelectorEditable) {
       this.selectorText.addEventListener("click", event => {
         // Clicks within the selector shouldn't propagate any further.
         event.stopPropagation();
       });
--- a/devtools/client/shared/test/browser_theme.js
+++ b/devtools/client/shared/test/browser_theme.js
@@ -57,18 +57,18 @@ function testSetTheme() {
   is(Services.prefs.getCharPref("devtools.theme"), "unknown",
      "setTheme() correctly sets an unknown theme.");
   Services.prefs.setCharPref("devtools.theme", originalTheme);
 
   prefObserver.destroy();
 }
 
 function testGetColor() {
-  let BLUE_DARK = "#46afe3";
-  let BLUE_LIGHT = "#0088cc";
+  let BLUE_DARK = "#75BFFF";
+  let BLUE_LIGHT = "#0074e8";
   let BLUE_FIREBUG = "#3455db";
   let originalTheme = getTheme();
 
   setTheme("dark");
   is(getColor("highlight-blue"), BLUE_DARK, "correctly gets color for enabled theme.");
   setTheme("light");
   is(getColor("highlight-blue"), BLUE_LIGHT, "correctly gets color for enabled theme.");
   setTheme("firebug");
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -46,16 +46,21 @@
   background-color: white;
 }
 
 .boxmodel-margin,
 .boxmodel-size {
   color: var(--theme-highlight-blue);
 }
 
+.theme-dark .boxmodel-margin,
+.theme-dark .boxmodel-size {
+  color: var(--grey-60);
+}
+
 /* Regions are 3 nested elements with wide borders and outlines */
 
 .boxmodel-contents {
   height: 18px;
 }
 
 .boxmodel-margins,
 .boxmodel-borders,
@@ -279,16 +284,20 @@
   margin: 2px 6px;
   z-index: 1;
 }
 
 .boxmodel-legend[data-box="margin"] {
   color: var(--theme-highlight-blue);
 }
 
+.theme-dark .boxmodel-legend[data-box="margin"] {
+  color: var(--grey-60);
+}
+
 .boxmodel-legend[data-box="position"] {
   color: var(--theme-highlight-purple);
   margin: -18px -9px;
 }
 
 /* Editable fields */
 
 .boxmodel-editable {
--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -204,17 +204,16 @@
   float: left;
 }
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 
 .computed-link,
 .computed-link:visited {
-  color: #0091ff;
   text-decoration: none;
 }
 
 .computed-link:hover {
   text-decoration: underline;
 }
 
 .computed-colorswatch {
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -14,17 +14,17 @@ body {
 
 .theme-body {
   background: var(--theme-body-background);
   color: var(--theme-body-color);
 }
 
 .theme-sidebar {
   background: var(--theme-sidebar-background);
-  color: var(--theme-content-color1);
+  color: var(--theme-toolbar-color);
 }
 
 ::-moz-selection {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-selected,
@@ -35,102 +35,109 @@ body {
 
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
   background: var(--theme-contrast-background);
 }
 
 .theme-link,
 .cm-s-mozilla .cm-link,
-.cm-s-mozilla .cm-keyword {
-  color: var(--theme-highlight-green);
+.CodeMirror-Tern-type {
+  color: var(--grey-50);
 }
 
 /*
  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  * failures in debug builds.
  */
 .theme-link:visited,
-.cm-s-mozilla .cm-link:visited,
-.CodeMirror-Tern-type {
+.cm-s-mozilla .cm-link:visited {
   color: var(--theme-highlight-blue);
 }
 
 .theme-comment,
 .cm-s-mozilla .cm-meta,
 .cm-s-mozilla .cm-hr,
 .cm-s-mozilla .cm-comment,
 .variable-or-property .token-undefined,
 .variable-or-property .token-null,
 .CodeMirror-Tern-completion-unknown:before {
   color: var(--theme-comment);
 }
 
-.theme-fg-color1,
-.cm-s-mozilla .cm-number,
-.variable-or-property .token-number,
-.variable-or-property[return] > .title > .name,
-.variable-or-property[scope] > .title > .name {
-  color: var(--theme-highlight-red);
-}
-
-.CodeMirror-Tern-completion-number:before {
-  background-color: #5c9966;
-}
-
-.theme-fg-color2,
-.cm-s-mozilla .cm-attribute,
-.cm-s-mozilla .cm-def,
-.cm-s-mozilla .cm-property,
-.cm-s-mozilla .cm-qualifier,
-.variables-view-variable > .title > .name {
-  color: var(--theme-highlight-purple);
-}
-
-.CodeMirror-Tern-completion-object:before {
-  background-color: #3689b2;
-}
-
 .cm-s-mozilla .cm-unused-line {
   text-decoration: line-through;
   text-decoration-color: #0072ab;
 }
 
 .cm-s-mozilla .cm-executed-line {
   background-color: #133c26;
 }
 
+.cm-s-mozilla .cm-number,
+.variable-or-property .token-number,
+.variable-or-property[return] > .title > .name,
+.variable-or-property[scope] > .title > .name {
+  color: #6B89FF;
+}
+
+.CodeMirror-Tern-completion-number:before {
+  background-color: #5c9966;
+}
+
+.theme-fg-color1,
+.theme-fg-color2,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-builtin,
+.cm-s-mozilla .cm-keyword,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-variable-2 {
+  color: var(--theme-highlight-blue);
+}
+
+.cm-s-mozilla .cm-variable {
+  color: var(--theme-highlight-purple);
+}
+
+.cm-s-mozilla .cm-property {
+  color: var(--theme-highlight-green);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: #3689b2;
+}
+
 .theme-fg-color3,
-.cm-s-mozilla .cm-builtin,
+.theme-fg-color5,
 .cm-s-mozilla .cm-tag,
 .cm-s-mozilla .cm-header,
 .cm-s-mozilla .cm-bracket,
+.cm-s-mozilla .cm-qualifier,
 .variables-view-property > .title > .name {
-  color: var(--theme-highlight-green);
+  color: var(--theme-highlight-blue);
 }
 
 .CodeMirror-Tern-completion-array:before {
   background-color: var(--theme-highlight-bluegrey);
 }
 
-.theme-fg-color4 {
-  color: var(--theme-highlight-purple);
-}
-
-.theme-fg-color5 {
+.theme-fg-color4,
+.theme-fg-color6 {
   color: var(--theme-highlight-purple);
 }
 
-.theme-fg-color6,
 .cm-s-mozilla .cm-string,
 .cm-s-mozilla .cm-string-2,
 .variable-or-property .token-string,
-.cm-s-mozilla .cm-variable,
 .CodeMirror-Tern-farg {
-  color: var(--theme-highlight-gray);
+  color: #6B89FF;
 }
 
 .CodeMirror-Tern-completion-string:before,
 .CodeMirror-Tern-completion-fn:before {
   background-color: #b26b47;
 }
 
 .theme-fg-color7,
@@ -151,17 +158,17 @@ body {
   font-weight: bold;
 }
 
 .theme-toolbar,
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs,
 .devtools-sidebar-alltabs,
 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
-  color: var(--theme-body-color-alt);
+  color: var(--theme-body-color);
   background-color: var(--theme-toolbar-background);
   border-color: var(--theme-splitter-color);
 }
 
 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
   color: black;
 }
 
@@ -175,20 +182,25 @@ body {
  * are duplicated here to prevent weirdness in the main theme. */
 
 .CodeMirror.cm-s-mozilla  { /* Inherit platform specific font sizing and styles */
   font-family: inherit;
   font-size: inherit;
   background: transparent;
 }
 
-.CodeMirror.cm-s-mozilla  pre,
-.cm-s-mozilla .cm-variable-2,
+.CodeMirror.cm-s-mozilla  pre {
+  color: var(--theme-content-color1);
+}
+
+.cm-s-mozilla .cm-operator {
+  color: var(--theme-body-color);
+}
+
 .cm-s-mozilla .cm-variable-3,
-.cm-s-mozilla .cm-operator,
 .cm-s-mozilla .cm-special {
   color: var(--theme-content-color1);
 }
 
 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
   border-left: solid 1px #fff;
 }
 
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -36,17 +36,17 @@ body {
 .theme-bg-contrast,
 .variable-or-property:not([overridden])[changed] {
   background: var(--theme-contrast-background);
 }
 
 .theme-link,
 .cm-s-mozilla .cm-link,
 .CodeMirror-Tern-type {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-highlight-purple);
 }
 
 /*
  * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
  * failures in debug builds.
  */
 .theme-link:visited,
 .cm-s-mozilla .cm-link:visited {
@@ -67,67 +67,71 @@ body {
   text-decoration: line-through;
   text-decoration-color: var(--theme-highlight-bluegrey);
 }
 
 .cm-s-mozilla .cm-executed-line {
   background-color: #fcfffc;
 }
 
-.theme-fg-color1,
 .cm-s-mozilla .cm-number,
 .variable-or-property .token-number,
 .variable-or-property[return] > .title > .name,
 .variable-or-property[scope] > .title > .name {
   color: var(--theme-highlight-purple);
 }
 
 .CodeMirror-Tern-completion-number:before {
   background-color: hsl(72,100%,27%);
 }
 
+.theme-fg-color1,
 .theme-fg-color2,
 .cm-s-mozilla .cm-attribute,
 .cm-s-mozilla .cm-builtin,
-.cm-s-mozilla .cm-property,
+.cm-s-mozilla .cm-keyword,
 .variables-view-variable > .title > .name {
   color: var(--theme-highlight-red);
 }
 
-.cm-s-mozilla .cm-def {
-  color: var(--theme-body-color);
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-variable-2 {
+  color: var(--blue-55);
+}
+
+.cm-s-mozilla .cm-variable {
+  color: var(--purple-60);
+}
+
+.cm-s-mozilla .cm-property {
+  color: var(--theme-highlight-green);
 }
 
 .CodeMirror-Tern-completion-object:before {
   background-color: hsl(208,56%,40%);
 }
 
 .theme-fg-color3,
-.cm-s-mozilla .cm-variable,
+.theme-fg-color5,
 .cm-s-mozilla .cm-tag,
 .cm-s-mozilla .cm-header,
 .cm-s-mozilla .cm-bracket,
 .cm-s-mozilla .cm-qualifier,
 .variables-view-property > .title > .name {
   color: var(--theme-highlight-blue);
 }
 
 .CodeMirror-Tern-completion-array:before {
   background-color: var(--theme-highlight-bluegrey);
 }
 
 .theme-fg-color4 {
   color: var(--theme-highlight-orange);
 }
 
-.theme-fg-color5,
-.cm-s-mozilla .cm-keyword {
-  color: var(--theme-highlight-red);
-}
-
 .theme-fg-color6,
 .cm-s-mozilla .cm-string,
 .cm-s-mozilla .cm-string-2,
 .variable-or-property .token-string,
 .CodeMirror-Tern-farg {
   color: var(--theme-highlight-purple);
 }
 
@@ -179,17 +183,16 @@ body {
 
 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
   font-family: inherit;
   font-size: inherit;
   background: transparent;
 }
 
 .CodeMirror.cm-s-mozilla  pre,
-.cm-s-mozilla .cm-variable-2,
 .cm-s-mozilla .cm-variable-3,
 .cm-s-mozilla .cm-operator,
 .cm-s-mozilla .cm-special {
   color: var(--theme-body-color);
 }
 
 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
   border-left: solid 1px black;
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -2,17 +2,17 @@
  * 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/. */
 
 :root {
   --markup-outline: var(--theme-splitter-color);
 }
 
 .theme-dark:root {
-  --markup-outline: var(--theme-highlight-pink);
+  --markup-outline: var(--theme-selection-background);
 }
 
 * {
   padding: 0;
   margin: 0;
 }
 
 :root {
@@ -261,25 +261,33 @@ ul.children + .tag-line::before {
 }
 
 .editor {
   /* Make sure the editor still appears above the tag-state */
   position: relative;
   z-index: 1;
 }
 
+.editor.comment:not(.doctype) {
+  color: var(--theme-highlight-green);
+}
+
 .editor.text {
   display: inline-block;
 }
 
 .editor.text pre,
 .editor.comment pre {
   font: inherit;
 }
 
+.theme-dark .editor.text pre {
+  color: var(--theme-content-color1);
+}
+
 /* Whitespace only text nodes are sometimes shown in the markup-view, and when they do
    they get a greyed-out whitespace symbol so users know what they are */
 .editor.text .whitespace {
   padding: 0 .5em;
 }
 
 .editor.text .whitespace::before {
   /* black circle (full) character */
--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -66,35 +66,21 @@ li.error > .stylesheet-info > .styleshee
 .splitview-nav > li > hgroup.stylesheet-info {
   -moz-box-pack: center;
 }
 
 .stylesheet-more > spacer {
   -moz-box-flex: 1;
 }
 
-.theme-dark .stylesheet-title,
-.theme-dark .stylesheet-name {
-  color: var(--theme-selection-color);
-}
-
-.theme-dark .stylesheet-rule-count,
-.theme-dark .stylesheet-linked-file,
-.theme-dark .stylesheet-saveButton {
-  color: var(--theme-body-color-alt);
-}
-
-.theme-light .stylesheet-title,
-.theme-light .stylesheet-name {
-  color: var(--theme-body-color-alt);
-}
-
-.theme-light .stylesheet-rule-count,
-.theme-light .stylesheet-linked-file,
-.theme-light .stylesheet-saveButton {
+.stylesheet-title,
+.stylesheet-name,
+.stylesheet-rule-count,
+.stylesheet-linked-file,
+.stylesheet-saveButton {
   color: var(--theme-body-color);
 }
 
 .stylesheet-saveButton {
   display: none;
   margin-top: 0px;
   margin-bottom: 0px;
   text-decoration: underline;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -34,33 +34,33 @@
   --theme-selection-background: var(--blue-55);
   --theme-selection-background-hover: #F0F9FE;
   --theme-selection-color: #f5f7fa;
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #e0e0e1;
 
-  --theme-comment: #696969;
+  --theme-comment: var(--grey-50);
   --theme-comment-alt: #ccd1d5;
 
   --theme-body-color: var(--grey-60);
-  --theme-body-color-alt: #585959;
+  --theme-body-color-alt: var(--grey-40);
   --theme-body-color-inactive: #999797;
   --theme-content-color1: #292e33;
   --theme-content-color2: #8fa1b2;
   --theme-content-color3: #667380;
 
-  --theme-highlight-green: #2cbb0f;
-  --theme-highlight-blue: #0088cc;
+  --theme-highlight-green: var(--green-70);
+  --theme-highlight-blue: var(--blue-55);
   --theme-highlight-bluegrey: #0072ab;
-  --theme-highlight-purple: #5b5fff;
+  --theme-highlight-purple: var(--blue-70);
   --theme-highlight-lightorange: #d97e00;
   --theme-highlight-orange: #f13c00;
-  --theme-highlight-red: #ed2655;
+  --theme-highlight-red: var(--magenta-65);
   --theme-highlight-pink: #b82ee5;
   --theme-highlight-gray: #dde1e4;
   --theme-highlight-yellow: #ffffb4;
 
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline-color: #000000;
 
@@ -110,33 +110,33 @@
   --theme-selection-background: #204E8A;
   --theme-selection-background-hover: #353B48;
   --theme-selection-color: #f5f7fa;
 
   /* Border color that splits the toolbars/panels/headers.
    * This needs to be sync with commandline.css and commandline-browser.css. */
   --theme-splitter-color: #3c3c3d;
 
-  --theme-comment: #757873;
-  --theme-comment-alt: #5a6375;
+  --theme-comment: #939393;
+  --theme-comment-alt: #939393;
 
   --theme-body-color: var(--grey-40);
-  --theme-body-color-alt: #b6babf;
+  --theme-body-color-alt: var(--grey-50);
   --theme-body-color-inactive: var(--grey-40);
-  --theme-content-color1: #a9bacb;
+  --theme-content-color1: var(--grey-30);
   --theme-content-color2: var(--grey-40);
-  --theme-content-color3: #5f7387;
+  --theme-content-color3: #939393;
 
-  --theme-highlight-green: #00ff7f;
-  --theme-highlight-blue: #46afe3;
+  --theme-highlight-green: #86DE74;
+  --theme-highlight-blue: #75BFFF;
   --theme-highlight-bluegrey: #5e88b0;
-  --theme-highlight-purple: #bcb8db;
+  --theme-highlight-purple: #B98EFF;
   --theme-highlight-lightorange: #d99b28;
   --theme-highlight-orange: #d96629;
-  --theme-highlight-red: #eb5368;
+  --theme-highlight-red: #FF7DE9;
   --theme-highlight-pink: #df80ff;
   --theme-highlight-gray: #e9f4fe;
   --theme-highlight-yellow: #ffffb4;
 
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline-color: #ced3d9;
 
@@ -263,16 +263,18 @@
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
   /* Firefox Colors CSS Variables v1.0.3
    * Colors are taken from: https://github.com/FirefoxUX/design-tokens */
   --magenta-65: #dd00a9;
 
+  --purple-60: #8000d7;
+
   --blue-50: #0a84ff;
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;
 
   --green-70: #058b00;
 
   --grey-10: #f9f9fa;