Photonize Reps and ObjectInspector.

This patch changes a few CSS variables to match the Devtools Photon design spec.
We take this as an opportunity to have more consistent look and classnames across
the different reps (e.g. window, document and location).

Author: nchevobbe

packages/devtools-reps/src/object-inspector/index.css

@@ -1,14 +1,19 @@
 /* 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/. */
-.tree.object-inspector .object-label, .object-label * {
+
+.tree.object-inspector .object-label,
+.tree.object-inspector .object-label * {
   color: var(--theme-highlight-blue);
 }
 
 .tree.object-inspector .node .unavailable {
-  color: var(--theme-content-color3);
+  color: var(--theme-comment);
 }
 
-.lessen {
-  opacity: 0.6;
+.tree.object-inspector .lessen,
+.tree.object-inspector .lessen *,
+.tree.object-inspector .lessen .object-label,
+.tree.object-inspector .lessen .object-label * {
+  color: var(--theme-comment);
 }

packages/devtools-reps/src/reps/attribute.js

@@ -32,15 +32,11 @@ function Attribute(props) {
   return (
     span({
       "data-link-actor-id": object.actor,
-      className: "objectLink-Attr"
+      className: "objectBox-Attr"
     },
-      span({className: "attrTitle"},
-        getTitle(object)
-      ),
-      span({className: "attrEqual"},
-        "="
-      ),
-      StringRep({object: value})
+      span({className: "attrName"}, getTitle(object)),
+      span({className: "attrEqual"}, "="),
+      StringRep({className: "attrValue", object: value})
     )
   );
 }

packages/devtools-reps/src/reps/document.js

@@ -29,10 +29,10 @@ function Document(props) {
   return (
     span({
       "data-link-actor-id": grip.actor,
-      className: "objectBox objectBox-object"
+      className: "objectBox objectBox-document"
     },
       getTitle(grip),
-      span({className: "objectPropValue"},
+      span({className: "location"},
         getLocation(grip)
       )
     )

packages/devtools-reps/src/reps/element-node.js

@@ -10,6 +10,7 @@ const {
   isGrip,
   wrapRender,
 } = require("./rep-utils");
+const {rep: StringRep} = require("./string");
 const { MODE } = require("./constants");
 const nodeConstants = require("../shared/dom-node-constants");
 const Svg = require("../shared/images/Svg");
@@ -79,18 +80,18 @@ function ElementNode(props) {
 function getElements(grip, mode) {
   let {attributes, nodeName} = grip.preview;
   const nodeNameElement = span({
-    className: "tag-name theme-fg-color3"
+    className: "tag-name"
   }, nodeName);
 
   if (mode === MODE.TINY) {
     let elements = [nodeNameElement];
     if (attributes.id) {
       elements.push(
-        span({className: "attr-name theme-fg-color2"}, `#${attributes.id}`));
+        span({className: "attrName"}, `#${attributes.id}`));
     }
     if (attributes.class) {
       elements.push(
-        span({className: "attr-name theme-fg-color2"},
+        span({className: "attrName"},
           attributes.class
             .trim()
             .split(/\s+/)
@@ -113,20 +114,19 @@ function getElements(grip, mode) {
   const attributeElements = attributeKeys.reduce((arr, name, i, keys) => {
     let value = attributes[name];
     let attribute = span({},
-      span({className: "attr-name theme-fg-color2"}, `${name}`),
-      `="`,
-      span({className: "attr-value theme-fg-color6"}, `${value}`),
-      `"`
+      span({className: "attrName"}, name),
+      span({className: "attrEqual"}, "="),
+      StringRep({className: "attrValue", object: value}),
     );
 
     return arr.concat([" ", attribute]);
   }, []);
 
   return [
-    "<",
+    span({className: "angleBracket"}, "<"),
     nodeNameElement,
     ...attributeElements,
-    ">",
+    span({className: "angleBracket"}, ">"),
   ];
 }
 

packages/devtools-reps/src/reps/reps.css

@@ -6,14 +6,15 @@
 .theme-dark,
 .theme-light {
   --number-color: var(--theme-highlight-green);
-  --string-color: var(--theme-highlight-orange);
+  --string-color: var(--theme-highlight-red);
   --null-color: var(--theme-comment);
-  --object-color: var(--theme-body-color);
+  --object-color: var(--theme-highlight-blue);
   --caption-color: var(--theme-highlight-blue);
-  --location-color: var(--theme-content-color1);
+  --location-color: var(--theme-comment);
   --source-link-color: var(--theme-highlight-blue);
-  --node-color: var(--theme-highlight-bluegrey);
-  --reference-color: var(--theme-highlight-purple);
+  --node-color: var(--theme-highlight-purple);
+  --reference-color: var(--theme-highlight-blue);
+  --comment-node-color: var(--theme-comment);
 }
 
 .theme-firebug {
@@ -73,16 +74,16 @@
   color: var(--object-color);
 }
 
-.objectBox-Location {
-  font-style: italic;
+.objectBox-Location,
+.location {
   color: var(--location-color);
 }
 
 .objectBox-null,
 .objectBox-undefined,
 .objectBox-hint,
+.objectBox-nan,
 .logRowHint {
-  font-style: italic;
   color: var(--null-color);
 }
 
@@ -109,25 +110,42 @@
 .objectBox-event,
 .objectBox-eventLog,
 .objectBox-regexp,
-.objectBox-object,
-.objectBox-Date {
-  font-weight: bold;
+.objectBox-object {
   color: var(--object-color);
   white-space: pre-wrap;
 }
 
+.objectBox .Date {
+  color: var(--string-color);
+  white-space: pre-wrap;
+}
+
 /******************************************************************************/
 
-.objectBox-object .nodeName,
-.objectBox-NamedNodeMap .nodeName,
-.objectBox-NamedNodeMap .objectEqual,
-.objectBox-Attr .attrEqual,
-.objectBox-Attr .attrTitle {
+.objectBox.theme-comment {
+  color: var(--comment-node-color);
+}
+
+.tag-name {
+  color: var(--object-color);
+}
+
+.attrName {
+  color: var(--string-color);
+}
+
+.attrEqual,
+.objectEqual {
+  color: var(--comment-node-color);
+}
+
+.attrValue,
+.attrValue.objectBox-string {
   color: var(--node-color);
 }
 
-.objectBox-object .nodeName {
-  font-weight: normal;
+.angleBracket {
+  color: var(--theme-body-color);
 }
 
 /******************************************************************************/
@@ -136,7 +154,7 @@
 .objectRightBrace,
 .arrayLeftBracket,
 .arrayRightBracket {
-  color: var(--theme-highlight-blue);
+  color: var(--object-color);
 }
 
 /******************************************************************************/
@@ -147,14 +165,12 @@
   color: var(--reference-color);
 }
 
-[class*="objectBox-"] > .objectTitle {
-  color: var(--theme-highlight-blue);
-  font-style: italic;
+[class*="objectBox"] > .objectTitle {
+  color: var(--object-color);
 }
 
 .caption {
-  font-weight: bold;
-  color:  var(--caption-color);
+  color: var(--caption-color);
 }
 
 /******************************************************************************/
@@ -182,7 +198,7 @@
 /* Open DOMNode in inspector button */
 
 .open-inspector svg {
-  fill: rgb(215, 215, 215);
+  fill: var(--comment-node-color);
   height: 16px;
   width: 16px;
   margin-left: .25em;
@@ -193,11 +209,11 @@
 .objectBox-node:hover .open-inspector svg,
 .objectBox-textNode:hover .open-inspector svg,
 .open-inspector svg:hover {
-  fill: rgb(65, 175, 230);
+  fill: var(--theme-highlight-blue);
 }
 
 /******************************************************************************/
 /* "more…" ellipsis */
 .more-ellipsis {
-  color: var(--theme-comment);
+  color: var(--comment-node-color);
 }

packages/devtools-reps/src/reps/string.js

@@ -30,10 +30,12 @@ StringRep.propTypes = {
   member: React.PropTypes.any,
   cropLimit: React.PropTypes.number,
   openLink: React.PropTypes.func,
+  className: React.PropTypes.string,
 };
 
 function StringRep(props) {
   let {
+    className,
     cropLimit,
     object: text,
     member,
@@ -43,7 +45,11 @@ function StringRep(props) {
     openLink,
   } = props;
 
-  let config = {className: "objectBox objectBox-string"};
+  const classNames = ["objectBox", "objectBox-string"];
+  if (className) {
+    classNames.push(className);
+  }
+  let config = {className: classNames.join(" ")};
   if (style) {
     config.style = style;
   }

packages/devtools-reps/src/reps/tests/window.js

@@ -45,7 +45,7 @@ describe("test Window", () => {
       object: stub
     }));
 
-    expect(renderedComponent.find(".objectPropValue").text()).toEqual("about:newtab");
+    expect(renderedComponent.find(".location").text()).toEqual("about:newtab");
   });
 
   it("renders with expected text in TINY mode", () => {

packages/devtools-reps/src/reps/window.js

@@ -48,7 +48,7 @@ function WindowRep(props) {
     span(config,
       getTitle(object),
       " ",
-      span({className: "objectPropValue"},
+      span({className: "location"},
         getLocation(object)
       )
     )
@@ -57,7 +57,7 @@ function WindowRep(props) {
 
 function getTitle(object) {
   let title = object.displayClass || object.class || "Window";
-  return span({className: "objectBoxTitle"}, title);
+  return span({className: "objectTitle"}, title);
 }
 
 function getLocation(object) {