Bug 13516 – Color is only reported in rgb() format; should toggle between rgb() and hex

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

[Jon Davis]

Colors in the Web Inspector are currently only shown in rgb() values.  To improve usability, the reported value should toggle between valid CSS color specifications - Hex notation and rgb().

[Timothy Hatcher]

We should also allow HSL.

[Adam Roben (:aroben)]

<rdar://problem/5712935>

[Steel Fu]

Definitely want this. I have to popup firebug Firefox just to grab the color right now.

[Simon Litchfield]

Very irritating... I'm having to screen grab into photoshop to eye drop the colour right now. Firebug still has the edge.

[Jubal Kessler]

I was shocked when I found out that only rgb() is used. I'd rather not have to open Firebug just to get at this. What Simon said.

[Joseph Pecoraro]

Created attachment 34175 [details]
Click Through Color Representations

New WebInspector.Color allow for simple conversion of a color into its other representations.  Basic support for clicking the color's swatch and rotating through the color's different representations including all 140+ color nicknames.

Simple Colors: rgb, hsl, nickname, shorthex, hex
Advanced Colors: rgba, hsla, nickname

Video to be attached in a minute.

[Joseph Pecoraro]

Created attachment 34176 [details]
Sample Page to Test Different Colors

Sample Page which can be viewed in the inspector, with this patch, to experiment with rotating through color representations.

[Joseph Pecoraro]

Video of Usage:
http://screencast.com/t/jrX1OaeTb

[Steel Fu]

Brilliant! Thank you Joseph!

[Timothy Hatcher]

Comment on attachment 34175 [details]
Click Through Color Representations

 78         if (typeof this._nickname !== undefined) // would be set on parse if there was a nickname

undefined should be "undefined"

 903                     function helper(newMode, content) {

Could this be named better?

 942                             (color.nickname) ? helper("nickname", color.toNickname()) : helper("rgba", color.toRgba());

This would read better as a if block I think.

Awesome work, as always! Just fix up those 3 minor thigs.

[Joseph Pecoraro]

Created attachment 34179 [details]
Fixed Based on Review

[Timothy Hatcher]

Comment on attachment 34179 [details]
Fixed Based on Review

Need a license for Color.js. With your name too.

[Joseph Pecoraro]

> undefined should be "undefined"

Done. Good Catch.

> Could this be named better?

Done. Now named "changeTo".

> This would read better as a if block I think.

Done.


Also, I improved a parsing regex to sanitize better and treat "hsla(0, 0%, 0%, 0)" as a special advanced color with the nickname "transparent".  Technically anything with 0 as the alpha should be transparent but even more technically the spec says "rgba(0, 0, 0, 0)" so I'm leaving it as it is.

[Joseph Pecoraro]

Created attachment 34181 [details]
Added License

Sorry about the confusion.

[Joseph Pecoraro]

Created attachment 34182 [details]
Added to the QRC File

Sorry about the spam!

[Adam Barth]

Comment on attachment 34182 [details]
Added to the QRC File

Clearing review flag on attachment: 34182

Committing to http://svn.webkit.org/repository/webkit/trunk ...
	M	WebCore/ChangeLog
	A	WebCore/inspector/front-end/Color.js
	M	WebCore/inspector/front-end/StylesSidebarPane.js
	M	WebCore/inspector/front-end/WebKit.qrc
	M	WebCore/inspector/front-end/inspector.html
Committed r46828
	M	WebCore/ChangeLog
	M	WebCore/inspector/front-end/StylesSidebarPane.js
	A	WebCore/inspector/front-end/Color.js
	M	WebCore/inspector/front-end/WebKit.qrc
	M	WebCore/inspector/front-end/inspector.html
r46828 = 1a752367db795583b5a349a40685940cb182c523 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
http://trac.webkit.org/changeset/46828

[Adam Barth]

All reviewed patches have been landed.  Closing bug.

[mitch kramer]

I realize this has been closed... so apologies in advance. the new functionality is fabulous, however, could it remember which format i left it in and show the colors in that format in the future? having to click each time when i ALWAYS want hex is sub-optimal.

[Timothy Hatcher]

I was thinking the samre thing. Mind filing a new bug requesting that?

[mitch kramer]

(In reply to comment #19)
> I was thinking the samre thing. Mind filing a new bug requesting that?

absolutely - filed as https://bugs.webkit.org/show_bug.cgi?id=28889

[Alfred Morgan]

I don't understand.  I think your rotating of color formats is great but when I see a color swatch and I click on it I would expect a color picker to pop up.  Is there a reason why this isn't the case?

[Joseph Pecoraro]

(In reply to comment #21)
> I don't understand.  I think your rotating of color formats is great but when I
> see a color swatch and I click on it I would expect a color picker to pop up. 
> Is there a reason why this isn't the case?

Alred, you can use the Style's Gear Menu to toggle between color representations (rgb, hex, hsl). However, if a color has a nickname it will stay that nickname (such as "black") it will stay that value.

A color picker will most likely be integrated into the Web Inspector once support for a <input type="color"> UI is implemented. See bug 29358 tracking progress for that.

[Joseph Pecoraro]

> Alred

Sorry! That should be Alfred!