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

@@ -68,8 +68,6 @@ TextEditor.prototype = {
     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);

devtools/client/inspector/rules/views/rule-editor.js

@@ -130,7 +130,7 @@ RuleEditor.prototype = {
     let header = createChild(code, "div", {});
 
     this.selectorText = createChild(header, "span", {
-      class: "ruleview-selectorcontainer theme-fg-color3",
+      class: "ruleview-selectorcontainer",
       tabindex: this.isSelectorEditable ? "0" : "-1",
     });
 

devtools/client/shared/test/browser_theme.js

@@ -62,8 +62,8 @@ function testSetTheme() {
 }
 
 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();
 

devtools/client/themes/boxmodel.css

@@ -51,6 +51,11 @@
   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 {
@@ -284,6 +289,10 @@
   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;

devtools/client/themes/computed.css

@@ -209,7 +209,6 @@
 
 .computed-link,
 .computed-link:visited {
-  color: #0091ff;
   text-decoration: none;
 }
 

devtools/client/themes/dark-theme.css

@@ -19,7 +19,7 @@ body {
 
 .theme-sidebar {
   background: var(--theme-sidebar-background);
-  color: var(--theme-content-color1);
+  color: var(--theme-toolbar-color);
 }
 
 ::-moz-selection {
@@ -40,8 +40,8 @@ body {
 
 .theme-link,
 .cm-s-mozilla .cm-link,
-.cm-s-mozilla .cm-keyword {
-  color: var(--theme-highlight-green);
+.CodeMirror-Tern-type {
+  color: var(--grey-50);
 }
 
 /*
@@ -49,8 +49,7 @@ body {
  * 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);
 }
 
@@ -64,31 +63,6 @@ body {
   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;
@@ -98,34 +72,67 @@ body {
   background-color: #133c26;
 }
 
-.theme-fg-color3,
+.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,
+.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 {
+.theme-fg-color4,
+.theme-fg-color6 {
   color: var(--theme-highlight-purple);
 }
 
-.theme-fg-color5 {
-  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,
@@ -156,7 +163,7 @@ body {
 .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);
 }
@@ -180,10 +187,15 @@ body {
   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);
 }

devtools/client/themes/light-theme.css

@@ -41,7 +41,7 @@ body {
 .theme-link,
 .cm-s-mozilla .cm-link,
 .CodeMirror-Tern-type {
-  color: var(--theme-highlight-blue);
+  color: var(--theme-highlight-purple);
 }
 
 /*
@@ -72,7 +72,6 @@ body {
   background-color: #fcfffc;
 }
 
-.theme-fg-color1,
 .cm-s-mozilla .cm-number,
 .variable-or-property .token-number,
 .variable-or-property[return] > .title > .name,
@@ -84,16 +83,26 @@ body {
   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 {
@@ -101,7 +110,7 @@ body {
 }
 
 .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,
@@ -118,11 +127,6 @@ body {
   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,
@@ -184,7 +188,6 @@ body {
 }
 
 .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 {

devtools/client/themes/markup.css

@@ -7,7 +7,7 @@
 }
 
 .theme-dark:root {
-  --markup-outline: var(--theme-highlight-pink);
+  --markup-outline: var(--theme-selection-background);
 }
 
 * {
@@ -266,6 +266,10 @@ ul.children + .tag-line::before {
   z-index: 1;
 }
 
+.editor.comment:not(.doctype) {
+  color: var(--theme-highlight-green);
+}
+
 .editor.text {
   display: inline-block;
 }
@@ -275,6 +279,10 @@ ul.children + .tag-line::before {
   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 {

devtools/client/themes/styleeditor.css

@@ -71,25 +71,11 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
   -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);
 }
 

devtools/client/themes/variables.css

@@ -39,23 +39,23 @@
    * 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;
@@ -115,23 +115,23 @@
    * 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;
@@ -268,6 +268,8 @@
    * 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;