Commit 24d15025 authored by Erik Luo's avatar Erik Luo Committed by Commit Bot

DevTools: show names of all formatted non-array array-subtypes

Objects such as 'NodeList', 'HTMLAllCollection', and 'Arguments' are all
'array'-subtype, and require the same formatting logic as normal arrays.

However, unlike normal Arrays, they should print their name as part of
their result. For example, 'NodeList(5) [...]' instead of '(5) [...]'.

Screenshot: https://imgur.com/a/I41jb

Bug: 769998
Change-Id: I898e4e2be6c9a1bc5f05c341ab2bcc83e57deb2d
Reviewed-on: https://chromium-review.googlesource.com/691355
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: default avatarDmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#505873}
parent dc4c6aaf
Tests that console nicely formats HTML Collections, NodeLists and DOMTokenLists.
console-format-collections.js:33 [select#sel, sel: select#sel]
console-format-collections.js:37 []
console-format-collections.js:41 (2) [option, option, selectedIndex: 0]
console-format-collections.js:45 (10) [html, head, body, div.c1.c2.c3, form#f, select#sel, option, option, input, input, f: form#f, sel: select#sel, x: NodeList(2)]
console-format-collections.js:49 (3) [select#sel, input, input, sel: select#sel, x: RadioNodeList(2)]
console-format-collections.js:53 (2) [input, input, value: ""]
console-format-collections.js:33 HTMLCollection [select#sel, sel: select#sel]
console-format-collections.js:37 HTMLCollection []
console-format-collections.js:41 HTMLOptionsCollection(2) [option, option, selectedIndex: 0]
console-format-collections.js:45 HTMLAllCollection(10) [html, head, body, div.c1.c2.c3, form#f, select#sel, option, option, input, input, f: form#f, sel: select#sel, x: NodeList(2)]
console-format-collections.js:49 HTMLFormControlsCollection(3) [select#sel, input, input, sel: select#sel, x: RadioNodeList(2)]
console-format-collections.js:53 RadioNodeList(2) [input, input, value: ""]
console-format-collections.js:59 (2) [1, Array(2)]
console-format-collections.js:62 NonArrayWithLength {keys: Array(0)}
console-format-collections.js:69 (2) [1, "2", callee: ƒ, Symbol(Symbol.iterator): ƒ]
console-format-collections.js:73 (3) ["c1", "c2", "c3", value: "c1 c2 c3"]
console-format-collections.js:69 Arguments(2) [1, "2", callee: ƒ, Symbol(Symbol.iterator): ƒ]
console-format-collections.js:73 DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
console-format-collections.js:76 ArrayLike {length: 5}
console-format-collections.js:77 ArrayLike {length: 4294967295}
console-format-collections.js:79 ArrayLike {length: -5}
......@@ -18,18 +18,18 @@ console-format-collections.js:81 ArrayLike {length: NaN}
console-format-collections.js:82 ArrayLike {length: Infinity}
console-format-collections.js:83 ArrayLike {length: -0}
console-format-collections.js:84 ArrayLike {length: 4294967296}
console-format-collections.js:33 [select#sel, sel: select#sel]
console-format-collections.js:37 []
console-format-collections.js:41 (2) [option, option, selectedIndex: 0]
console-format-collections.js:45 (10) [html, head, body, div.c1.c2.c3, form#f, select#sel, option, option, input, input, f: form#f, sel: select#sel, x: NodeList(2)]
console-format-collections.js:49 (3) [select#sel, input, input, sel: select#sel, x: RadioNodeList(2)]
console-format-collections.js:53 (2) [input, input, value: ""]
console-format-collections.js:33 HTMLCollection [select#sel, sel: select#sel]
console-format-collections.js:37 HTMLCollection []
console-format-collections.js:41 HTMLOptionsCollection(2) [option, option, selectedIndex: 0]
console-format-collections.js:45 HTMLAllCollection(10) [html, head, body, div.c1.c2.c3, form#f, select#sel, option, option, input, input, f: form#f, sel: select#sel, x: NodeList(2)]
console-format-collections.js:49 HTMLFormControlsCollection(3) [select#sel, input, input, sel: select#sel, x: RadioNodeList(2)]
console-format-collections.js:53 RadioNodeList(2) [input, input, value: ""]
console-format-collections.js:59 (2) [1, Array(2)]
console-format-collections.js:62 NonArrayWithLength {keys: Array(0)}
console-format-collections.js:69 (2) [1, "2", callee: ƒ, Symbol(Symbol.iterator): ƒ]
console-format-collections.js:73 (3) ["c1", "c2", "c3", value: "c1 c2 c3"]
console-format-collections.js:76 (5) [empty × 5]
console-format-collections.js:77 (4294967295) [empty × 4294967295]
console-format-collections.js:69 Arguments(2) [1, "2", callee: ƒ, Symbol(Symbol.iterator): ƒ]
console-format-collections.js:73 DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
console-format-collections.js:76 ArrayLike(5) [empty × 5]
console-format-collections.js:77 ArrayLike(4294967295) [empty × 4294967295]
console-format-collections.js:79 ArrayLike {length: -5}
console-format-collections.js:80 ArrayLike {length: 5.6}
console-format-collections.js:81 ArrayLike {length: NaN}
......
......@@ -57,7 +57,7 @@ console-object-preview.js:68 (150) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
console-object-preview.js:70 Object with properties containing whitespaces console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text
console-object-preview.js:77 {" a b ": " a b ", c d: "c d", "": "", " ": " ", "a↵↵b↵c": "a↵↵b↵c"}"": """ ": " "" a b ": " a b ""a↵↵b↵c": "a↵↵b↵c"c d: "c d"__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object-preview > object-properties-preview source-code > name > object-value-string > name > object-value-string > name > object-value-string > name > object-value-string > name > object-value-string > object-state-note info-note > children expanded > selection fill > name > object-properties-section-separator > object-value-string value > object-value-string-quote > object-value-string-quote > children > selection fill > name > object-properties-section-separator > object-value-string value > object-value-string-quote > object-value-string-quote > children > selection fill > name > object-properties-section-separator > object-value-string value > object-value-string-quote > object-value-string-quote > children > selection fill > name > object-properties-section-separator > object-value-string value > object-value-string-quote > object-value-string-quote > children > selection fill > name > object-properties-section-separator > object-value-string value > object-value-string-quote > object-value-string-quote > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
console-object-preview.js:79 Object with a document.all property console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text
console-object-preview.js:80 {all: HTMLAllCollection(3)}all: (3) [html, head, body]__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object-preview > object-properties-preview source-code > name > object-value-array > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > object-value-array value > object-description > object-properties-preview source-code > object-value-node > webkit-html-tag-name > object-value-node > webkit-html-tag-name > object-value-node > webkit-html-tag-name > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
console-object-preview.js:80 {all: HTMLAllCollection(3)}all: HTMLAllCollection(3) [html, head, body]__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object-preview > object-properties-preview source-code > name > object-value-array > object-state-note info-note > children expanded > parent > selection fill > name > object-properties-section-separator > object-value-array value > object-description > object-properties-preview source-code > object-value-node > webkit-html-tag-name > object-value-node > webkit-html-tag-name > object-value-node > webkit-html-tag-name > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
console-object-preview.js:82 Object with special numbers console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text
console-object-preview.js:84 {nan: NaN, posInf: Infinity, negInf: -Infinity, negZero: -0}nan: NaNnegInf: -InfinitynegZero: -0posInf: Infinity__proto__: Object console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text > console-view-object-properties-section object-value-object source-code expanded > tree-outline-disclosure tree-outline-disclosure-hide-overflow > tree-outline source-code object-properties-section > parent object-properties-section-root-element expanded > selection fill > console-object-preview > object-properties-preview source-code > name > object-value-number > name > object-value-number > name > object-value-number > name > object-value-number > object-state-note info-note > children expanded > selection fill > name > object-properties-section-separator > object-value-number value > children > selection fill > name > object-properties-section-separator > object-value-number value > children > selection fill > name > object-properties-section-separator > object-value-number value > children > selection fill > name > object-properties-section-separator > object-value-number value > children > parent > selection fill > name object-properties-section-dimmed > object-properties-section-separator > object-value-object value > children
console-object-preview.js:86 Object with exactly 5 properties: expected to be lossless console-message > source-code > console-message-anchor > devtools-link > hidden console-message-badge > hide-badge-title > console-message-text
......
......@@ -20,7 +20,7 @@ temp12
temp13
{foo: "bar"}
temp14
(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
temp15
ƒ func() {}
temp16
......
......@@ -21,7 +21,7 @@ temp12
temp13
{foo: "bar"}
temp14
(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
temp15
ƒ func() {}
temp16
......
......@@ -605,7 +605,7 @@ console-format-startup.html:222 HTMLAllCollection(18)
p: p#p
sel: select#sel
svg-node: svg#svg-node
x: (3) [div#x, input, input]
x: NodeList(3) [div#x, input, input]
__proto__: HTMLAllCollection
console-format-startup.html:226 HTMLFormControlsCollection(3)
0: select#sel
......@@ -613,7 +613,7 @@ console-format-startup.html:226 HTMLFormControlsCollection(3)
2: input
length: 3
sel: select#sel
x: (2) [input, input, value: ""]
x: RadioNodeList(2) [input, input, value: ""]
__proto__: HTMLFormControlsCollection
console-format-startup.html:230 RadioNodeList(2)
0: input
......
......@@ -51,8 +51,8 @@ ObjectUI.RemoteObjectPreviewFormatter = class {
if (isArrayOrTypedArray) {
var arrayLength = SDK.RemoteObject.arrayLength(preview);
var arrayLengthText = arrayLength > 1 ? ('(' + arrayLength + ')') : '';
var arrayName = preview.subtype === 'typedarray' ? SDK.RemoteObject.arrayNameFromDescription(description) : '';
text = arrayName + arrayLengthText;
var arrayName = SDK.RemoteObject.arrayNameFromDescription(description);
text = arrayName === 'Array' ? arrayLengthText : (arrayName + arrayLengthText);
} else {
var hideDescription = previewExperimentEnabled && description === 'Object';
text = hideDescription ? '' : description;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment