Commit d26f595c authored by graouts@apple.com's avatar graouts@apple.com

Web Inspector: New color picker

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

Reviewed by Timothy Hatcher.

Beginning of a new color picker. The focus of this new picker is to let you pick from
a color wheel as the primary mean of color picking, with additional slider controls for
the brightness and the opacity, better matching the default OS X color picker. This is the
basis for a color picker that will evolve to support the following:

- editable CSS value label (http://webkit.org/b/124356)
- picking a color anywhere on screen (http://webkit.org/b/124357)
- swatches based on other colors in page (http://webkit.org/b/124358)

Note also that the color wheel has not been tested on Retina displays
(see http://webkit.org/b/124355).

* UserInterface/CSSColorPicker.css: Removed.
* UserInterface/CSSColorPicker.js: Removed.
Previous color picker, now removed in favor of the new ColorPicker class.

* UserInterface/CSSStyleDeclarationTextEditor.js:
Adopt new class name for the color picker, add a little padding to the popover
target frame and set the base color after the picker has been presented.

* UserInterface/Color.js:
(WebInspector.Color.prototype._hslToRGB):
Simplified math.

(WebInspector.Color.rgb2hsv):
(WebInspector.Color.hsv2rgb):
New utilities to deal with HSV colors used in the ColorWheel.

* UserInterface/ColorPicker.css: Added.

* UserInterface/ColorPicker.js: Added.
(WebInspector.ColorPicker):
(WebInspector.ColorPicker.prototype.get element):
(WebInspector.ColorPicker.prototype.set brightness):
(WebInspector.ColorPicker.prototype.set opacity):
(WebInspector.ColorPicker.prototype.get color):

(WebInspector.ColorPicker.prototype.set color):
We set the _dontUpdateColor flag here such that we don't attempt to
notify about a color change at this point in case the selected color
is too saturated to be represented accurately on the color wheel and
we would end up changing the color by virtue of presenting the popover.

(WebInspector.ColorPicker.prototype.colorWheelColorDidChange):
(WebInspector.ColorPicker.prototype.sliderValueDidChange):
(WebInspector.ColorPicker.prototype._updateColor):
(WebInspector.ColorPicker.prototype._updateSliders):

* UserInterface/ColorWheel.css: Added.

* UserInterface/ColorWheel.js: Added.
The ColorWheel makes use of three different <canvas> elements to draw itself.
The "raw" canvas is used to draw the raw, un-tinted color wheel with poor
aliasing. The "raw" canvas is only drawn when the dimension is changed.
The "tinted" canvas is used to draw the "raw" canvas with a black overlay
based on the brightness set on the wheel. The "final" canvas, the only <canvas>
element attached to the DOM, is used to draw the "tinted" canvas into a circle
clip of a slightly narrower radius so that the drawn image is visually more pleasing
and can be displayed above virtually any background color.

We use color math to generate the color wheel, courtesy of Dean Jackson, and also to
figure out where to position the crosshair for the provided base color as well as
the opposite operation where we get the color under the mouse pointer.

The color wheel fires a single delegate method call colorWheelColorDidChange(colorWheel),
the colors themselves being retrieved via the public properties tintedColor and rawColor.

(WebInspector.ColorWheel):
(WebInspector.ColorWheel.prototype.set dimension):
(WebInspector.ColorWheel.prototype.get element):
(WebInspector.ColorWheel.prototype.get brightness):
(WebInspector.ColorWheel.prototype.set brightness):
(WebInspector.ColorWheel.prototype.get tintedColor):
(WebInspector.ColorWheel.prototype.set tintedColor):
(WebInspector.ColorWheel.prototype.get rawColor):
(WebInspector.ColorWheel.prototype.handleEvent):
(WebInspector.ColorWheel.prototype._handleMousedown):
(WebInspector.ColorWheel.prototype._handleMousemove):
(WebInspector.ColorWheel.prototype._handleMouseup):
(WebInspector.ColorWheel.prototype._pointInCircleForEvent):
(WebInspector.ColorWheel.prototype._pointInCircleForEvent.angleFromCenterToPoint):
(WebInspector.ColorWheel.prototype._pointInCircleForEvent.pointOnCircumference):
(WebInspector.ColorWheel.prototype._updateColorForMouseEvent):
(WebInspector.ColorWheel.prototype._setCrosshairPosition):
(WebInspector.ColorWheel.prototype._tintedColorToPointAndBrightness):
(WebInspector.ColorWheel.prototype._drawRawCanvas):
(WebInspector.ColorWheel.prototype._colorAtPointWithBrightness):
(WebInspector.ColorWheel.prototype._drawTintedCanvas):
(WebInspector.ColorWheel.prototype._draw):

* UserInterface/Images/SliderThumb.png: Added.
* UserInterface/Images/SliderThumb@2x.png: Added.
* UserInterface/Images/SliderThumbPressed.png: Added.
* UserInterface/Images/SliderThumbPressed@2x.png: Added.
Supporting artwork for the new Slider class.

* UserInterface/Main.html:
Remove the previous color picker class and add the new one, as well as the new Slider class.

* UserInterface/Slider.css: Added.

* UserInterface/Slider.js: Added.
New slider to match the look of the sliders used in the native OS X color picker. The most
interesting feature of these sliders is that they can be transformed using CSS in any way
and will still operate correctly due to always converting the mouse coordinates in the page
coordinate system to the coordinate system local to the backing element. For instance, the
color picker uses two sliders transformed to be displayed vertically.

As it stands these slides only support values between 0 and 1 and fire a single delegate
method call sliderValueDidChange(slider, newValue).

(WebInspector.Slider):
(WebInspector.Slider.prototype.get element):
(WebInspector.Slider.prototype.get value):
(WebInspector.Slider.prototype.set value):
(WebInspector.Slider.prototype.handleEvent):
(WebInspector.Slider.prototype._handleMousedown):
(WebInspector.Slider.prototype._handleMousemove):
(WebInspector.Slider.prototype._handleMouseup):
(WebInspector.Slider.prototype._localPointForEvent):
(WebInspector.Slider.prototype.get _maxX):

* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
Update file names for the new color picker.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@159332 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent eda0878f
2013-11-15 Antoine Quint <graouts@apple.com>
Web Inspector: New color picker
https://bugs.webkit.org/show_bug.cgi?id=124354
Reviewed by Timothy Hatcher.
Beginning of a new color picker. The focus of this new picker is to let you pick from
a color wheel as the primary mean of color picking, with additional slider controls for
the brightness and the opacity, better matching the default OS X color picker. This is the
basis for a color picker that will evolve to support the following:
- editable CSS value label (http://webkit.org/b/124356)
- picking a color anywhere on screen (http://webkit.org/b/124357)
- swatches based on other colors in page (http://webkit.org/b/124358)
Note also that the color wheel has not been tested on Retina displays
(see http://webkit.org/b/124355).
* UserInterface/CSSColorPicker.css: Removed.
* UserInterface/CSSColorPicker.js: Removed.
Previous color picker, now removed in favor of the new ColorPicker class.
* UserInterface/CSSStyleDeclarationTextEditor.js:
Adopt new class name for the color picker, add a little padding to the popover
target frame and set the base color after the picker has been presented.
* UserInterface/Color.js:
(WebInspector.Color.prototype._hslToRGB):
Simplified math.
(WebInspector.Color.rgb2hsv):
(WebInspector.Color.hsv2rgb):
New utilities to deal with HSV colors used in the ColorWheel.
* UserInterface/ColorPicker.css: Added.
* UserInterface/ColorPicker.js: Added.
(WebInspector.ColorPicker):
(WebInspector.ColorPicker.prototype.get element):
(WebInspector.ColorPicker.prototype.set brightness):
(WebInspector.ColorPicker.prototype.set opacity):
(WebInspector.ColorPicker.prototype.get color):
(WebInspector.ColorPicker.prototype.set color):
We set the _dontUpdateColor flag here such that we don't attempt to
notify about a color change at this point in case the selected color
is too saturated to be represented accurately on the color wheel and
we would end up changing the color by virtue of presenting the popover.
(WebInspector.ColorPicker.prototype.colorWheelColorDidChange):
(WebInspector.ColorPicker.prototype.sliderValueDidChange):
(WebInspector.ColorPicker.prototype._updateColor):
(WebInspector.ColorPicker.prototype._updateSliders):
* UserInterface/ColorWheel.css: Added.
* UserInterface/ColorWheel.js: Added.
The ColorWheel makes use of three different <canvas> elements to draw itself.
The "raw" canvas is used to draw the raw, un-tinted color wheel with poor
aliasing. The "raw" canvas is only drawn when the dimension is changed.
The "tinted" canvas is used to draw the "raw" canvas with a black overlay
based on the brightness set on the wheel. The "final" canvas, the only <canvas>
element attached to the DOM, is used to draw the "tinted" canvas into a circle
clip of a slightly narrower radius so that the drawn image is visually more pleasing
and can be displayed above virtually any background color.
We use color math to generate the color wheel, courtesy of Dean Jackson, and also to
figure out where to position the crosshair for the provided base color as well as
the opposite operation where we get the color under the mouse pointer.
The color wheel fires a single delegate method call colorWheelColorDidChange(colorWheel),
the colors themselves being retrieved via the public properties tintedColor and rawColor.
(WebInspector.ColorWheel):
(WebInspector.ColorWheel.prototype.set dimension):
(WebInspector.ColorWheel.prototype.get element):
(WebInspector.ColorWheel.prototype.get brightness):
(WebInspector.ColorWheel.prototype.set brightness):
(WebInspector.ColorWheel.prototype.get tintedColor):
(WebInspector.ColorWheel.prototype.set tintedColor):
(WebInspector.ColorWheel.prototype.get rawColor):
(WebInspector.ColorWheel.prototype.handleEvent):
(WebInspector.ColorWheel.prototype._handleMousedown):
(WebInspector.ColorWheel.prototype._handleMousemove):
(WebInspector.ColorWheel.prototype._handleMouseup):
(WebInspector.ColorWheel.prototype._pointInCircleForEvent):
(WebInspector.ColorWheel.prototype._pointInCircleForEvent.angleFromCenterToPoint):
(WebInspector.ColorWheel.prototype._pointInCircleForEvent.pointOnCircumference):
(WebInspector.ColorWheel.prototype._updateColorForMouseEvent):
(WebInspector.ColorWheel.prototype._setCrosshairPosition):
(WebInspector.ColorWheel.prototype._tintedColorToPointAndBrightness):
(WebInspector.ColorWheel.prototype._drawRawCanvas):
(WebInspector.ColorWheel.prototype._colorAtPointWithBrightness):
(WebInspector.ColorWheel.prototype._drawTintedCanvas):
(WebInspector.ColorWheel.prototype._draw):
* UserInterface/Images/SliderThumb.png: Added.
* UserInterface/Images/SliderThumb@2x.png: Added.
* UserInterface/Images/SliderThumbPressed.png: Added.
* UserInterface/Images/SliderThumbPressed@2x.png: Added.
Supporting artwork for the new Slider class.
* UserInterface/Main.html:
Remove the previous color picker class and add the new one, as well as the new Slider class.
* UserInterface/Slider.css: Added.
* UserInterface/Slider.js: Added.
New slider to match the look of the sliders used in the native OS X color picker. The most
interesting feature of these sliders is that they can be transformed using CSS in any way
and will still operate correctly due to always converting the mouse coordinates in the page
coordinate system to the coordinate system local to the backing element. For instance, the
color picker uses two sliders transformed to be displayed vertically.
As it stands these slides only support values between 0 and 1 and fire a single delegate
method call sliderValueDidChange(slider, newValue).
(WebInspector.Slider):
(WebInspector.Slider.prototype.get element):
(WebInspector.Slider.prototype.get value):
(WebInspector.Slider.prototype.set value):
(WebInspector.Slider.prototype.handleEvent):
(WebInspector.Slider.prototype._handleMousedown):
(WebInspector.Slider.prototype._handleMousemove):
(WebInspector.Slider.prototype._handleMouseup):
(WebInspector.Slider.prototype._localPointForEvent):
(WebInspector.Slider.prototype.get _maxX):
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
Update file names for the new color picker.
2013-11-14 Antoine Quint <graouts@apple.com>
Web Inspector: Popovers may shrink unnecessarily
......
/*
* Copyright (C) 2011 Brian Grinstead All rights reserved.
* Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
* its contributors may be used to endorse or promote products derived
* from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
.colorpicker-container {
top: 0;
left: 0;
padding: 5px;
width: 212px;
z-index: 10;
}
.colorpicker-fill-parent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.colorpicker-top {
position: relative;
width: 100%;
display: inline-block;
}
.colorpicker-color {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 160px;
border: 1px solid #D0D0D0;
}
.colorpicker-bottom span {
display: inline-block;
}
.colorpicker-text {
font-family: monospace;
font-size: 11px !important;
}
.colorpicker-color-text-value {
-webkit-user-select: text;
position: relative;
left: 3px;
top: -6px;
white-space: pre-wrap;
}
.colorpicker-hue {
position: absolute;
top: 0;
width: 30px;
right: 0;
bottom: 0;
-webkit-box-reflect: right -28px;
}
.colorpicker-fill {
/* Same as colorpicker-color width to force aspect ratio. */
margin-top: 160px;
}
.colorpicker-range-container {
position: relative;
padding-bottom: 5px;
}
.colorpicker-range-container * {
font-size: 11px;
vertical-align: middle;
}
.colorpicker-range-container label {
display: inline-block;
padding-right: 4px;
}
.colorpicker-range-container input {
margin: 3px 0 0 3px;
width: 137px;
}
.colorpicker-saturation {
background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0));
}
.colorpicker-value {
background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0));
}
.colorpicker-hue {
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.colorpicker-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border: 1px solid white;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: black;
}
.colorpicker-slider {
position: absolute;
top: 0;
cursor: pointer;
border: 1px solid black;
height: 4px;
left: -1px;
right: -1px;
}
.colorpicker-container .swatch {
width: 20px;
height:20px;
margin: 0;
}
.colorpicker-container .swatch-inner {
height: 100%;
width: 100%;
display: inline-block;
border: 1px solid rgba(128, 128, 128, 0.6);
}
This diff is collapsed.
......@@ -743,19 +743,23 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = {
} else {
this._colorPickerPopover = new WebInspector.Popover(this);
var colorPicker = new WebInspector.CSSColorPicker;
colorPicker.color = color;
var colorPicker = new WebInspector.ColorPicker;
colorPicker.addEventListener(WebInspector.CSSColorPicker.Event.ColorChanged, function(event) {
colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, function(event) {
updateCodeMirror.call(this, event.data.color.toString());
}.bind(this));
var bounds = WebInspector.Rect.rectFromClientRect(swatch.getBoundingClientRect());
const padding = 2;
bounds.origin.x -= padding;
bounds.origin.y -= padding;
bounds.size.width += padding * 2;
bounds.size.height += padding * 2;
this._colorPickerPopover.content = colorPicker.element;
this._colorPickerPopover.present(bounds, [WebInspector.RectEdge.MIN_X]);
colorPicker.shown();
colorPicker.color = color;
}
},
......
......@@ -413,40 +413,20 @@ WebInspector.Color.prototype = {
var s = parseFloat(hsl[1]) / 100;
var l = parseFloat(hsl[2]) / 100;
if (s < 0)
s = 0;
if (l <= 0.5)
var q = l * (1 + s);
else
var q = l + s - (l * s);
var p = 2 * l - q;
var tr = h + (1 / 3);
var tg = h;
var tb = h - (1 / 3);
var r = Math.round(hueToRGB(p, q, tr) * 255);
var g = Math.round(hueToRGB(p, q, tg) * 255);
var b = Math.round(hueToRGB(p, q, tb) * 255);
return [r, g, b];
function hueToRGB(p, q, h) {
if (h < 0)
h += 1;
else if (h > 1)
h -= 1;
if ((h * 6) < 1)
return p + (q - p) * h * 6;
else if ((h * 2) < 1)
return q;
else if ((h * 3) < 2)
return p + (q - p) * ((2 / 3) - h) * 6;
else
return p;
}
h *= 6;
var sArray = [
l += s *= l < .5 ? l : 1 - l,
l - h % 1 * s * 2,
l -= s *= 2,
l,
l + h % 1 * s,
l + s
];
return [
Math.round(sArray[ ~~h % 6 ] * 255),
Math.round(sArray[ (h|16) % 6 ] * 255),
Math.round(sArray[ (h|8) % 6 ] * 255)
];
},
/**
......@@ -851,3 +831,75 @@ WebInspector.Color.AdvancedNickNames = {
"rgba(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
"hsla(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
};
WebInspector.Color.rgb2hsv = function(r, g, b)
{
r /= 255;
g /= 255;
b /= 255;
var min = Math.min(Math.min(r, g), b);
var max = Math.max(Math.max(r, g), b);
var delta = max - min;
var v = max;
var s, h;
if (max === min)
h = 0;
else if (max === r)
h = (60 * ((g - b) / delta)) % 360;
else if (max === g)
h = 60 * ((b - r) / delta) + 120;
else if (max === b)
h = 60 * ((r - g) / delta) + 240;
if (h < 0)
h += 360;
// Saturation
if (max === 0)
s = 0;
else
s = 1 - (min/max);
return [h, s, v];
}
WebInspector.Color.hsv2rgb = function(h, s, v)
{
if (s === 0)
return [v, v, v];
h /= 60;
var i = Math.floor(h);
var data = [
v * (1 - s),
v * (1 - s * (h - i)),
v * (1 - s * (1 - (h - i)))
];
var rgb;
switch (i) {
case 0:
rgb = [v, data[2], data[0]];
break;
case 1:
rgb = [data[1], v, data[0]];
break;
case 2:
rgb = [data[0], v, data[2]];
break;
case 3:
rgb = [data[0], data[1], v];
break;
case 4:
rgb = [data[2], data[0], v];
break;
default:
rgb = [v, data[0], data[1]];
break;
}
return rgb;
}
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
.color-picker {
position: relative;
width: 256px;
height: 210px;
padding: 5px;
}
.color-picker > * {
position: absolute;
}
.color-picker > .slider {
top: 7px;
width: 196px;
-webkit-transform: rotate(-90deg) translateX(-100%);
-webkit-transform-origin: 0 0;
}
.color-picker > .brightness {
left: 215px;
}
.color-picker > .opacity {
left: 238px;
}
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.ColorPicker = function()
{
WebInspector.Object.call(this);
this._colorWheel = new WebInspector.ColorWheel();
this._colorWheel.delegate = this;
this._colorWheel.dimension = 200;
this._brightnessSlider = new WebInspector.Slider();
this._brightnessSlider.delegate = this;
this._brightnessSlider.element.classList.add("brightness");
this._opacitySlider = new WebInspector.Slider();
this._opacitySlider.delegate = this;
this._opacitySlider.element.classList.add("opacity");
this._element = document.createElement("div");
this._element.className = "color-picker";
this._element.appendChild(this._colorWheel.element);
this._element.appendChild(this._brightnessSlider.element);
this._element.appendChild(this._opacitySlider.element);
this._opacityPattern = 'url("data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="rgb(204, 204, 204)"><rect width="3" height="3" /><rect x="3" y="3" width="3" height="3"/></svg>') + '")';
this._color = "white";
};
WebInspector.ColorPicker.Event = {
ColorChanged: "css-color-picker-color-changed"
};
WebInspector.ColorPicker.prototype = {
contructor: WebInspector.ColorPicker,
__proto__: WebInspector.Object.prototype,
// Public
get element()
{
return this._element;
},
set brightness(brightness)
{
if (brightness === this._brightness)
return;
this._colorWheel.brightness = brightness;
this._updateColor();
this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
},
set opacity(opacity)
{
if (opacity === this._opacity)
return;
this._opacity = opacity;
this._updateColor();
},
get color()
{
return this._color;
},
set color(color)
{
this._dontUpdateColor = true;
this._colorWheel.tintedColor = color;
this._brightnessSlider.value = this._colorWheel.brightness;
this._opacitySlider.value = isNaN(color.alpha) ? 1 : color.alpha;
this._updateSliders(this._colorWheel.rawColor, color);
delete this._dontUpdateColor;
},
colorWheelColorDidChange: function(colorWheel)
{
this._updateColor();
this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
},
sliderValueDidChange: function(slider, value)
{
if (slider === this._opacitySlider)
this.opacity = value;
else if (slider === this._brightnessSlider)
this.brightness = value;
},
// Private
_updateColor: function()
{
if (this._dontUpdateColor)
return;
var rgb = this._colorWheel.tintedColor.rgb;
this._color = WebInspector.Color.fromRGBA(rgb[0], rgb[1], rgb[2], this._opacity).toString();
this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
},
_updateSliders: function(rawColor, tintedColor)
{
var rgb = this._colorWheel.tintedColor.rgb;
var transparent = WebInspector.Color.fromRGBA(rgb[0], rgb[1], rgb[2], 0).toString();
this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + tintedColor + "), " + this._opacityPattern;
this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
}
};
/*
* Copyright (C) 2013 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met: