Bug 27235 – Web Inspector: use different text styles in property lists based on data type

• Component: Web Inspector
• Status: RESOLVED FIXED

[Patrick Mueller]

Firefox currently displays different types of data displayed in variable lists in different styles.  For an example, see:

   http://muellerware.org/papers/js-debug-data-display/js-debug-data-display.html

Seems like a nice feature, something that could be added to Web Inspector.

[Patrick Mueller]

Created attachment 32675 [details]
experimental patch - not intended for production

Patch that supports some amount of styling of data, just to see how this would work.  Raises questions:

- it would be nice, in theory, to reuse the same styles used in the source frame - webkit-javascript-string, et al.  However, these aren't available in inspector.css, but are instead hammered into the source frame in the SourceFrame.js file.  I haven't investigated why the styles are done this way, but it makes reuse harder.

- reuse today may not be practical anyway; the blue for numbers isn't blue enough to distinguish from black; the purplish keyword color that could be used for keywords like null is already used as the style for the variable names, etc.  Should these be harmonized somehow?  Perhaps the purplish color for the variable names in the existing variable list could be changed to a greenish color, for instance.  

- the way that I added the function to stylize was to augment Object.describe() to take a third parameter which will return a string of HTML instead of just plain text.  Which means that all the text needs to be HTML escaped.  Which is overkill, performance-wise.  Maybe it's not an issue, performance-wise; it does make the code ickier - if left this way functionally, Object.describe() could probably be cleaned up a bit.

[Patrick Mueller]

Created attachment 32676 [details]
snapshot showing results of experimental patch

the red arrows note some of the "new function"

[Timothy Hatcher]

I think we should do this. Please CC me on bugs you would like me to comment on, I missed this until today!

I think italics for null/undefined would be good. Blue for numbers. Purple for functions (like Xcode).

[Timothy Hatcher]

*** Bug 29252 has been marked as a duplicate of this bug. ***

[Radar WebKit Bug Importer]

<rdar://problem/19281652>

[Joseph Pecoraro]

The Web Inspector console now does display much better detail based on the type of the property. Give it a try!