Bug 28061 – Inspector: NodeLists Don't Display Well in the Console

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[Joseph Pecoraro]

This currently stems from another bug:
Title: typeof document.body.childNodes=="function"
Link: https://bugs.webkit.org/show_bug.cgi?id=14547

This can easily be worked around if before formatting the object we check this special case.

  if (output instanceof NodeList)
      type = "array"; // or "object"

I have a feeling its inappropriate to put this special check inside Object.type (utilities.js), but it can be done specifically inside of WebInspector.ConsoleView._format (ConsoleView).

Any preference for how it should display?
  - Object (expand triangle)
  - Array (being nodes it will be an array of inline html tree outlines)

[Joseph Pecoraro]

Created attachment 34248 [details]
Showing Multiple Display Options for a NodeList

Here are three different ways to display the NodeList (Currently as a "function", as an "array", and as an "object").  Which do you like best?

[Timothy Hatcher]

I think array is best.

[Joseph Pecoraro]

Created attachment 34249 [details]
Display NodeList like an Array

Display like an array.  Although this doesn't show the indexes, I still like this approach.  Image:
http://bogojoker.com/snaps/as_array.png

[Adam Barth]

Comment on attachment 34249 [details]
Display NodeList like an Array

Clearing review flag on attachment: 34249

Committing to http://svn.webkit.org/repository/webkit/trunk ...
	M	WebCore/ChangeLog
	M	WebCore/inspector/front-end/ConsoleView.js
Committed r46886
	M	WebCore/ChangeLog
	M	WebCore/inspector/front-end/ConsoleView.js
r46886 = 608b85eaa5602133c0facc6c3ea320c176aa4bf5 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
http://trac.webkit.org/changeset/46886

[Adam Barth]

All reviewed patches have been landed.  Closing bug.

[Sam Weinig]

Should we do this for other array like structures such as HTMLCollection?

[Joseph Pecoraro]

Created attachment 40565 [details]
[PATCH] Display NodeList as an Array

Looks like this got lost in the Inspector Serialization.

[Joseph Pecoraro]

Comment on attachment 34249 [details]
Display NodeList like an Array

Cleared Flags on old patch.

[Joseph Pecoraro]

Created attachment 40566 [details]
[PATCH] Display NodeList as an Array

Better solution, more in line with the previous solution, thanks to guidance from pfeldman.

[Pavel Feldman]

Comment on attachment 40565 [details]
[PATCH] Display NodeList as an Array

> +        if (isProxy && output.description === "NodeList")
> +            type = "array";

This would trigger on a string with value == "NodeList". So you should no rely upon description.
Instead, we could patch Object.type on the injected script side to pretend NodeList has an "array" type.

[Pavel Feldman]

(In reply to comment #9)
> Created an attachment (id=40566) [details]
> [PATCH] Display NodeList as an Array
> 
> Better solution, more in line with the previous solution, thanks to guidance
> from pfeldman.

This patch looks good.

[Joseph Pecoraro]

Landed in http://trac.webkit.org/changeset/49298
r49298 = 74c5d0dca10afaf5f4886c5fcb48e80dd5e3612d (trunk)