diff --git a/devtools/client/shared/components/reps/grip-array.js b/devtools/client/shared/components/reps/grip-array.js index 7d1558ae46fc..04a5603bb46f 100644 --- a/devtools/client/shared/components/reps/grip-array.js +++ b/devtools/client/shared/components/reps/grip-array.js @@ -30,7 +30,11 @@ define(function (require, exports, module) { }, getLength: function (grip) { - return grip.preview ? grip.preview.length : 0; + if (!grip.preview) { + return 0; + } + + return grip.preview.length || grip.preview.childNodesLength || 0; }, getTitle: function (object, context) { @@ -43,28 +47,37 @@ define(function (require, exports, module) { return ""; }, + getPreviewItems: function (grip) { + if (!grip.preview) { + return null; + } + + return grip.preview.items || grip.preview.childNodes || null; + }, + arrayIterator: function (grip, max) { let items = []; + const gripLength = this.getLength(grip); - if (!grip.preview || !grip.preview.length) { + if (!gripLength) { return items; } - let array = grip.preview.items; - if (!array) { + const previewItems = this.getPreviewItems(grip); + if (!previewItems) { return items; } 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; + // number of grip preview items is limited to 10, but we may have more + // items in grip-array. + let delimMax = gripLength > previewItems.length ? + previewItems.length : previewItems.length - 1; let provider = this.props.provider; - for (let i = 0; i < array.length && i < max; i++) { + for (let i = 0; i < previewItems.length && i < max; i++) { try { - let itemGrip = array[i]; + let itemGrip = previewItems[i]; let value = provider ? provider.getValue(itemGrip) : itemGrip; delim = (i == delimMax ? "" : ", "); @@ -80,10 +93,10 @@ define(function (require, exports, module) { }))); } } - if (array.length > max || grip.preview.length > array.length) { + if (previewItems.length > max || gripLength > previewItems.length) { let objectLink = this.props.objectLink || span; - let leftItemNum = grip.preview.length - max > 0 ? - grip.preview.length - max : grip.preview.length - array.length; + let leftItemNum = gripLength - max > 0 ? + gripLength - max : gripLength - previewItems.length; items.push(Caption({ object: objectLink({ object: this.props.object @@ -170,7 +183,11 @@ define(function (require, exports, module) { return false; } - return (grip.preview && grip.preview.kind == "ArrayLike"); + return (grip.preview && ( + grip.preview.kind == "ArrayLike" || + type === "DocumentFragment" + ) + ); } // Exports from this module diff --git a/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html b/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html index 1e8ddbd3c563..db4f0296e1ef 100644 --- a/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html +++ b/devtools/client/shared/components/test/mochitest/test_reps_grip-array.html @@ -37,6 +37,7 @@ window.onload = Task.async(function* () { yield testPreviewLimit(); yield testNamedNodeMap(); yield testNodeList(); + yield testDocumentFragment(); } catch(e) { ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); } finally { @@ -272,6 +273,38 @@ window.onload = Task.async(function* () { testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName)); } + function testDocumentFragment() { + const testName = "testDocumentFragment"; + + const defaultOutput = "DocumentFragment [ li#li-0.list-element, " + + "li#li-1.list-element, li#li-2.list-element, 2 more… ]"; + + const longOutput = "DocumentFragment [ " + + "li#li-0.list-element, li#li-1.list-element, li#li-2.list-element, " + + "li#li-3.list-element, li#li-4.list-element ]"; + + const modeTests = [ + { + mode: undefined, + expectedOutput: defaultOutput, + }, + { + mode: "tiny", + expectedOutput: `[5]`, + }, + { + mode: "short", + expectedOutput: defaultOutput, + }, + { + mode: "long", + expectedOutput: longOutput, + } + ]; + + testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName)); + } + function getGripStub(functionName) { switch (functionName) { case "testBasic": @@ -412,67 +445,68 @@ window.onload = Task.async(function* () { } }; - case "testNamedNodeMap": - return { - "type": "object", - "class": "NamedNodeMap", - "actor": "server1.conn3.obj42", - "extensible": true, - "frozen": false, - "sealed": false, - "ownPropertyLength": 6, - "preview": { - "kind": "ArrayLike", - "length": 3, - "items": [ - { - "type": "object", - "class": "Attr", - "actor": "server1.conn3.obj43", - "extensible": true, - "frozen": false, - "sealed": false, - "ownPropertyLength": 0, - "preview": { - "kind": "DOMNode", - "nodeType": 2, - "nodeName": "class", - "value": "myclass" - } - }, - { - "type": "object", - "class": "Attr", - "actor": "server1.conn3.obj44", - "extensible": true, - "frozen": false, - "sealed": false, - "ownPropertyLength": 0, - "preview": { - "kind": "DOMNode", - "nodeType": 2, - "nodeName": "cellpadding", - "value": "7" - } - }, - { - "type": "object", - "class": "Attr", - "actor": "server1.conn3.obj44", - "extensible": true, - "frozen": false, - "sealed": false, - "ownPropertyLength": 0, - "preview": { - "kind": "DOMNode", - "nodeType": 2, - "nodeName": "border", - "value": "3" - } + case "testNamedNodeMap": + return { + "type": "object", + "class": "NamedNodeMap", + "actor": "server1.conn3.obj42", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 6, + "preview": { + "kind": "ArrayLike", + "length": 3, + "items": [ + { + "type": "object", + "class": "Attr", + "actor": "server1.conn3.obj43", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 2, + "nodeName": "class", + "value": "myclass" } - ] - } - }; + }, + { + "type": "object", + "class": "Attr", + "actor": "server1.conn3.obj44", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 2, + "nodeName": "cellpadding", + "value": "7" + } + }, + { + "type": "object", + "class": "Attr", + "actor": "server1.conn3.obj44", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 2, + "nodeName": "border", + "value": "3" + } + } + ] + } + }; + case "testNodeList": return { "type": "object", @@ -549,7 +583,122 @@ window.onload = Task.async(function* () { ] } }; + + case "testDocumentFragment": + return { + "type": "object", + "actor": "server1.conn1.child1/obj45", + "class": "DocumentFragment", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 11, + "nodeName": "#document-fragment", + "childNodesLength": 5, + "childNodes": [ + { + "type": "object", + "actor": "server1.conn1.child1/obj46", + "class": "HTMLLIElement", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 1, + "nodeName": "li", + "attributes": { + "id": "li-0", + "class": "list-element" + }, + "attributesLength": 2 + } + }, + { + "type": "object", + "actor": "server1.conn1.child1/obj47", + "class": "HTMLLIElement", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 1, + "nodeName": "li", + "attributes": { + "id": "li-1", + "class": "list-element" + }, + "attributesLength": 2 + } + }, + { + "type": "object", + "actor": "server1.conn1.child1/obj48", + "class": "HTMLLIElement", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 1, + "nodeName": "li", + "attributes": { + "id": "li-2", + "class": "list-element" + }, + "attributesLength": 2 + } + }, + { + "type": "object", + "actor": "server1.conn1.child1/obj49", + "class": "HTMLLIElement", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 1, + "nodeName": "li", + "attributes": { + "id": "li-3", + "class": "list-element" + }, + "attributesLength": 2 + } + }, + { + "type": "object", + "actor": "server1.conn1.child1/obj50", + "class": "HTMLLIElement", + "extensible": true, + "frozen": false, + "sealed": false, + "ownPropertyLength": 0, + "preview": { + "kind": "DOMNode", + "nodeType": 1, + "nodeName": "li", + "attributes": { + "id": "li-4", + "class": "list-element" + }, + "attributesLength": 2 + } + } + ] + } + }; } + return null; } });