Render Reps as TINY mode when the node is expanded.

Doing this makes the tree less cluttered.

Author: nchevobbe

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

@@ -388,6 +388,9 @@ class ObjectInspector extends Component {
           ? MODE.SHORT
           : MODE.TINY;
       }
+      if (expanded) {
+        repsProp.mode = MODE.TINY;
+      }
 
       objectValue = this.renderGrip(item, repsProp);
     }

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

@@ -51,7 +51,7 @@ exports[`ObjectInspector - entries does not call enumEntries if entries are alre
 `;
 
 exports[`ObjectInspector - entries renders Object with entries as expected 1`] = `
-"▼ Map { Symbol(a) → \\"value-a\\", Symbol(b) → \\"value-b\\" }
+"▼ Map
 |    size : 2
 |  ▼ <entries>
 |  |  ▼ 0 : Symbol(a) → \\"value-a\\"
@@ -60,5 +60,5 @@ exports[`ObjectInspector - entries renders Object with entries as expected 1`] =
 |  |  ▼ 1 : Symbol(b) → \\"value-b\\"
 |  |  |    <key> : Symbol(b)
 |  |  |    <value> : \\"value-b\\"
-|  ▼ __proto__ : Object { … }"
+|  ▼ __proto__ : {…}"
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ObjectInspector - Proxy renders Proxy as expected 1`] = `
-"▼ Proxy { <target>: {…}, <handler>: […] }
+"▼ Proxy
 |  ▶︎ <target> : Object { … }
 |  ▶︎ <handler> : Array [ … ]
 |    __proto__ : Object {  }"

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

@@ -6,7 +6,7 @@ exports[`ObjectInspector - state has the expected expandedPaths state 1`] = `
 `;
 
 exports[`ObjectInspector - state has the expected expandedPaths state 2`] = `
-"▼ Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", p3: \\"3\\", p4: \\"4\\", p5: \\"5\\", p6: \\"6\\", p7: \\"7\\", p8: \\"8\\", p9: \\"9\\", … }
+"▼ {…}
 |    a : 1
 |    Symbol() : \\"hello\\"
 |  ▶︎ __proto__ : Object { … }
@@ -20,17 +20,17 @@ exports[`ObjectInspector - state has the expected expandedPaths state 3`] = `
 
 exports[`ObjectInspector - state has the expected expandedPaths state 4`] = `
 "▶︎ Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", p3: \\"3\\", p4: \\"4\\", p5: \\"5\\", p6: \\"6\\", p7: \\"7\\", p8: \\"8\\", p9: \\"9\\", … }
-▼ Proxy { <target>: {…}, <handler>: […] }
+▼ Proxy
 |  ▶︎ <target> : Object { … }
 |  ▶︎ <handler> : Array [ … ]"
 `;
 
 exports[`ObjectInspector - state has the expected expandedPaths state 5`] = `
-"▼ Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", p3: \\"3\\", p4: \\"4\\", p5: \\"5\\", p6: \\"6\\", p7: \\"7\\", p8: \\"8\\", p9: \\"9\\", … }
+"▼ {…}
 |    a : 1
 |    Symbol() : \\"hello\\"
 |  ▶︎ __proto__ : Object { … }
-▼ Proxy { <target>: {…}, <handler>: […] }
+▼ Proxy
 |  ▶︎ <target> : Object { … }
 |  ▶︎ <handler> : Array [ … ]"
 `;
@@ -41,7 +41,7 @@ exports[`ObjectInspector - state has the expected state when expanding a node 1`
 `;
 
 exports[`ObjectInspector - state has the expected state when expanding a node 2`] = `
-"▼ Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", p3: \\"3\\", p4: \\"4\\", p5: \\"5\\", p6: \\"6\\", p7: \\"7\\", p8: \\"8\\", p9: \\"9\\", … }
+"▼ {…}
 |    __proto__ : Object {  }
 ▶︎ Proxy { <target>: {…}, <handler>: […] }"
 `;
@@ -53,17 +53,17 @@ exports[`ObjectInspector - state has the expected state when expanding a proxy n
 
 exports[`ObjectInspector - state has the expected state when expanding a proxy node 2`] = `
 "▶︎ Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", p3: \\"3\\", p4: \\"4\\", p5: \\"5\\", p6: \\"6\\", p7: \\"7\\", p8: \\"8\\", p9: \\"9\\", … }
-▼ Proxy { <target>: {…}, <handler>: […] }
+▼ Proxy
 |  ▶︎ <target> : Object { … }
 |  ▶︎ <handler> : Array [ … ]
 |  ▶︎ __proto__ : Object {  }"
 `;
 
 exports[`ObjectInspector - state has the expected state when expanding a proxy node 3`] = `
 "▶︎ Object { p0: \\"0\\", p1: \\"1\\", p2: \\"2\\", p3: \\"3\\", p4: \\"4\\", p5: \\"5\\", p6: \\"6\\", p7: \\"7\\", p8: \\"8\\", p9: \\"9\\", … }
-▼ Proxy { <target>: {…}, <handler>: […] }
+▼ Proxy
 |  ▶︎ <target> : Object { … }
 |  ▶︎ <handler> : Array [ … ]
-|  ▼ __proto__ : Object {  }
+|  ▼ __proto__ : {}
 |  |  ▶︎ __proto__ : Object {  }"
 `;

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

@@ -63,6 +63,7 @@ describe("ObjectInspector - functions", () => {
   it("renders non-TINY mode functions as expected", () => {
     const stub = functionStubs.get("Named");
     const oi = mount(ObjectInspector(generateDefaults({
+      autoExpandDepth: 0,
       roots: [{
         path: "root",
         name: "x",