Bug 27235 - Web Inspector: use different text styles in property lists based on data type
Summary: Web Inspector: use different text styles in property lists based on data type
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Enhancement
Assignee: Nobody
Keywords: InRadar
: 29252 (view as bug list)
Depends on:
Reported: 2009-07-13 13:17 PDT by Patrick Mueller
Modified: 2015-05-05 21:09 PDT (History)
11 users (show)

See Also:

experimental patch - not intended for production (3.90 KB, patch)
2009-07-13 13:29 PDT, Patrick Mueller
no flags Details | Formatted Diff | Diff
snapshot showing results of experimental patch (44.39 KB, image/png)
2009-07-13 13:31 PDT, Patrick Mueller
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Patrick Mueller 2009-07-13 13:17:30 PDT
Firefox currently displays different types of data displayed in variable lists in different styles.  For an example, see:


Seems like a nice feature, something that could be added to Web Inspector.
Comment 1 Patrick Mueller 2009-07-13 13:29:25 PDT
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.
Comment 2 Patrick Mueller 2009-07-13 13:31:49 PDT
Created attachment 32676 [details]
snapshot showing results of experimental patch

the red arrows note some of the "new function"
Comment 3 Timothy Hatcher 2009-09-11 20:03:19 PDT
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).
Comment 4 Timothy Hatcher 2009-09-14 13:09:36 PDT
*** Bug 29252 has been marked as a duplicate of this bug. ***
Comment 5 Radar WebKit Bug Importer 2014-12-17 11:27:09 PST
Comment 6 Joseph Pecoraro 2015-05-05 21:09:55 PDT
The Web Inspector console now does display much better detail based on the type of the property. Give it a try!