Bug 25032 – Web Inspector: Adding a Color-Picker Palette

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

[Chris J. Shull]

When tweaking colors in the Web Inspector (i.e. color, background-color, text-shadow color) I would love for there to be a way to pull up an OS X - standard-look color picker (with alpha of course). 
This way I could just drag around the color-picker and have on-the-fly color edits in the page.

[Nikita Vasilyev]

I guess we won't be able to see OS X native color picker before https://bugs.webkit.org/show_bug.cgi?id=29358 implemented.

[Yury Semikhatsky]

There is one more user asking for this feature: http://www.google.com/support/forum/p/Chrome/thread?tid=08a147446a75a80d&hl=en

[kangax]

Would be a very welcome addition indeed.

[Patrick Mueller]

What does "drag around the color-picker and have on-the-fly color edits in the page" mean?

Is the implication the color picker is somehow sitting on the page being debugged?  That doesn't sound right.

So, if the color picker is sitting in the inspector window/frame, where are you dragging the picker?

My initial guess at what was being asked for, was to replace the text field you get when you double-click a color value, with some kind of a picker.  But it would be modal.  You wouldn't be dragging it between different places where the colors could be edited.

[kangax]

(In reply to comment #4)
> What does "drag around the color-picker and have on-the-fly color edits in the page" mean?
> 
> Is the implication the color picker is somehow sitting on the page being debugged?  That doesn't sound right.
> 
> So, if the color picker is sitting in the inspector window/frame, where are you dragging the picker?
> 
> My initial guess at what was being asked for, was to replace the text field you get when you double-click a color value, with some kind of a picker.  But it would be modal.  You wouldn't be dragging it between different places where the colors could be edited.

There's already a square cell (filled with color) next to each textual color value in inspector.

color: ☐ white;

Clicking on that color currently switches value representation from hex to rgb to hsl to keyword. If this switching were to be invoked in some other way (say, by having up/down arrows in a split button next to color value) then clicking on a color cell could toggle color picker. 

I'm pretty sure this is exactly what Opera's Dragonfly does.

[Patrick Mueller]

(In reply to comment #5)
> There's already a square cell (filled with color) next to each textual color value in inspector.
> 
> color: ☐ white;
> 
> Clicking on that color currently switches value representation from hex to rgb to hsl to keyword. If this switching were to be invoked in some other way (say, by having up/down arrows in a split button next to color value) then clicking on a color cell could toggle color picker. 

On my laptop, the CSS property rows are 13px high.  An up/down split button, stacked vertically, is going to be pretttttty small!

What about just another small button to the left of (or right of) the existing color swatch.  That you'd click to get the picker.  Maybe a downward pointing disclosure triangle.

Another option would be to let people switch from the existing text entry method, to the color picker, based on a persistent setting, presumably available in the Styles gear menu.

[kangax]

(In reply to comment #6)
> (In reply to comment #5)
> > There's already a square cell (filled with color) next to each textual color value in inspector.
> > 
> > color: ☐ white;
> > 
> > Clicking on that color currently switches value representation from hex to rgb to hsl to keyword. If this switching were to be invoked in some other way (say, by having up/down arrows in a split button next to color value) then clicking on a color cell could toggle color picker. 
> 
> On my laptop, the CSS property rows are 13px high.  An up/down split button, stacked vertically, is going to be pretttttty small!

Yeah, I was worried about that as well. It's always a hassle to select something using, say, <input data=time> (as it's rendered in Chrome) — http://miketaylr.com/code/input-type-attr.html

> 
> What about just another small button to the left of (or right of) the existing color swatch.  That you'd click to get the picker.  Maybe a downward pointing disclosure triangle.

Yep. That could work.

[Chris J. Shull]

Wouldn't it make more sense to have clicking the swatch bring up the color picker, and make cycling the color value type (e.g. from hex to rgb) accessible some other way (e.g. an additional button)?

The square cell simply looks like a tiny color picker button. If you told a person that they could bring up a color picker, that is what they'd click on first.

The value cycler button could be a glyph to the right of the color. Something like a more circular recycling glyph.

For example:
color: ☐ white ♻; 


Honestly, I'm not 100% a fan of just adding another button. But both features are very useful, and I (not being a UX expert) can't see any other way of making both possible - while also making both discoverable.

[Patrick Mueller]

(In reply to comment #8)
> Honestly, I'm not 100% a fan of just adding another button. But both features are very useful, and I (not being a UX expert) can't see any other way of making both possible - while also making both discoverable.

I'm not a 100% fan either, and I'm also not a UX expert!

My primary concern was the comment in the description "drag around the color-picker", which I still don't quite understand.  Was trying to figure out what the actual requested requirement was.  

Functionally, adding another button for the prompter would work, and sounds like it would satisfy the basic requirement of being able to use a color picker.  So at least we know what function is being asked for. 

How to implement the UI for it though, not sure.

[Paul Irish]

I think this may be considered a dupe of whats going on in Issue 71262 and Issue 75454

[Rob Colburn]

Yep, seems a dupe, and complete.