<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[159332] trunk/Source/WebInspectorUI</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/159332">159332</a></dd>
<dt>Author</dt> <dd>graouts@apple.com</dd>
<dt>Date</dt> <dd>2013-11-15 03:03:03 -0800 (Fri, 15 Nov 2013)</dd>
</dl>

<h3>Log Message</h3>
<pre>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 &lt;canvas&gt; elements to draw itself.
The &quot;raw&quot; canvas is used to draw the raw, un-tinted color wheel with poor
aliasing. The &quot;raw&quot; canvas is only drawn when the dimension is changed.
The &quot;tinted&quot; canvas is used to draw the &quot;raw&quot; canvas with a black overlay
based on the brightness set on the wheel. The &quot;final&quot; canvas, the only &lt;canvas&gt;
element attached to the DOM, is used to draw the &quot;tinted&quot; 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.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorjs">trunk/Source/WebInspectorUI/UserInterface/Color.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxproj">trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj</a></li>
<li><a href="#trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxprojfilters">trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorPickercss">trunk/Source/WebInspectorUI/UserInterface/ColorPicker.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorPickerjs">trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorWheelcss">trunk/Source/WebInspectorUI/UserInterface/ColorWheel.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorWheeljs">trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesSliderThumbpng">trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumb.png</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesSliderThumb2xpng">trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumb@2x.png</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesSliderThumbPressedpng">trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumbPressed.png</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesSliderThumbPressed2xpng">trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumbPressed@2x.png</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceSlidercss">trunk/Source/WebInspectorUI/UserInterface/Slider.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceSliderjs">trunk/Source/WebInspectorUI/UserInterface/Slider.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceCSSColorPickercss">trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceCSSColorPickerjs">trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/ChangeLog        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -1,3 +1,136 @@
</span><ins>+2013-11-15  Antoine Quint  &lt;graouts@apple.com&gt;
+
+        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 &lt;canvas&gt; elements to draw itself.
+        The &quot;raw&quot; canvas is used to draw the raw, un-tinted color wheel with poor
+        aliasing. The &quot;raw&quot; canvas is only drawn when the dimension is changed.
+        The &quot;tinted&quot; canvas is used to draw the &quot;raw&quot; canvas with a black overlay
+        based on the brightness set on the wheel. The &quot;final&quot; canvas, the only &lt;canvas&gt;
+        element attached to the DOM, is used to draw the &quot;tinted&quot; 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.
+
</ins><span class="cx"> 2013-11-14  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Popovers may shrink unnecessarily
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceCSSColorPickercss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.css (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.css        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.css        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -1,157 +0,0 @@
</span><del>-/*
- * Copyright (C) 2011 Brian Grinstead All rights reserved.
- * Copyright (C) 2013 Matt Holden &lt;jftholden@yahoo.com&gt;
- *
- * 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. (&quot;Apple&quot;) 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 &quot;AS IS&quot; 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); 
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceCSSColorPickerjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.js (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.js        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.js        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -1,406 +0,0 @@
</span><del>-/*
- * Copyright (C) 2011 Brian Grinstead All rights reserved.
- * Copyright (C) 2013 Matt Holden &lt;jftholden@yahoo.com&gt;
- *
- * 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. (&quot;Apple&quot;) 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 &quot;AS IS&quot; 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.
- */
-
-
-WebInspector.CSSColorPicker = function()
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement(&quot;div&quot;);
-    this._element.className = &quot;colorpicker-container&quot;;
-
-    var topElement = this._element.createChild(&quot;div&quot;, &quot;colorpicker-top&quot;);
-    topElement.createChild(&quot;div&quot;, &quot;colorpicker-fill&quot;);
-
-    var topInnerElement = topElement.createChild(&quot;div&quot;, &quot;colorpicker-top-inner colorpicker-fill-parent&quot;);
-    this._draggerElement = topInnerElement.createChild(&quot;div&quot;, &quot;colorpicker-color&quot;);
-    this._dragHelperElement = this._draggerElement
-        .createChild(&quot;div&quot;, &quot;colorpicker-saturation colorpicker-fill-parent&quot;)
-        .createChild(&quot;div&quot;, &quot;colorpicker-value colorpicker-fill-parent&quot;)
-        .createChild(&quot;div&quot;, &quot;colorpicker-dragger&quot;);
-
-    this._sliderElement = topInnerElement.createChild(&quot;div&quot;, &quot;colorpicker-hue&quot;);
-    this._slideHelper = this._sliderElement.createChild(&quot;div&quot;, &quot;colorpicker-slider&quot;);
-
-    var rangeContainer = this._element.createChild(&quot;div&quot;, &quot;colorpicker-range-container&quot;);
-    var alphaLabel = rangeContainer.createChild(&quot;label&quot;, &quot;colorpicker-text&quot;);
-    alphaLabel.textContent = WebInspector.UIString(&quot;Opacity:&quot;);
-
-    this._alphaElement = rangeContainer.createChild(&quot;input&quot;, &quot;colorpicker-range&quot;);
-    this._alphaElement.setAttribute(&quot;type&quot;, &quot;range&quot;);
-    this._alphaElement.setAttribute(&quot;min&quot;, &quot;0&quot;);
-    this._alphaElement.setAttribute(&quot;max&quot;, &quot;100&quot;);
-    this._alphaElement.addEventListener(&quot;change&quot;, alphaDrag.bind(this), false);
-
-    var displayContainer = this._element.createChild(&quot;div&quot;, &quot;colorpicker-bottom&quot;);
-
-    var swatchElement = displayContainer.createChild(&quot;span&quot;, &quot;swatch&quot;);
-    this._swatchInnerElement = swatchElement.createChild(&quot;span&quot;, &quot;swatch-inner&quot;);
-    
-    swatchElement.addEventListener(&quot;click&quot;, colorSwatchClicked.bind(this), false);
-
-    this._displayElement = displayContainer.createChild(&quot;span&quot;, &quot;colorpicker-text colorpicker-color-text-value&quot;);
-
-    makeDraggable(this._sliderElement, hueDrag.bind(this));
-    makeDraggable(this._draggerElement, colorDrag.bind(this), colorDragStart.bind(this));
-
-    function makeDraggable(element, onmove, onstart, onstop)
-    {
-        var doc = document;
-        var dragging;
-        var offset;
-        var scrollOffset;
-        var maxHeight;
-        var maxWidth;
-
-        function consume(e)
-        {
-            event.preventDefault();
-        }
-
-        function move(e)
-        {
-            if (!dragging || !onmove)
-                return;
-
-            var dragX = Math.max(0, Math.min(e.pageX - offset.left + scrollOffset.left, maxWidth));
-            var dragY = Math.max(0, Math.min(e.pageY - offset.top + scrollOffset.top, maxHeight));
-
-            onmove(element, dragX, dragY, e);
-        }
-
-        function start(e)
-        {
-            if (e.button !== 0 || e.ctrlKey)
-                return;
-
-            if (dragging)
-                return;
-
-            if (onstart)
-                onstart(element, e);
-
-            dragging = true;
-            maxHeight = element.clientHeight;
-            maxWidth = element.clientWidth;
-
-            scrollOffset = {left: 0, top: 0};
-            var boundingRect = element.getBoundingClientRect();
-            offset = {left: boundingRect.left, top: boundingRect.top};
-
-            doc.addEventListener(&quot;selectstart&quot;, consume, false);
-            doc.addEventListener(&quot;dragstart&quot;, consume, false);
-            doc.addEventListener(&quot;mousemove&quot;, move, false);
-            doc.addEventListener(&quot;mouseup&quot;, stop, false);
-
-            move(e);
-            consume(e);
-        }
-
-        function stop(e)
-        {
-            if (!dragging)
-                return;
-
-            doc.removeEventListener(&quot;selectstart&quot;, consume, false);
-            doc.removeEventListener(&quot;dragstart&quot;, consume, false);
-            doc.removeEventListener(&quot;mousemove&quot;, move, false);
-            doc.removeEventListener(&quot;mouseup&quot;, stop, false);
-
-            if (onstop)
-                onstop(element, e);
-
-            dragging = false;
-        }
-
-        element.addEventListener(&quot;mousedown&quot;, start, false);
-    }
-
-    function hueDrag(element, dragX, dragY)
-    {
-        this.hsv[0] = dragY / this.slideHeight;
-
-        this._updateDisplay(true);
-    }
-
-    var initialHelperOffset;
-
-    function colorDragStart(element, dragX, dragY)
-    {
-        initialHelperOffset = {x: this._dragHelperElement.offsetLeft, y: this._dragHelperElement.offsetTop};
-    }
-
-    function colorDrag(element, dragX, dragY, event)
-    {
-        if (event.shiftKey) {
-            if (Math.abs(dragX - initialHelperOffset.x) &gt;= Math.abs(dragY - initialHelperOffset.y))
-                dragY = initialHelperOffset.y;
-            else
-                dragX = initialHelperOffset.x;
-        }
-
-        this.hsv[1] = dragX / this.dragWidth;
-        this.hsv[2] = (this.dragHeight - dragY) / this.dragHeight;
-
-        this._updateDisplay(true);
-    }
-
-    function alphaDrag()
-    {
-        this.hsv[3] = this._alphaElement.value / 100;
-
-        this._updateDisplay(true);
-    }
-
-    function colorSwatchClicked()
-    {
-        // By changing this value, the new color format
-        // will be propagated down to any listeners after the UI is updated.
-        this._originalFormat = this.color.nextFormat();
-        this._updateDisplay(true);
-    }
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSColorPicker);
-
-WebInspector.CSSColorPicker.Event = {
-    ColorChanged: &quot;css-color-picker-color-changed&quot;
-};
-
-WebInspector.CSSColorPicker.prototype = {
-    contructor: WebInspector.CSSColorPicker,
-
-    get element()
-    {
-        return this._element;
-    },
-
-    set color(color)
-    {
-        if (!this._originalFormat) {
-            this._originalFormat = color.format;
-            if (color.format === WebInspector.Color.Format.ShortHEX)
-                this._originalFormat = WebInspector.Color.Format.HEX;
-        }
-
-        var rgba = (color.rgba || color.rgb).slice(0);
-
-        if (rgba.length === 3)
-            rgba[3] = 1;
-
-        this.hsv = WebInspector.CSSColorPicker.rgbaToHSVA(rgba[0], rgba[1], rgba[2], rgba[3]);
-    },
-
-    get color()
-   {
-       var rgba = WebInspector.CSSColorPicker.hsvaToRGBA(this.hsv[0], this.hsv[1], this.hsv[2], this.hsv[3]);
-       var color;
-       if (rgba[3] === 1)
-           color = WebInspector.Color.fromRGB(rgba[0], rgba[1], rgba[2]);
-       else
-           color = WebInspector.Color.fromRGBA(rgba[0], rgba[1], rgba[2], rgba[3]);
-       var colorValue = color.toString(this.outputColorFormat);
-       if (!colorValue)
-           colorValue = color.toString(); // this.outputColorFormat can be invalid for current color (e.g. &quot;nickname&quot;).
-       return new WebInspector.Color(colorValue);
-    },
-
-    get outputColorFormat()
-    {
-        var format = this._originalFormat;
-
-        if (this.hsv[3] === 1) {
-            // Simplify transparent formats, and don't allow ShortHex.
-            if (format === WebInspector.Color.Format.RGBA)
-                format = WebInspector.Color.Format.RGB;
-            else if (format === WebInspector.Color.Format.HSLA)
-                format = WebInspector.Color.Format.HSL;
-            else if (format === WebInspector.Color.Format.ShortHEX)
-                format = WebInspector.Color.Format.HEX;
-        } else {
-            // Everything except HSL(A) should be returned as RGBA if transparency is involved.
-            var printableTransparentFormats = [
-                WebInspector.Color.Format.HSLA,
-                WebInspector.Color.Format.RGBA
-            ];
-
-            if (printableTransparentFormats.indexOf(format) === -1)
-                format = WebInspector.Color.Format.RGBA;
-        }
-
-        return format;
-    },
-
-    get colorHueOnly()
-    {
-        var rgba = WebInspector.CSSColorPicker.hsvaToRGBA(this.hsv[0], 1, 1, 1);
-        return WebInspector.Color.fromRGBA(rgba[0], rgba[1], rgba[2], rgba[3]);
-    },
-
-    set displayText(text)
-    {
-        this._displayElement.textContent = text;
-    },
-
-    shown: function()
-    {
-        this.slideHeight = this._sliderElement.offsetHeight;
-        this.dragWidth = this._draggerElement.offsetWidth;
-        this.dragHeight = this._draggerElement.offsetHeight;
-        this._dragHelperElementHeight = this._dragHelperElement.offsetHeight / 2;
-        this.slideHelperHeight = this._slideHelper.offsetHeight / 2;
-        this._updateDisplay();
-    },
-
-    // Private
-
-    _updateHelperLocations: function()
-    {
-        var h = this.hsv[0];
-        var s = this.hsv[1];
-        var v = this.hsv[2];
-
-        // Where to show the little circle that displays your current selected color.
-        var dragX = s * this.dragWidth;
-        var dragY = this.dragHeight - (v * this.dragHeight);
-
-        dragX = Math.max(-this._dragHelperElementHeight,
-            Math.min(this.dragWidth - this._dragHelperElementHeight, dragX - this._dragHelperElementHeight));
-        dragY = Math.max(-this._dragHelperElementHeight,
-            Math.min(this.dragHeight - this._dragHelperElementHeight, dragY - this._dragHelperElementHeight));
-
-        this._dragHelperElement.positionAt(dragX, dragY);
-
-        // Where to show the bar that displays your current selected hue.
-        var slideY = (h * this.slideHeight) - this.slideHelperHeight;
-        this._slideHelper.style.top = slideY + &quot;px&quot;;
-
-        this._alphaElement.value = this.hsv[3] * 100;
-    },
-
-    _updateDisplay: function(colorWasChanged)
-    {
-        this._updateHelperLocations();
-
-        var rgb = (this.color.rgba || this.color.rgb).slice(0);
-
-        if (rgb.length === 3)
-            rgb[3] = 1;
-
-        var rgbHueOnly = this.colorHueOnly.rgb;
-
-        var flatColor = &quot;rgb(&quot; + rgbHueOnly[0] + &quot;, &quot; + rgbHueOnly[1] + &quot;, &quot; + rgbHueOnly[2] + &quot;)&quot;;
-        var fullColor = &quot;rgba(&quot; + rgb[0] + &quot;, &quot; + rgb[1] + &quot;, &quot; + rgb[2] + &quot;, &quot; + rgb[3] + &quot;)&quot;;
-
-        this._draggerElement.style.backgroundColor = flatColor;
-        this._swatchInnerElement.style.backgroundColor = fullColor;
-
-        this._alphaElement.value = this.hsv[3] * 100;
-
-        var colorValue = this.color.toString(this.outputColorFormat);
-        if (!colorValue)
-            colorValue = this.color.toString(); // this.outputColorFormat can be invalid for current color (e.g. &quot;nickname&quot;).
-
-        this.displayText = colorValue;
-
-        if (colorWasChanged)
-            this.dispatchEventToListeners(WebInspector.CSSColorPicker.Event.ColorChanged, {color: this.color});
-    }
-};
-
-WebInspector.CSSColorPicker.hsvaToRGBA = function(h, s, v, a)
-{
-    var r, g, b;
-
-    var i = Math.floor(h * 6);
-    var f = h * 6 - i;
-    var p = v * (1 - s);
-    var q = v * (1 - f * s);
-    var t = v * (1 - (1 - f) * s);
-
-    switch(i % 6) {
-    case 0:
-        r = v, g = t, b = p;
-        break;
-    case 1:
-        r = q, g = v, b = p;
-        break;
-    case 2:
-        r = p, g = v, b = t;
-        break;
-    case 3:
-        r = p, g = q, b = v;
-        break;
-    case 4:
-        r = t, g = p, b = v;
-        break;
-    case 5:
-        r = v, g = p, b = q;
-        break;
-    }
-
-    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a];
-};
-
-WebInspector.CSSColorPicker.rgbaToHSVA = function(r, g, b, a)
-{
-    r = r / 255;
-    g = g / 255;
-    b = b / 255;
-
-    var max = Math.max(r, g, b);
-    var min = Math.min(r, g, b);
-    var h;
-    var s;
-    var v = max;
-
-    var d = max - min;
-    s = max ? d / max : 0;
-
-    if(max === min) {
-        // Achromatic.
-        h = 0;
-    } else {
-        switch(max) {
-        case r:
-            h = (g - b) / d + (g &lt; b ? 6 : 0);
-            break;
-        case g:
-            h = (b - r) / d + 2;
-            break;
-        case b:
-            h = (r - g) / d + 4;
-            break;
-        }
-        h /= 6;
-    }
-    return [h, s, v, a];
-};
-
-WebInspector.CSSColorPicker.prototype.__proto__ = WebInspector.Object.prototype;
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -743,19 +743,23 @@
</span><span class="cx">         } else {
</span><span class="cx">             this._colorPickerPopover = new WebInspector.Popover(this);
</span><span class="cx"> 
</span><del>-            var colorPicker = new WebInspector.CSSColorPicker;
-            colorPicker.color = color;
</del><ins>+            var colorPicker = new WebInspector.ColorPicker;
</ins><span class="cx"> 
</span><del>-            colorPicker.addEventListener(WebInspector.CSSColorPicker.Event.ColorChanged, function(event) {
</del><ins>+            colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, function(event) {
</ins><span class="cx">                 updateCodeMirror.call(this, event.data.color.toString());
</span><span class="cx">             }.bind(this));
</span><span class="cx"> 
</span><span class="cx">             var bounds = WebInspector.Rect.rectFromClientRect(swatch.getBoundingClientRect());
</span><ins>+            const padding = 2;
+            bounds.origin.x -= padding;
+            bounds.origin.y -= padding;
+            bounds.size.width += padding * 2;
+            bounds.size.height += padding * 2;
</ins><span class="cx"> 
</span><span class="cx">             this._colorPickerPopover.content = colorPicker.element;
</span><span class="cx">             this._colorPickerPopover.present(bounds, [WebInspector.RectEdge.MIN_X]);
</span><span class="cx"> 
</span><del>-            colorPicker.shown();
</del><ins>+            colorPicker.color = color;
</ins><span class="cx">         }
</span><span class="cx">     },
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Color.js (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Color.js        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/UserInterface/Color.js        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -413,40 +413,20 @@
</span><span class="cx">         var s = parseFloat(hsl[1]) / 100;
</span><span class="cx">         var l = parseFloat(hsl[2]) / 100;
</span><span class="cx"> 
</span><del>-        if (s &lt; 0)
-            s = 0;
-
-        if (l &lt;= 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 &lt; 0)
-                h += 1;
-            else if (h &gt; 1)
-                h -= 1;
-
-            if ((h * 6) &lt; 1)
-                return p + (q - p) * h * 6;
-            else if ((h * 2) &lt; 1)
-                return q;
-            else if ((h * 3) &lt; 2)
-                return p + (q - p) * ((2 / 3) - h) * 6;
-            else
-                return p;
-        }
</del><ins>+        h *= 6;
+        var sArray = [
+            l += s *= l &lt; .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)
+        ];
</ins><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     /**
</span><span class="lines">@@ -851,3 +831,75 @@
</span><span class="cx">     &quot;rgba(0,0,0,0)&quot;: [[0, 0, 0, 0], [0, 0, 0, 0], &quot;transparent&quot;],
</span><span class="cx">     &quot;hsla(0,0,0,0)&quot;: [[0, 0, 0, 0], [0, 0, 0, 0], &quot;transparent&quot;],
</span><span class="cx"> };
</span><ins>+
+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 &lt; 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;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorPickercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/ColorPicker.css (0 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ColorPicker.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ColorPicker.css        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+/*
+ * 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 &gt; * {
+    position: absolute;
+}
+
+.color-picker &gt; .slider {
+    top: 7px;
+    width: 196px;
+    -webkit-transform: rotate(-90deg) translateX(-100%);
+    -webkit-transform-origin: 0 0;
+}
+
+.color-picker &gt; .brightness {
+    left: 215px;
+}
+
+.color-picker &gt; .opacity {
+    left: 238px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorPickerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js (0 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -0,0 +1,141 @@
</span><ins>+/*
+ * 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(&quot;brightness&quot;);
+
+    this._opacitySlider = new WebInspector.Slider();
+    this._opacitySlider.delegate = this;
+    this._opacitySlider.element.classList.add(&quot;opacity&quot;);
+
+    this._element = document.createElement(&quot;div&quot;);
+    this._element.className = &quot;color-picker&quot;;
+
+    this._element.appendChild(this._colorWheel.element);
+    this._element.appendChild(this._brightnessSlider.element);
+    this._element.appendChild(this._opacitySlider.element);
+
+    this._opacityPattern = 'url(&quot;data:image/svg+xml;base64,' + btoa('&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;6&quot; height=&quot;6&quot; fill=&quot;rgb(204, 204, 204)&quot;&gt;&lt;rect width=&quot;3&quot; height=&quot;3&quot; /&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;3&quot; height=&quot;3&quot;/&gt;&lt;/svg&gt;') + '&quot;)';
+
+    this._color = &quot;white&quot;;
+};
+
+WebInspector.ColorPicker.Event = {
+    ColorChanged: &quot;css-color-picker-color-changed&quot;
+};
+
+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 = &quot;linear-gradient(90deg, &quot; + transparent + &quot;, &quot; + tintedColor + &quot;), &quot; + this._opacityPattern;
+        this._brightnessSlider.element.style.backgroundImage = &quot;linear-gradient(90deg, black, &quot; + rawColor + &quot;)&quot;;
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorWheelcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/ColorWheel.css (0 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ColorWheel.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ColorWheel.css        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+/*
+ * 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-wheel {
+    position: relative;
+}
+
+.color-wheel &gt; .crosshair {
+    position: absolute;
+    top: -4px;
+    left: -3px;
+    width: 5px;
+    height: 5px;
+    border: 1px solid black;
+    border-radius: 3px;
+    pointer-events: none;
+    background-color: white;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorWheeljs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js (0 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -0,0 +1,281 @@
</span><ins>+/*
+ * 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.ColorWheel = function()
+{
+    WebInspector.Object.call(this);
+
+    this._rawCanvas = document.createElement(&quot;canvas&quot;);
+    this._tintedCanvas = document.createElement(&quot;canvas&quot;);
+    this._finalCanvas = document.createElement(&quot;canvas&quot;);
+
+    this._crosshair = document.createElement(&quot;div&quot;);
+    this._crosshair.className = &quot;crosshair&quot;;
+
+    this._element = document.createElement(&quot;div&quot;);
+    this._element.className = &quot;color-wheel&quot;;
+
+    this._element.appendChild(this._finalCanvas);
+    this._element.appendChild(this._crosshair);
+
+    this._finalCanvas.addEventListener(&quot;mousedown&quot;, this);
+}
+
+WebInspector.ColorWheel.prototype = {
+    contructor: WebInspector.ColorWheel,
+    __proto__: WebInspector.Object.prototype,
+
+    // Public
+
+    set dimension(dimension)
+    {
+        this._finalCanvas.width = this._tintedCanvas.width = this._rawCanvas.width = dimension;
+        this._finalCanvas.height = this._tintedCanvas.height = this._rawCanvas.height = dimension;
+
+        this._dimension = dimension;
+        // We shrink the radius a bit for better anti-aliasing.
+        this._radius = dimension / 2 - 2;
+
+        this._setCrosshairPosition(new WebInspector.Point(dimension / 2, dimension / 2));
+
+        this._drawRawCanvas();
+        this._draw();
+    },
+    
+    get element()
+    {
+        return this._element;
+    },
+
+    get brightness()
+    {
+        return this._brightness;
+    },
+
+    set brightness(brightness)
+    {
+        this._brightness = brightness;
+        this._draw();
+    },
+
+    get tintedColor()
+    {
+        if (this._crosshairPosition)
+            return this._colorAtPointWithBrightness(this._crosshairPosition.x, this._crosshairPosition.y, this._brightness);
+
+        return new WebInspector.Color(&quot;white&quot;);
+    },
+
+    set tintedColor(tintedColor)
+    {
+        var data = this._tintedColorToPointAndBrightness(tintedColor);
+        this._setCrosshairPosition(data.point);
+        this.brightness = data.brightness;
+    },
+    
+    get rawColor()
+    {
+        if (this._crosshairPosition)
+            return this._colorAtPointWithBrightness(this._crosshairPosition.x, this._crosshairPosition.y, 1);
+
+        return new WebInspector.Color(&quot;white&quot;);
+    },
+
+    // Protected
+
+    handleEvent: function(event)
+    {
+        switch (event.type) {
+        case &quot;mousedown&quot;:
+            this._handleMousedown(event);
+            break;
+        case &quot;mousemove&quot;:
+            this._handleMousemove(event);
+            break;
+        case &quot;mouseup&quot;:
+            this._handleMouseup(event);
+            break;
+        }
+    },
+
+    // Private
+
+    _handleMousedown: function(event)
+    {
+        window.addEventListener(&quot;mousemove&quot;, this, true);
+        window.addEventListener(&quot;mouseup&quot;, this, true);
+
+        this._updateColorForMouseEvent(event);
+    },
+
+    _handleMousemove: function(event)
+    {
+        this._updateColorForMouseEvent(event);
+    },
+
+    _handleMouseup: function(event)
+    {
+        window.removeEventListener(&quot;mousemove&quot;, this, true);
+        window.removeEventListener(&quot;mouseup&quot;, this, true);
+    },
+
+    _pointInCircleForEvent: function(event)
+    {
+        function distance(a, b)
+        {
+            return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+        }
+
+        function angleFromCenterToPoint(center, point)
+        {
+            return Math.atan2(point.y - center.y, point.x - center.x);
+        }
+
+        function pointOnCircumference(c, r, a)
+        {
+            return new WebInspector.Point(c.x + r * Math.cos(a), c.y + r * Math.sin(a));
+        }
+
+        var dimension = this._dimension;
+        var point = window.webkitConvertPointFromPageToNode(this._finalCanvas, new WebKitPoint(event.pageX, event.pageY));
+        var center = new WebInspector.Point(dimension / 2, dimension / 2);
+        if (distance(point, center) &gt; this._radius) {
+            var angle = angleFromCenterToPoint(center, point);
+            point = pointOnCircumference(center, this._radius, angle);
+        }
+        return point;
+    },
+
+    _updateColorForMouseEvent: function(event)
+    {
+        var point = this._pointInCircleForEvent(event);
+
+        this._setCrosshairPosition(point);
+
+        if (this.delegate &amp;&amp; typeof this.delegate.colorWheelColorDidChange === &quot;function&quot;)
+            this.delegate.colorWheelColorDidChange(this);
+    },
+
+    _setCrosshairPosition: function(point)
+    {
+        this._crosshairPosition = point;
+        this._crosshair.style.webkitTransform = &quot;translate(&quot; + Math.round(point.x) + &quot;px, &quot; + Math.round(point.y) + &quot;px)&quot;;
+    },
+
+    _tintedColorToPointAndBrightness: function(color)
+    {
+        var rgb = color.rgb;
+        var hsv = WebInspector.Color.rgb2hsv(rgb[0], rgb[1], rgb[2]);
+        var cosHue = Math.cos(hsv[0] * Math.PI / 180);
+        var sinHue = Math.sin(hsv[0] * Math.PI / 180);
+        var center = this._dimension / 2;
+        var x = center + (center * cosHue * hsv[1]);
+        var y = center - (center * sinHue * hsv[1]);
+        return {
+            point: new WebInspector.Point(x, y),
+            brightness: hsv[2]
+        };
+    },
+
+    _drawRawCanvas: function() {
+        var ctx = this._rawCanvas.getContext(&quot;2d&quot;);
+
+        var dimension = this._dimension;
+        var center = dimension / 2;
+
+        ctx.fillStyle = &quot;white&quot;;
+        ctx.fillRect(0, 0, dimension, dimension);
+
+        var imageData = ctx.getImageData(0, 0, dimension, dimension);
+        var data = imageData.data;
+        for (var j = 0; j &lt; dimension; ++j) {
+            for (var i = 0; i &lt; dimension; ++i) {
+                var color = this._colorAtPointWithBrightness(i, j, 1);
+                if (!color)
+                    continue;
+                var pos = (j * dimension + i) * 4;
+                data[pos] = color.rgb[0];
+                data[pos + 1] = color.rgb[1];
+                data[pos + 2] = color.rgb[2];
+            }
+        }
+        ctx.putImageData(imageData, 0, 0);
+    },
+
+    _colorAtPointWithBrightness: function(x, y, brightness)
+    {
+        var center = this._dimension / 2;
+        var xDis = x - center;
+        var yDis = y - center;
+        var distance = Math.sqrt(xDis * xDis + yDis * yDis);
+
+        if (distance &gt; center)
+            return null;
+
+        var h = Math.atan2(y - center, center - x) * 180 / Math.PI;
+        h = (h + 180) % 360;
+        var v = brightness;
+        var s = Math.max(0, distance) / center;
+
+        var rgb = WebInspector.Color.hsv2rgb(h, s, v);
+        return WebInspector.Color.fromRGB(
+            Math.round(rgb[0] * 255),
+            Math.round(rgb[1] * 255),
+            Math.round(rgb[2] * 255)
+        );
+    },
+    
+    _drawTintedCanvas: function()
+    {
+        var ctx = this._tintedCanvas.getContext(&quot;2d&quot;);
+        var dimension = this._dimension;
+
+        ctx.save();
+        ctx.drawImage(this._rawCanvas, 0, 0, dimension, dimension);
+        if (this._brightness !== 1) {
+            ctx.globalAlpha = 1 - this._brightness;
+            ctx.fillStyle = &quot;black&quot;;
+            ctx.fillRect(0, 0, dimension, dimension);
+        }
+        ctx.restore();
+    },
+    
+    _draw: function()
+    {
+        this._drawTintedCanvas();
+
+        var ctx = this._finalCanvas.getContext(&quot;2d&quot;);
+        var dimension = this._dimension;
+
+        ctx.save();
+        ctx.clearRect(0, 0, dimension, dimension);
+        ctx.beginPath();
+        ctx.arc(dimension / 2, dimension / 2, this._radius + 1, 0, Math.PI * 2, true); 
+        ctx.closePath();
+        ctx.clip();
+        ctx.drawImage(this._tintedCanvas, 0, 0, dimension, dimension);
+        ctx.restore();
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesSliderThumbpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumb.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumb.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesSliderThumb2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumb@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumb@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesSliderThumbPressedpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumbPressed.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumbPressed.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesSliderThumbPressed2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumbPressed@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Source/WebInspectorUI/UserInterface/Images/SliderThumbPressed@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -118,7 +118,9 @@
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;CompletionSuggestionsView.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;CodeMirrorOverrides.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;ConsolePrompt.css&quot;&gt;
</span><del>-    &lt;link rel=&quot;stylesheet&quot; href=&quot;CSSColorPicker.css&quot;&gt;
</del><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;Slider.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;ColorWheel.css&quot;&gt;
+    &lt;link rel=&quot;stylesheet&quot; href=&quot;ColorPicker.css&quot;&gt;
</ins><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;CodeMirrorDragToAlterNumberController.css&quot;&gt;
</span><span class="cx">     &lt;link rel=&quot;stylesheet&quot; href=&quot;GoToLineDialog.css&quot;&gt;
</span><span class="cx"> 
</span><span class="lines">@@ -321,7 +323,9 @@
</span><span class="cx">     &lt;script src=&quot;ComputedStyleDetailsPanel.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;RulesStyleDetailsPanel.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;MetricsStyleDetailsPanel.js&quot;&gt;&lt;/script&gt;
</span><del>-    &lt;script src=&quot;CSSColorPicker.js&quot;&gt;&lt;/script&gt;
</del><ins>+    &lt;script src=&quot;Slider.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;ColorWheel.js&quot;&gt;&lt;/script&gt;
+    &lt;script src=&quot;ColorPicker.js&quot;&gt;&lt;/script&gt;
</ins><span class="cx">     &lt;script src=&quot;CSSStyleDeclarationTextEditor.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;CSSStyleDeclarationSection.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;IndeterminateProgressSpinner.js&quot;&gt;&lt;/script&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceSlidercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Slider.css (0 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Slider.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Slider.css        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+/*
+ * 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.
+ */
+
+.slider {
+    position: relative;
+    height: 11px;
+    outline: 1px solid rgb(148, 148, 148);
+    border: 1px solid white;
+}
+
+.slider &gt; img {
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    width: 14px;
+    height: 17px;
+    content: -webkit-image-set(url(Images/SliderThumb.png) 1x, url(Images/SliderThumb@2x.png) 2x);
+}
+
+.slider &gt; img.dragging {
+    content: -webkit-image-set(url(Images/SliderThumbPressed.png) 1x, url(Images/SliderThumbPressed@2x.png) 2x);
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceSliderjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Slider.js (0 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Slider.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Slider.js        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -0,0 +1,137 @@
</span><ins>+/*
+ * 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.Slider = function()
+{
+    this._element = document.createElement(&quot;div&quot;);
+    this._element.className = &quot;slider&quot;;
+
+    this._knob = this._element.appendChild(document.createElement(&quot;img&quot;));
+
+    this._value = 0;
+    this._knobX = 0;
+    this.__maxX = 0;
+
+    this._element.addEventListener(&quot;mousedown&quot;, this);
+};
+
+WebInspector.Slider.KnobWidth = 13;
+
+WebInspector.Slider.prototype = {
+    contructor: WebInspector.Slider,
+    __proto__: WebInspector.Object.prototype,
+    
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+    
+    get value()
+    {
+        return this._value;
+    },
+    
+    set value(value)
+    {
+        value = Math.max(Math.min(value, 1), 0);
+
+        if (value === this._value)
+            return;
+
+        this._value = value;
+
+        this._knobX = Math.round(value * this._maxX);
+        this._knob.style.webkitTransform = &quot;translate3d(&quot; + this._knobX + &quot;px, 0, 0)&quot;;
+
+        if (this.delegate &amp;&amp; typeof this.delegate.sliderValueDidChange === &quot;function&quot;)
+            this.delegate.sliderValueDidChange(this, value);
+    },
+    
+    // Protected
+
+    handleEvent: function(event)
+    {
+        switch (event.type) {
+        case &quot;mousedown&quot;:
+            this._handleMousedown(event);
+            break;
+        case &quot;mousemove&quot;:
+            this._handleMousemove(event);
+            break;
+        case &quot;mouseup&quot;:
+            this._handleMouseup(event);
+            break;
+        }
+    },
+
+    // Private
+
+    _handleMousedown: function(event)
+    {
+        if (event.target !== this._knob)
+            this.value = (this._localPointForEvent(event).x - 3) / this._maxX;
+
+        this._startKnobX = this._knobX;
+        this._startMouseX = this._localPointForEvent(event).x;
+
+        this._element.classList.add(&quot;dragging&quot;);
+
+        window.addEventListener(&quot;mousemove&quot;, this, true);
+        window.addEventListener(&quot;mouseup&quot;, this, true);
+    },
+
+    _handleMousemove: function(event)
+    {
+        var dx = this._localPointForEvent(event).x - this._startMouseX;
+        var x = Math.max(Math.min(this._startKnobX + dx, this._maxX), 0);
+
+        this.value = x / this._maxX;
+    },
+
+    _handleMouseup: function(event)
+    {
+        this._element.classList.remove(&quot;dragging&quot;);
+
+        window.removeEventListener(&quot;mousemove&quot;, this, true);
+        window.removeEventListener(&quot;mouseup&quot;, this, true);
+    },
+
+    _localPointForEvent: function(event)
+    {
+        // We convert all event coordinates from page coordinates to local coordinates such that the slider
+        // may be transformed using CSS Transforms and interaction works as expected.
+        return window.webkitConvertPointFromPageToNode(this._element, new WebKitPoint(event.pageX, event.pageY));
+    },
+
+    get _maxX()
+    {
+        if (this.__maxX == 0 &amp;&amp; document.body.contains(this._element))
+            this.__maxX = this._element.offsetWidth - Math.ceil(WebInspector.Slider.KnobWidth / 2);
+
+        return this.__maxX;
+    }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
</del><ins>+&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
</ins><span class="cx"> &lt;Project DefaultTargets=&quot;Build&quot; ToolsVersion=&quot;4.0&quot; xmlns=&quot;http://schemas.microsoft.com/developer/msbuild/2003&quot;&gt;
</span><span class="cx">   &lt;ItemGroup Label=&quot;ProjectConfigurations&quot;&gt;
</span><span class="cx">     &lt;ProjectConfiguration Include=&quot;Debug_WinCairo|Win32&quot;&gt;
</span><span class="lines">@@ -214,8 +214,8 @@
</span><span class="cx">     &lt;None Include=&quot;..\UserInterface\CookieStorageContentView.js&quot; /&gt;
</span><span class="cx">     &lt;None Include=&quot;..\UserInterface\CookieStorageObject.js&quot; /&gt;
</span><span class="cx">     &lt;None Include=&quot;..\UserInterface\CookieStorageTreeElement.js&quot; /&gt;
</span><del>-    &lt;None Include=&quot;..\UserInterface\CSSColorPicker.css&quot; /&gt;
-    &lt;None Include=&quot;..\UserInterface\CSSColorPicker.js&quot; /&gt;
</del><ins>+    &lt;None Include=&quot;..\UserInterface\ColorPicker.css&quot; /&gt;
+    &lt;None Include=&quot;..\UserInterface\ColorPicker.js&quot; /&gt;
</ins><span class="cx">     &lt;None Include=&quot;..\UserInterface\CSSCompletions.js&quot; /&gt;
</span><span class="cx">     &lt;None Include=&quot;..\UserInterface\CSSKeywordCompletions.js&quot; /&gt;
</span><span class="cx">     &lt;None Include=&quot;..\UserInterface\CSSMedia.js&quot; /&gt;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIWebInspectorUIvcxprojWebInspectorUIvcxprojfilters"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters (159331 => 159332)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters        2013-11-15 10:35:35 UTC (rev 159331)
+++ trunk/Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters        2013-11-15 11:03:03 UTC (rev 159332)
</span><span class="lines">@@ -249,10 +249,10 @@
</span><span class="cx">     &lt;None Include=&quot;..\UserInterface\CookieStorageTreeElement.js&quot;&gt;
</span><span class="cx">       &lt;Filter&gt;UserInterface&lt;/Filter&gt;
</span><span class="cx">     &lt;/None&gt;
</span><del>-    &lt;None Include=&quot;..\UserInterface\CSSColorPicker.css&quot;&gt;
</del><ins>+    &lt;None Include=&quot;..\UserInterface\ColorPicker.css&quot;&gt;
</ins><span class="cx">       &lt;Filter&gt;UserInterface&lt;/Filter&gt;
</span><span class="cx">     &lt;/None&gt;
</span><del>-    &lt;None Include=&quot;..\UserInterface\CSSColorPicker.js&quot;&gt;
</del><ins>+    &lt;None Include=&quot;..\UserInterface\ColorPicker.js&quot;&gt;
</ins><span class="cx">       &lt;Filter&gt;UserInterface&lt;/Filter&gt;
</span><span class="cx">     &lt;/None&gt;
</span><span class="cx">     &lt;None Include=&quot;..\UserInterface\CSSCompletions.js&quot;&gt;
</span></span></pre>
</div>
</div>

</body>
</html>