Merge pull request #485 from devtools-html/styling

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/bin/copy-assets.js

@@ -32,13 +32,6 @@ function start() {
 
   console.log("  output path is:", mcPath);
 
-  console.log("  copying reps.css...");
-  copyFile(
-    path.resolve(projectPath, "src/reps/reps.css"),
-    path.join(mcPath, mcModulePath, "reps.css"),
-    {cwd: projectPath}
-  );
-
   console.log("  creating reps.js bundle...");
   makeBundle({
     outputPath: path.join(mcPath, mcModulePath),

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/date-time.js

@@ -42,7 +42,9 @@ function DateTime(props) {
 }
 
 function getTitle(grip) {
-  return span({}, grip.class + " ");
+  return span({
+    className: "objectTitle"
+  }, grip.class + " ");
 }
 
 // Registration

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

@@ -44,7 +44,9 @@ function getLocation(grip) {
 }
 
 function getTitle(grip) {
-  return span({}, grip.class + " ");
+  return span({
+    className: "objectTitle",
+  }, grip.class + " ");
 }
 
 // Registration

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

@@ -52,7 +52,9 @@ function getTitle(props, grip) {
     title = "async " + title;
   }
 
-  return span({}, title);
+  return span({
+    className: "objectTitle",
+  }, title);
 }
 
 function summarizeFunction(grip) {

packages/devtools-reps/src/reps/grip-array.js

@@ -98,7 +98,9 @@ function getTitle(props, object) {
   }
 
   let title = props.title || object.class || "Array";
-  return span({}, title + " ");
+  return span({
+    className: "objectTitle",
+  }, title + " ");
 }
 
 function getPreviewItems(grip) {

packages/devtools-reps/src/reps/grip-map.js

@@ -64,7 +64,9 @@ function GripMap(props) {
 
 function getTitle(props, object) {
   let title = props.title || (object && object.class ? object.class : "Map");
-  return span({}, title);
+  return span({
+    className: "objectTitle",
+  }, title);
 }
 
 function safeEntriesIterator(props, object, max) {

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

@@ -67,7 +67,9 @@ function GripRep(props) {
 
 function getTitle(props, object) {
   let title = props.title || object.class || "Object";
-  return span({}, title);
+  return span({
+    className: "objectTitle",
+  }, title);
 }
 
 function safePropIterator(props, object, max) {