Bug 1286259 - Reps: grip-array rep should support limited preview; r=Honza

MozReview-Commit-ID: IiATBSqv4Wz

--HG--
extra : rebase_source : 672102033e03f72ea1d5ba20b49bf5e226d8f3ff

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

@@ -56,6 +56,10 @@ define(function (require, exports, module) {
       }
 
       let delim;
+      // number of grip.preview.items is limited to 10, but we may have more
+      // items in grip-array
+      let delimMax = grip.preview.length > array.length ?
+        array.length : array.length - 1;
       let provider = this.props.provider;
 
       for (let i = 0; i < array.length && i < max; i++) {
@@ -63,7 +67,7 @@ define(function (require, exports, module) {
           let itemGrip = array[i];
           let value = provider ? provider.getValue(itemGrip) : itemGrip;
 
-          delim = (i == array.length - 1 ? "" : ", ");
+          delim = (i == delimMax ? "" : ", ");
 
           if (value === array) {
             items.push(Reference({
@@ -86,14 +90,15 @@ define(function (require, exports, module) {
           )));
         }
       }
-
-      if (array.length > max) {
+      if (array.length > max || grip.preview.length > array.length) {
         let objectLink = this.props.objectLink || span;
+        let leftItemNum = grip.preview.length - max > 0 ?
+          grip.preview.length - max : grip.preview.length - array.length;
         items.push(Caption({
           key: "more",
           object: objectLink({
             object: this.props.object
-          }, (grip.preview.length - max) + " more…")
+          }, leftItemNum + " more…")
         }));
       }
 

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

@@ -32,6 +32,7 @@ window.onload = Task.async(function* () {
     yield testMoreThanShortMaxProps();
     yield testMoreThanLongMaxProps();
     yield testRecursiveArray();
+    yield testPreviewLimit();
 
     yield testNamedNodeMap();
   } catch(e) {
@@ -190,6 +191,34 @@ window.onload = Task.async(function* () {
     testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
   }
 
+  function testPreviewLimit() {
+    const testName = "testPreviewLimit";
+
+    const shortOutput = `Array[0, 1, 2, 8 more…]`;
+    const defaultOutput = `Array[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 more…]`;
+
+    const modeTests = [
+      {
+        mode: undefined,
+        expectedOutput: shortOutput,
+      },
+      {
+        mode: "tiny",
+        expectedOutput: `[11]`,
+      },
+      {
+        mode: "short",
+        expectedOutput: shortOutput,
+      },
+      {
+        mode: "long",
+        expectedOutput: defaultOutput,
+      }
+    ];
+
+    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
+  }
+
   function testNamedNodeMap() {
     const testName = "testNamedNodeMap";
 
@@ -311,6 +340,22 @@ window.onload = Task.async(function* () {
 
         return longArrayGrip;
 
+      case "testPreviewLimit":
+        return {
+          "type": "object",
+          "class": "Array",
+          "actor": "server1.conn1.obj31",
+          "extensible": true,
+          "frozen": false,
+          "sealed": false,
+          "ownPropertyLength": 12,
+          "preview": {
+            "kind": "ArrayLike",
+            "length": 11,
+            "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+          }
+        };
+
       case "testRecursiveArray":
         return {
           "type": "object",