Bug 1313765 - Make Rep handles Proxy. r=Honza;

In the GripRep, we were using the root property `ownPropertyLength` to
retrieve additionnal uninterresting props on the Grip. For Proxy
objects, we don't have this property, but a `preview.ownPropertiesLength`.
This adds a test case similar to the one for Proxy in browser_webconsole_output_05.js.

MozReview-Commit-ID: 652cfTlW7Sg

--HG--
extra : rebase_source : a05306672264c2a449989075adddc35ddf5946e1

devtools/client/shared/components/reps/grip.js

@@ -70,8 +70,11 @@ define(function (require, exports, module) {
       });
 
       let ownProperties = object.preview ? object.preview.ownProperties : {};
+      let propertiesLength = object.preview && object.preview.ownPropertiesLength
+        ? object.preview.ownPropertiesLength
+        : object.ownPropertyLength;
       let indexes = this.getPropIndexes(ownProperties, max, isInterestingProp);
-      if (indexes.length < max && indexes.length < object.ownPropertyLength) {
+      if (indexes.length < max && indexes.length < propertiesLength) {
         // There are not enough props yet. Then add uninteresting props to display them.
         indexes = indexes.concat(
           this.getPropIndexes(ownProperties, max - indexes.length, (t, value, name) => {

devtools/client/shared/components/test/mochitest/test_reps_grip.html

@@ -25,6 +25,7 @@ window.onload = Task.async(function* () {
     yield testBooleanObject();
     yield testNumberObject();
     yield testStringObject();
+    yield testProxy();
 
     // Test property iterator
     yield testMaxProps();
@@ -180,6 +181,40 @@ window.onload = Task.async(function* () {
     testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
   }
 
+  function testProxy() {
+    // Test object: `new Proxy({a:1},[1,2,3])`
+    const testName = "testProxy";
+
+    // Test that correct rep is chosen
+    const gripStub = getGripStub(testName);
+    const renderedRep = shallowRenderComponent(Rep, { object: gripStub });
+    is(renderedRep.type, Grip.rep, `Rep correctly selects ${Grip.rep.displayName}`);
+
+    // Test rendering
+    const defaultOutput = `Proxy { <target>: Object, <handler>: [3] }`;
+
+    const modeTests = [
+      {
+        mode: undefined,
+        expectedOutput: defaultOutput,
+      },
+      {
+        mode: "tiny",
+        expectedOutput: `Proxy`,
+      },
+      {
+        mode: "short",
+        expectedOutput: defaultOutput,
+      },
+      {
+        mode: "long",
+        expectedOutput: defaultOutput,
+      }
+    ];
+
+    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
+  }
+
   function testMaxProps() {
     // Test object: `{a: "a", b: "b", c: "c"}`;
     const testName = "testMaxProps";
@@ -677,6 +712,54 @@ window.onload = Task.async(function* () {
             "wrappedValue": "foo"
           }
         };
+      case "testProxy":
+        return {
+          "type": "object",
+          "actor": "server1.conn1.child1/obj47",
+          "class": "Proxy",
+          "proxyTarget": {
+            "type": "object",
+            "actor": "server1.conn1.child1/obj48",
+            "class": "Object",
+            "ownPropertyLength": 1
+          },
+          "proxyHandler": {
+            "type": "object",
+            "actor": "server1.conn1.child1/obj49",
+            "class": "Array",
+            "ownPropertyLength": 4,
+            "preview": {
+              "kind": "ArrayLike",
+              "length": 3
+            }
+          },
+          "preview": {
+            "kind": "Object",
+            "ownProperties": {
+              "<target>": {
+                "value": {
+                  "type": "object",
+                  "actor": "server1.conn1.child1/obj48",
+                  "class": "Object",
+                  "ownPropertyLength": 1
+                }
+              },
+              "<handler>": {
+                "value": {
+                  "type": "object",
+                  "actor": "server1.conn1.child1/obj49",
+                  "class": "Array",
+                  "ownPropertyLength": 4,
+                  "preview": {
+                    "kind": "ArrayLike",
+                    "length": 3
+                  }
+                }
+              }
+            },
+            "ownPropertiesLength": 2
+          }
+        };
     }
   }
 });