Bug 13516

Summary: Color is only reported in rgb() format; should toggle between rgb() and hex
Product: WebKit Reporter: Jon Davis <jond>
Component: Web Inspector (Deprecated)Assignee: Timothy Hatcher <timothy>
Status: RESOLVED FIXED    
Severity: Enhancement CC: abarth, alfred, boards, joepeck, jubal-webkit-20111123, rik, simon, steelfu, tannerhodges, timothy
Priority: P4 Keywords: InRadar
Version: 523.x (Safari 3)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Click Through Color Representations
timothy: review-
Sample Page to Test Different Colors
none
Fixed Based on Review
timothy: review-
Added License
none
Added to the QRC File timothy: commit-queue+

Description Jon Davis 2007-04-26 19:45:32 PDT
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().
Comment 1 Timothy Hatcher 2007-04-26 20:55:25 PDT
We should also allow HSL.
Comment 2 Adam Roben (:aroben) 2008-01-29 11:15:57 PST
<rdar://problem/5712935>
Comment 3 Steel Fu 2008-09-12 13:26:16 PDT
Definitely want this. I have to popup firebug Firefox just to grab the color right now.
Comment 4 Simon Litchfield 2009-05-20 16:25:13 PDT
Very irritating... I'm having to screen grab into photoshop to eye drop the colour right now. Firebug still has the edge.
Comment 5 Jubal Kessler 2009-07-03 19:17:47 PDT
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.
Comment 6 Joseph Pecoraro 2009-08-05 14:26:20 PDT
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.
Comment 7 Joseph Pecoraro 2009-08-05 14:27:12 PDT
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.
Comment 8 Joseph Pecoraro 2009-08-05 14:33:28 PDT
Video of Usage:
http://screencast.com/t/jrX1OaeTb
Comment 9 Steel Fu 2009-08-05 14:38:14 PDT
Brilliant! Thank you Joseph!
Comment 10 Timothy Hatcher 2009-08-05 14:42:55 PDT
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.
Comment 11 Joseph Pecoraro 2009-08-05 14:58:59 PDT
Created attachment 34179 [details]
Fixed Based on Review
Comment 12 Timothy Hatcher 2009-08-05 15:01:42 PDT
Comment on attachment 34179 [details]
Fixed Based on Review

Need a license for Color.js. With your name too.
Comment 13 Joseph Pecoraro 2009-08-05 15:02:21 PDT
> 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.
Comment 14 Joseph Pecoraro 2009-08-05 15:07:47 PDT
Created attachment 34181 [details]
Added License

Sorry about the confusion.
Comment 15 Joseph Pecoraro 2009-08-05 15:12:51 PDT
Created attachment 34182 [details]
Added to the QRC File

Sorry about the spam!
Comment 16 Adam Barth 2009-08-05 20:27:32 PDT
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
Comment 17 Adam Barth 2009-08-05 20:27:37 PDT
All reviewed patches have been landed.  Closing bug.
Comment 18 mitch kramer 2009-09-01 13:57:45 PDT
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.
Comment 19 Timothy Hatcher 2009-09-01 14:01:10 PDT
I was thinking the samre thing. Mind filing a new bug requesting that?
Comment 20 mitch kramer 2009-09-01 14:09:36 PDT
(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
Comment 21 Alfred Morgan 2010-04-17 10:10:30 PDT
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?
Comment 22 Joseph Pecoraro 2010-04-17 10:27:54 PDT
(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.
Comment 23 Joseph Pecoraro 2010-04-17 10:28:35 PDT
> Alred

Sorry! That should be Alfred!