Add a prop to have ObjectInspector inline.

Author: nchevobbe

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

@@ -4,6 +4,9 @@
 
 .tree {
   overflow: auto;
+}
+
+.tree.inline {
   display: inline-block;
 }
 

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

@@ -60,6 +60,7 @@ type Props = {
   autoExpandDepth: number,
   disabledFocus: boolean,
   itemHeight: number,
+  inline: boolean,
   mode: Mode,
   roots: Array<Node>,
   disableWrap: boolean,
@@ -373,6 +374,7 @@ class ObjectInspector extends Component {
       autoExpandDepth = 1,
       autoExpandAll = true,
       disabledFocus,
+      inline,
       itemHeight = 20,
       disableWrap = false,
     } = this.props;
@@ -392,7 +394,10 @@ class ObjectInspector extends Component {
     }
 
     return Tree({
-      className: disableWrap ? "nowrap" : "",
+      className: classnames({
+        inline,
+        nowrap: disableWrap,
+      }),
       autoExpandAll,
       autoExpandDepth,
       disabledFocus,
@@ -422,6 +427,7 @@ ObjectInspector.propTypes = {
   autoExpandDepth: PropTypes.number,
   disabledFocus: PropTypes.bool,
   disableWrap: PropTypes.bool,
+  inline: PropTypes.bool,
   roots: PropTypes.array,
   getObjectProperties: PropTypes.func.isRequired,
   loadObjectProperties: PropTypes.func.isRequired,

packages/devtools-reps/src/object-inspector/tests/component/__snapshots__/classnames.js.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ObjectInspector - classnames has the expected class 1`] = `
+<ObjectInspector
+  autoExpandDepth={0}
+  getObjectProperties={[Function]}
+  loadObjectProperties={[Function]}
+  roots={
+    Array [
+      Object {
+        "contents": Object {
+          "value": 42,
+        },
+        "name": "root",
+        "path": "root",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`ObjectInspector - classnames has the inline class when inline prop is true 1`] = `
+<ObjectInspector
+  autoExpandDepth={0}
+  getObjectProperties={[Function]}
+  inline={true}
+  loadObjectProperties={[Function]}
+  roots={
+    Array [
+      Object {
+        "contents": Object {
+          "value": 42,
+        },
+        "name": "root",
+        "path": "root",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`ObjectInspector - classnames has the nowrap class when disableWrap prop is true 1`] = `
+<ObjectInspector
+  autoExpandDepth={0}
+  disableWrap={true}
+  getObjectProperties={[Function]}
+  loadObjectProperties={[Function]}
+  roots={
+    Array [
+      Object {
+        "contents": Object {
+          "value": 42,
+        },
+        "name": "root",
+        "path": "root",
+      },
+    ]
+  }
+/>
+`;

packages/devtools-reps/src/object-inspector/tests/component/classnames.js

@@ -0,0 +1,54 @@
+/* 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/. */
+
+const { mount } = require("enzyme");
+const React = require("react");
+const { createFactory } = React;
+const ObjectInspector = createFactory(require("../../index"));
+
+function generateDefaults(overrides) {
+  return Object.assign({
+    autoExpandDepth: 0,
+    roots: [{
+      path: "root",
+      name: "root",
+      contents: {value: 42}
+    }],
+    getObjectProperties: () => {},
+    loadObjectProperties: () => {},
+  }, overrides);
+}
+
+describe("ObjectInspector - classnames", () => {
+  it("has the expected class", () => {
+    const props = generateDefaults();
+    const oi = ObjectInspector(props);
+    const wrapper = mount(oi);
+
+    expect(wrapper.hasClass("tree")).toBeTruthy();
+    expect(wrapper.hasClass("inline")).toBeFalsy();
+    expect(wrapper.hasClass("nowrap")).toBeFalsy();
+    expect(oi).toMatchSnapshot();
+  });
+
+  it("has the nowrap class when disableWrap prop is true", () => {
+    const props = generateDefaults({
+      disableWrap: true,
+    });
+    const oi = ObjectInspector(props);
+    const wrapper = mount(oi);
+    expect(wrapper.hasClass("nowrap")).toBeTruthy();
+    expect(oi).toMatchSnapshot();
+  });
+
+  it("has the inline class when inline prop is true", () => {
+    const props = generateDefaults({
+      inline: true,
+    });
+    const oi = ObjectInspector(props);
+    const wrapper = mount(oi);
+    expect(wrapper.hasClass("inline")).toBeTruthy();
+    expect(oi).toMatchSnapshot();
+  });
+});