[Webkit-unassigned] [Bug 71262] Web Inspector: Add colorpicker functionality to color swatches in Styles Sidebar

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=71262





--- Comment #14 from Alexander Pavlov (apavlov) <apavlov at chromium.org>  2011-11-22 07:01:47 PST ---
(In reply to comment #13)
> (In reply to comment #12)
> > One missing point in the patch is the ability to revert the change (e.g. on clicking outside of the picker, as opposed to the "commit" arrow-button).
> > 
> 
> The commit arrow button has been removed based on initial UI feedback.  To me it feels like "clicking out" of the picker is a natural way to close *without* reverting.  We could either change that default behavior, add a cancel button or 'X' in the top right corner to revert, or maybe make the new color text focused with after exiting with the ability to press escape to revert to the original value.  Not sure how hard that last one would be to implement.

Handling keys is not hard but I'll defer the final decision to Pavel who is also the primary UI advisor for Web Inspector.

> > I also did not quite get the problem stated in the item 1 about adding a new property. A common rule is that only one field (property name/value) can be edited at any time. Could you give us an exact series of steps to reproduce the issue?
> > 
> 
> Click on an element on the left pane like the body.  When it pulls up all of the styles on the right, you should be able to click on a color and use the picker as intended.  Now, double click into element.style and add a property, like "background": "red".  If you click on this new swatch that gets created and start dragging the colorpicker around, it disappears after a second (but your changes do get applied).  My guess is that it is calling the updateTitle function every time a minor change happens to a new property.

Oh, now I get your point. You don't need to edit a color before creating and editing one in element.style. Whenever you edit element.style, the "style" attribute for the inspected element gets invalidated, and all its styles get re-requested, thereby rebuilding the entire Styles pane (which, of course, blows away the color swatch and the spectrum element attached to it). We've got a flag defined on the StylesSidebarPane to avoid updates during style edits. Your related snippets should look similar to this (provided you implement necessary checks for self._parentPane during the setup phase):

...
function finishSpectrum(e) {
    swatchElement.ownerDocument.removeEventListener("click", finishSpectrum, false);
    spectrum.hide(e);
    delete self._parentPane._isEditingStyle;
}
...
if (isShown) {
    self._parentPane._isEditingStyle = true;
    swatchElement.ownerDocument.addEventListener("click", finishSpectrum, false);
}
...

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.