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 429815 246cba2233e3103ac3e0f160c40ccec9e6946ec9
parent 429814 f255ec4e8c361e4526b7bfb1083cecb41fabbdd1
child 429816 beb2e1710ae47fe77e02f2d644aa830751045790
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1398880
milestone57.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 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;