Bug 1314573 - Make Reps "long" mode displays first 10 items for object & array-like grips; r=Honza draft
authorNicolas Chevobbe <chevobbe.nicolas@gmail.com>
Thu, 17 Nov 2016 08:02:28 +0100
changeset 440559 a7ff746662f006e1a132ce1e21cac3a0cbbea0e2
parent 440252 13f49da109ea460665ad27c8497cb1489548450c
child 440560 1c6f4c85ddc0054b431981b3198a1fd68495d360
child 440562 39fcc8ff5cb3386663fb5f0821cecd78abae00b3
push id36264
push userchevobbe.nicolas@gmail.com
push dateThu, 17 Nov 2016 20:23:00 +0000
reviewersHonza
bugs1314573
milestone53.0a1
Bug 1314573 - Make Reps "long" mode displays first 10 items for object & array-like grips; r=Honza Adapt tests that relied on an other length for long mode. MozReview-Commit-ID: J00UmOa2AwJ
devtools/client/shared/components/reps/array.js
devtools/client/shared/components/reps/grip-array.js
devtools/client/shared/components/reps/grip-map.js
devtools/client/shared/components/reps/grip.js
devtools/client/shared/components/test/mochitest/test_reps_array.html
devtools/client/shared/components/test/mochitest/test_reps_grip-array.html
devtools/client/shared/components/test/mochitest/test_reps_grip-map.html
devtools/client/shared/components/test/mochitest/test_reps_grip.html
--- a/devtools/client/shared/components/reps/array.js
+++ b/devtools/client/shared/components/reps/array.js
@@ -119,17 +119,17 @@ define(function (require, exports, modul
         return space ? { left: "[ ", right: " ]"} : { left: "[", right: "]"};
       };
 
       if (mode == "tiny") {
         let isEmpty = object.length === 0;
         items = [DOM.span({className: "length"}, isEmpty ? "" : object.length)];
         brackets = needSpace(false);
       } else {
-        let max = (mode == "short") ? 3 : 300;
+        let max = (mode == "short") ? 3 : 10;
         items = this.arrayIterator(object, max);
         brackets = needSpace(items.length > 0);
       }
 
       let objectLink = this.props.objectLink || DOM.span;
 
       return (
         DOM.span({
--- a/devtools/client/shared/components/reps/grip-array.js
+++ b/devtools/client/shared/components/reps/grip-array.js
@@ -118,17 +118,17 @@ define(function (require, exports, modul
       };
 
       if (mode == "tiny") {
         let objectLength = this.getLength(object);
         let isEmpty = objectLength === 0;
         items = [span({className: "length"}, isEmpty ? "" : objectLength)];
         brackets = needSpace(false);
       } else {
-        let max = (mode == "short") ? 3 : 300;
+        let max = (mode == "short") ? 3 : 10;
         items = this.arrayIterator(object, max);
         brackets = needSpace(items.length > 0);
       }
 
       let objectLink = this.props.objectLink || span;
       let title = this.getTitle(object);
 
       return (
--- a/devtools/client/shared/components/reps/grip-map.js
+++ b/devtools/client/shared/components/reps/grip-map.js
@@ -141,17 +141,17 @@ define(function (require, exports, modul
 
           return indexes;
         }, []);
     },
 
     render: function () {
       let object = this.props.object;
       let props = this.safeEntriesIterator(object,
-        (this.props.mode == "long") ? 100 : 3);
+        (this.props.mode == "long") ? 10 : 3);
 
       let objectLink = this.props.objectLink || span;
       if (this.props.mode == "tiny") {
         return (
           span({className: "objectBox objectBox-object"},
             this.getTitle(object),
             objectLink({
               className: "objectLeftBrace",
--- a/devtools/client/shared/components/reps/grip.js
+++ b/devtools/client/shared/components/reps/grip.js
@@ -192,17 +192,17 @@ define(function (require, exports, modul
         }
       }
       return value;
     },
 
     render: function () {
       let object = this.props.object;
       let props = this.safePropIterator(object,
-        (this.props.mode == "long") ? 100 : 3);
+        (this.props.mode == "long") ? 10 : 3);
 
       let objectLink = this.props.objectLink || span;
       if (this.props.mode == "tiny") {
         return (
           span({className: "objectBox objectBox-object"},
             this.getTitle(object),
             objectLink({
               className: "objectLeftBrace",
--- a/devtools/client/shared/components/test/mochitest/test_reps_array.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_array.html
@@ -21,17 +21,17 @@ Test ArrayRep rep
 
 window.onload = Task.async(function* () {
   let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
   let { ArrayRep } = browserRequire("devtools/client/shared/components/reps/array");
 
   let componentUnderTest = ArrayRep;
   const maxLength = {
     short: 3,
-    long: 300
+    long: 10
   };
 
   try {
     yield testBasic();
 
     // Test property iterator
     yield testMaxProps();
     yield testMoreThanShortMaxProps();
@@ -217,33 +217,29 @@ window.onload = Task.async(function* () 
       }
     ];
 
     testRepRenderModes(modeTests, "testNested", componentUnderTest, stub);
   }
 
   function testArray() {
     let stub = [
-      "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m",
-      "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"
-    ];
+      "a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
 
-    const defaultOutput = `[ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",` +
-                          ` "k", "l", "m", "n", "o", "p", "q", "r", "s", "t",` +
-                          ` "u", "v", "w", "x", "y", "z" ]`;
-    const shortOutput = `[ "a", "b", "c", 23 more… ]`;
+    const defaultOutput = `[ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j" ]`;
+    const shortOutput = `[ "a", "b", "c", 7 more… ]`;
 
     const modeTests = [
       {
         mode: undefined,
         expectedOutput: shortOutput,
       },
       {
         mode: "tiny",
-        expectedOutput: `[26]`,
+        expectedOutput: `[10]`,
       },
       {
         mode: "short",
         expectedOutput: shortOutput,
       },
       {
         mode: "long",
         expectedOutput: defaultOutput,
--- a/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html
@@ -18,17 +18,17 @@ Test GripArray rep
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
   let { GripArray } = browserRequire("devtools/client/shared/components/reps/grip-array");
 
   let componentUnderTest = GripArray;
   const maxLength = {
     short: 3,
-    long: 300
+    long: 10
   };
 
   try {
     yield testBasic();
 
     // Test property iterator
     yield testMaxProps();
     yield testMoreThanShortMaxProps();
--- a/devtools/client/shared/components/test/mochitest/test_reps_grip-map.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_grip-map.html
@@ -169,18 +169,18 @@ window.onload = Task.async(function* () 
     // Test object = `new Map(
     //   [["key-0", "value-0"], ["key-1", "value-1"]], …, ["key-100", "value-100"]]}`
     const testName = "testMoreThanMaxEntries";
 
     const defaultOutput =
       `Map { key-0: "value-0", key-1: "value-1", key-2: "value-2", 98 more… }`;
 
     // Generate string with 101 entries, which is the max limit for 'long' mode.
-    let longString = Array.from({length: 100}).map((_, i) => `key-${i}: "value-${i}"`);
-    const longOutput = `Map { ${longString.join(", ")}, 1 more… }`;
+    let longString = Array.from({length: 10}).map((_, i) => `key-${i}: "value-${i}"`);
+    const longOutput = `Map { ${longString.join(", ")}, 91 more… }`;
 
     const modeTests = [
       {
         mode: undefined,
         expectedOutput: defaultOutput,
       },
       {
         mode: "tiny",
--- a/devtools/client/shared/components/test/mochitest/test_reps_grip.html
+++ b/devtools/client/shared/components/test/mochitest/test_reps_grip.html
@@ -316,24 +316,23 @@ window.onload = Task.async(function* () 
   }
 
   function testMoreThanMaxProps() {
     // Test object = `{p0: "0", p1: "1", p2: "2", …, p100: "100"}`
     const testName = "testMoreThanMaxProps";
 
     const defaultOutput = `Object { p0: "0", p1: "1", p2: "2", 98 more… }`;
 
-    // Generate string with 100 properties, which is the max limit
-    // for 'long' mode.
-    let props = "";
-    for (let i = 0; i < 100; i++) {
-      props += "p" + i + ": \"" + i + "\", ";
+    // Generate string with 10 properties, which is the max limit for 'long' mode.
+    let props = [];
+    for (let i = 0; i < 10; i++) {
+      props.push(`p${i}: "${i}"`);
     }
 
-    const longOutput = `Object { ${props}1 more… }`;
+    const longOutput = `Object { ${props.join(", ")}, 91 more… }`;
 
     const modeTests = [
       {
         mode: undefined,
         expectedOutput: defaultOutput,
       },
       {
         mode: "tiny",