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().
We should also allow HSL.
<rdar://problem/5712935>
Definitely want this. I have to popup firebug Firefox just to grab the color right now.
Very irritating... I'm having to screen grab into photoshop to eye drop the colour right now. Firebug still has the edge.
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.
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.
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.
Video of Usage: http://screencast.com/t/jrX1OaeTb
Brilliant! Thank you Joseph!
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.
Created attachment 34179 [details] Fixed Based on Review
Comment on attachment 34179 [details] Fixed Based on Review Need a license for Color.js. With your name too.
> 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.
Created attachment 34181 [details] Added License Sorry about the confusion.
Created attachment 34182 [details] Added to the QRC File Sorry about the spam!
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
All reviewed patches have been landed. Closing bug.
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.
I was thinking the samre thing. Mind filing a new bug requesting that?
(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
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?
(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.
> Alred Sorry! That should be Alfred!