Tweak styling in order to integrate it in the console

Author: nchevobbe

packages/devtools-components/src/tree.js

@@ -277,7 +277,7 @@ const Tree = module.exports = createClass({
 
     return dom.div(
       {
-        className: "tree",
+        className: `tree ${this.props.className ? this.props.className : ""}`,
         ref: "tree",
         onKeyDown: this._onKeyDown,
         onKeyPress: this._preventArrowKeyScrolling,

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

@@ -3,9 +3,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .tree {
-  white-space: nowrap;
   overflow: auto;
-  min-width: 100%;
+  display: inline-block;
+}
+
+.tree.nowrap {
+  white-space: nowrap;
 }
 
 .tree.noselect {
@@ -32,24 +35,23 @@
 }
 
 .arrow svg {
-  --width: 10px;
   fill: var(--theme-splitter-color);
-  /*margin-top: 3px;*/
   transition: transform 0.125s ease;
-  width: var(--width);
-  /*margin-top: calc((16px - var(--width) / 2));*/
-}
-
-html:not([dir="rtl"]) .arrow svg {
-  margin-right: 5px;
+  width: 10px;
+  margin-inline-end: 5px;
   transform: rotate(-90deg);
 }
 
-html[dir="rtl"] .arrow svg {
-  margin-left: 5px;
+html[dir="rtl"] .arrow svg,
+.arrow svg:dir(rtl),
+.arrow svg:-moz-locale-dir(rtl) {
   transform: rotate(90deg);
 }
 
 .arrow.expanded.expanded svg {
   transform: rotate(0deg);
 }
+
+.object-label {
+  color: var(--theme-highlight-blue);
+}

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

@@ -45,6 +45,7 @@ type Props = {
   itemHeight: number,
   mode: Mode,
   roots: Array<ObjectInspectorItem>,
+  disableWrap: boolean,
   getObjectProperties: (actor:string) => any,
   loadObjectProperties: (value:Grip) => any,
   onFocus: ?(ObjectInspectorItem) => any,
@@ -333,6 +334,7 @@ class ObjectInspector extends Component {
       autoExpandAll = true,
       disabledFocus,
       itemHeight = 20,
+      disableWrap = false,
     } = this.props;
 
     const {
@@ -346,6 +348,7 @@ class ObjectInspector extends Component {
     }
 
     return Tree({
+      className: disableWrap ? "nowrap" : "",
       autoExpandAll,
       autoExpandDepth,
       disabledFocus,
@@ -374,6 +377,7 @@ ObjectInspector.propTypes = {
   autoExpandAll: PropTypes.bool,
   autoExpandDepth: PropTypes.number,
   disabledFocus: PropTypes.bool,
+  disableWrap: PropTypes.bool,
   roots: PropTypes.array,
   getObjectProperties: PropTypes.func.isRequired,
   loadObjectProperties: PropTypes.func.isRequired,

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

@@ -30,11 +30,6 @@
 
 /******************************************************************************/
 
-.objectLink:hover {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
 .inline {
   display: inline;
   white-space: normal;
@@ -49,15 +44,15 @@
 .objectBox-string,
 .objectBox-symbol,
 .objectBox-text,
-.objectLink-textNode,
+.objectBox-textNode,
 .objectBox-table {
   white-space: pre-wrap;
 }
 
 .objectBox-number,
-.objectLink-styleRule,
-.objectLink-element,
-.objectLink-textNode,
+.objectBox-styleRule,
+.objectBox-element,
+.objectBox-textNode,
 .objectBox-array > .length {
   color: var(--number-color);
 }
@@ -68,13 +63,13 @@
   color: var(--string-color);
 }
 
-.objectLink-function,
+.objectBox-function,
 .objectBox-stackTrace,
-.objectLink-profile {
+.objectBox-profile {
   color: var(--object-color);
 }
 
-.objectLink-Location {
+.objectBox-Location {
   font-style: italic;
   color: var(--location-color);
 }
@@ -87,7 +82,7 @@
   color: var(--null-color);
 }
 
-.objectLink-sourceLink {
+.objectBox-sourceLink {
   position: absolute;
   right: 4px;
   top: 2px;
@@ -107,29 +102,27 @@
 
 /******************************************************************************/
 
-.objectLink-event,
-.objectLink-eventLog,
-.objectLink-regexp,
-.objectLink-object,
-.objectLink-Date {
+.objectBox-event,
+.objectBox-eventLog,
+.objectBox-regexp,
+.objectBox-object,
+.objectBox-Date {
   font-weight: bold;
   color: var(--object-color);
   white-space: pre-wrap;
 }
 
 /******************************************************************************/
 
-.objectLink-object .nodeName,
-.objectLink-NamedNodeMap .nodeName,
-.objectLink-NamedNodeMap .objectEqual,
-.objectLink-NamedNodeMap .arrayLeftBracket,
-.objectLink-NamedNodeMap .arrayRightBracket,
-.objectLink-Attr .attrEqual,
-.objectLink-Attr .attrTitle {
+.objectBox-object .nodeName,
+.objectBox-NamedNodeMap .nodeName,
+.objectBox-NamedNodeMap .objectEqual,
+.objectBox-Attr .attrEqual,
+.objectBox-Attr .attrTitle {
   color: var(--node-color);
 }
 
-.objectLink-object .nodeName {
+.objectBox-object .nodeName {
   font-weight: normal;
 }
 
@@ -139,21 +132,20 @@
 .objectRightBrace,
 .arrayLeftBracket,
 .arrayRightBracket {
-  cursor: pointer;
-  font-weight: bold;
+  color: var(--theme-highlight-blue);
 }
 
 /******************************************************************************/
 /* Cycle reference*/
 
-.objectLink-Reference {
+.objectBox-Reference {
   font-weight: bold;
   color: var(--reference-color);
 }
 
-.objectBox-array > .objectTitle {
-  font-weight: bold;
-  color: var(--object-color);
+[class*="objectBox-"] > .objectTitle {
+  color: var(--theme-highlight-blue);
+  font-style: italic;
 }
 
 .caption {