Bug 108852 – Web Inspector: populate CSS color picker with a palette of used page colors

• Status: NEW
• Component: Web Inspector

[Brian Grinstead]

I have been working on a feature for the colorpicker within devtools, in which you have a palette of colors to make it easier to choose from colors already in use on the page.

The swatches were actually a relatively easy feature to add by reusing the WebInspector.ColorSwatch component.  However, I am stuck now  trying to find a list of colors in use on the current page, preferably sorted by most used.  I understand that this could be slow, so it wouldn't have to be perfect (getting computed styles on elements wouldn't be needed, maybe just parsing out the stylesheets included on the page, and reading colors from it).  I've tried to do this in a few different ways, but haven't been able to figure it out.

Here is a screenshot of the swatches working (it being bound to a hardcoded array of colors right now): https://twitter.com/bgrins/status/297490942766759936.  Any ideas on if this would be doable from within devtools?

[Alexander Pavlov (apavlov)]

Brian,

This is how I would tackle this problem:
1) Get all stylesheet headers for the page (see bug 105828, which is intended to add tracking of all stylesheets in the frontend, in which case this step will no longer be necessary) using CSSAgent.getAllStyleSheets()
2) Get all stylesheets' rules using CSSAgent.getStyleSheet() (or, alternatively, WebInspector.CSSStyleSheet.createForId())
3) Traverse rules' styles, check if each property can contain a color value (using WebInspector.CSSMetadata.isColorAwareProperty()). If yes, try to parse out a color and process appropriately.
4) Create a swatch using the collected data.

I suggest that you wait until bug 105828 is fixed before putting together the final version of your patch. That bug will introduce two events, StyleSheetAdded and StyleSheetRemoved (in addition to the existing StyleSheetChanged), so you will be able to keep the up-to-date stats on all the colors used.

[Brian Grinstead]

(In reply to comment #1)

Alexander,
Thanks for the pointers! I will work on implementing it that way, then wait for bug 105828 to land before submitting a patch.

> Brian,
> 
> This is how I would tackle this problem:
> 1) Get all stylesheet headers for the page (see bug 105828, which is intended to add tracking of all stylesheets in the frontend, in which case this step will no longer be necessary) using CSSAgent.getAllStyleSheets()
> 2) Get all stylesheets' rules using CSSAgent.getStyleSheet() (or, alternatively, WebInspector.CSSStyleSheet.createForId())
> 3) Traverse rules' styles, check if each property can contain a color value (using WebInspector.CSSMetadata.isColorAwareProperty()). If yes, try to parse out a color and process appropriately.
> 4) Create a swatch using the collected data.
> 
> I suggest that you wait until bug 105828 is fixed before putting together the final version of your patch. That bug will introduce two events, StyleSheetAdded and StyleSheetRemoved (in addition to the existing StyleSheetChanged), so you will be able to keep the up-to-date stats on all the colors used.

[Radar WebKit Bug Importer]

<rdar://problem/19106501>