<!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>[152092] 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/152092">152092</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2013-06-27 04:07:33 -0700 (Thu, 27 Jun 2013)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Display color picker in popover on color swatch click
https://bugs.webkit.org/show_bug.cgi?id=117919

Patch by Matthew Holden &lt;jftholden@yahoo.com&gt; on 2013-06-27
Reviewed by Timothy Hatcher.

Includes fixes from second code review.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/CSSColorPicker.css: Added.
(.colorpicker-container):
(.colorpicker-fill-parent):
(.colorpicker-top):
(.colorpicker-color):
(.colorpicker-bottom span):
(.colorpicker-text):
(.colorpicker-color-text-value):
(.colorpicker-hue):
(.colorpicker-fill):
(.colorpicker-range-container):
(.colorpicker-range-container *):
(.colorpicker-range-container label):
(.colorpicker-range-container input):
(.colorpicker-saturation):
(.colorpicker-value):
(.colorpicker-dragger):
(.colorpicker-slider):
(.colorpicker-container .swatch):
(.colorpicker-container .swatch-inner):
* UserInterface/CSSColorPicker.js: Added.
(WebInspector.CSSColorPicker.consume):
(WebInspector.CSSColorPicker.move):
(WebInspector.CSSColorPicker.start):
(WebInspector.CSSColorPicker.stop):
(WebInspector.CSSColorPicker.makeDraggable):
(WebInspector.CSSColorPicker.hueDrag):
(WebInspector.CSSColorPicker.colorDragStart):
(WebInspector.CSSColorPicker.colorDrag):
(WebInspector.CSSColorPicker.alphaDrag):
(WebInspector.CSSColorPicker.colorSwatchClicked):
(WebInspector.CSSColorPicker):
(WebInspector.CSSColorPicker.prototype.get element):
(WebInspector.CSSColorPicker.prototype.set color):
(WebInspector.CSSColorPicker.prototype.get color):
(WebInspector.CSSColorPicker.prototype.get outputColorFormat):
(WebInspector.CSSColorPicker.prototype.get colorHueOnly):
(WebInspector.CSSColorPicker.prototype.set displayText):
(WebInspector.CSSColorPicker.prototype.shown):
(WebInspector.CSSColorPicker.prototype._updateHelperLocations):
(WebInspector.CSSColorPicker.prototype._updateDisplay):
(WebInspector.CSSColorPicker.hsvaToRGBA):
(WebInspector.CSSColorPicker.rgbaToHSVA):
* UserInterface/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.event.newColorText.colorTextMarker):
(WebInspector.CSSStyleDeclarationTextEditor.prototype.event.newColorText):
* UserInterface/Main.html:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
</ul>

<h3>Added 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 (152091 => 152092)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2013-06-27 11:03:32 UTC (rev 152091)
+++ trunk/Source/WebInspectorUI/ChangeLog        2013-06-27 11:07:33 UTC (rev 152092)
</span><span class="lines">@@ -1,3 +1,64 @@
</span><ins>+2013-06-27  Matthew Holden  &lt;jftholden@yahoo.com&gt;
+
+        Web Inspector: Display color picker in popover on color swatch click
+        https://bugs.webkit.org/show_bug.cgi?id=117919
+
+        Reviewed by Timothy Hatcher.
+
+        Includes fixes from second code review.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/CSSColorPicker.css: Added.
+        (.colorpicker-container):
+        (.colorpicker-fill-parent):
+        (.colorpicker-top):
+        (.colorpicker-color):
+        (.colorpicker-bottom span):
+        (.colorpicker-text):
+        (.colorpicker-color-text-value):
+        (.colorpicker-hue):
+        (.colorpicker-fill):
+        (.colorpicker-range-container):
+        (.colorpicker-range-container *):
+        (.colorpicker-range-container label):
+        (.colorpicker-range-container input):
+        (.colorpicker-saturation):
+        (.colorpicker-value):
+        (.colorpicker-dragger):
+        (.colorpicker-slider):
+        (.colorpicker-container .swatch):
+        (.colorpicker-container .swatch-inner):
+        * UserInterface/CSSColorPicker.js: Added.
+        (WebInspector.CSSColorPicker.consume):
+        (WebInspector.CSSColorPicker.move):
+        (WebInspector.CSSColorPicker.start):
+        (WebInspector.CSSColorPicker.stop):
+        (WebInspector.CSSColorPicker.makeDraggable):
+        (WebInspector.CSSColorPicker.hueDrag):
+        (WebInspector.CSSColorPicker.colorDragStart):
+        (WebInspector.CSSColorPicker.colorDrag):
+        (WebInspector.CSSColorPicker.alphaDrag):
+        (WebInspector.CSSColorPicker.colorSwatchClicked):
+        (WebInspector.CSSColorPicker):
+        (WebInspector.CSSColorPicker.prototype.get element):
+        (WebInspector.CSSColorPicker.prototype.set color):
+        (WebInspector.CSSColorPicker.prototype.get color):
+        (WebInspector.CSSColorPicker.prototype.get outputColorFormat):
+        (WebInspector.CSSColorPicker.prototype.get colorHueOnly):
+        (WebInspector.CSSColorPicker.prototype.set displayText):
+        (WebInspector.CSSColorPicker.prototype.shown):
+        (WebInspector.CSSColorPicker.prototype._updateHelperLocations):
+        (WebInspector.CSSColorPicker.prototype._updateDisplay):
+        (WebInspector.CSSColorPicker.hsvaToRGBA):
+        (WebInspector.CSSColorPicker.rgbaToHSVA):
+        * UserInterface/CSSStyleDeclarationTextEditor.js:
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.event.newColorText.colorTextMarker):
+        (WebInspector.CSSStyleDeclarationTextEditor.prototype.event.newColorText):
+        * UserInterface/Main.html:
+
</ins><span class="cx"> 2013-06-26  Antoine Quint  &lt;graouts@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: stepping through while paused in debugger makes a popover appear
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (152091 => 152092)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2013-06-27 11:03:32 UTC (rev 152091)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js        2013-06-27 11:07:33 UTC (rev 152092)
</span><span class="lines">@@ -65,7 +65,7 @@
</span><span class="cx"> localizedStrings[&quot;Child Layers&quot;] = &quot;Child Layers&quot;;
</span><span class="cx"> localizedStrings[&quot;Clear Log&quot;] = &quot;Clear Log&quot;;
</span><span class="cx"> localizedStrings[&quot;Clear log (%s or %s)&quot;] = &quot;Clear log (%s or %s)&quot;;
</span><del>-localizedStrings[&quot;Click to toggle color format&quot;] = &quot;Click to toggle color format&quot;;
</del><ins>+localizedStrings[&quot;Click to open a colorpicker. Shift-click to change color format.&quot;] = &quot;Click to open a colorpicker. Shift-click to change color format.&quot;;
</ins><span class="cx"> localizedStrings[&quot;Close&quot;] = &quot;Close&quot;;
</span><span class="cx"> localizedStrings[&quot;Closure Variables&quot;] = &quot;Closure Variables&quot;;
</span><span class="cx"> localizedStrings[&quot;Code&quot;] = &quot;Code&quot;;
</span><span class="lines">@@ -251,6 +251,7 @@
</span><span class="cx"> localizedStrings[&quot;Normal call tree&quot;] = &quot;Normal call tree&quot;;
</span><span class="cx"> localizedStrings[&quot;Not found&quot;] = &quot;Not found&quot;;
</span><span class="cx"> localizedStrings[&quot;Online&quot;] = &quot;Online&quot;;
</span><ins>+localizedStrings[&quot;Opacity:&quot;] = &quot;Opacity:&quot;;
</ins><span class="cx"> localizedStrings[&quot;Original&quot;] = &quot;Original&quot;;
</span><span class="cx"> localizedStrings[&quot;Original formatting&quot;] = &quot;Original formatting&quot;;
</span><span class="cx"> localizedStrings[&quot;Originally %s&quot;] = &quot;Originally %s&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceCSSColorPickercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.css (0 => 152092)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.css                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.css        2013-06-27 11:07:33 UTC (rev 152092)
</span><span class="lines">@@ -0,0 +1,157 @@
</span><ins>+/*
+ * 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); 
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceCSSColorPickerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.js (0 => 152092)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.js                                (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSColorPicker.js        2013-06-27 11:07:33 UTC (rev 152092)
</span><span class="lines">@@ -0,0 +1,406 @@
</span><ins>+/*
+ * 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;
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js (152091 => 152092)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js        2013-06-27 11:03:32 UTC (rev 152091)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js        2013-06-27 11:07:33 UTC (rev 152092)
</span><span class="lines">@@ -191,6 +191,12 @@
</span><span class="cx"> 
</span><span class="cx">     // Protected
</span><span class="cx"> 
</span><ins>+    didDismissPopover: function(popover) 
+    {
+        if (popover === this._colorPickerPopover)
+            delete this._colorPickerPopover;
+    },
+
</ins><span class="cx">     completionControllerCompletionsHidden: function(completionController)
</span><span class="cx">     {
</span><span class="cx">         var styleText = this._style.text;
</span><span class="lines">@@ -428,7 +434,7 @@
</span><span class="cx">                     }
</span><span class="cx"> 
</span><span class="cx">                     var swatchElement = document.createElement(&quot;span&quot;);
</span><del>-                    swatchElement.title = WebInspector.UIString(&quot;Click to toggle color format&quot;);
</del><ins>+                    swatchElement.title = WebInspector.UIString(&quot;Click to open a colorpicker. Shift-click to change color format.&quot;);
</ins><span class="cx">                     swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
</span><span class="cx">                     swatchElement.addEventListener(&quot;click&quot;, this._colorSwatchClicked.bind(this));
</span><span class="cx"> 
</span><span class="lines">@@ -650,12 +656,17 @@
</span><span class="cx"> 
</span><span class="cx">     _colorSwatchClicked: function(event)
</span><span class="cx">     {
</span><del>-        var color = event.target.__color;
</del><ins>+        if (this._colorPickerPopover)
+            return;
+
+        var swatch = event.target;
+
+        var color = swatch.__color;
</ins><span class="cx">         console.assert(color);
</span><span class="cx">         if (!color)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var colorTextMarker = event.target.__colorTextMarker;
</del><ins>+        var colorTextMarker = swatch.__colorTextMarker;
</ins><span class="cx">         console.assert(colorTextMarker);
</span><span class="cx">         if (!colorTextMarker)
</span><span class="cx">             return;
</span><span class="lines">@@ -665,34 +676,58 @@
</span><span class="cx">         if (!range)
</span><span class="cx">             return;
</span><span class="cx"> 
</span><del>-        var nextFormat = color.nextFormat();
-        console.assert(nextFormat);
-        if (!nextFormat)
-            return;
</del><ins>+        function updateCodeMirror(newColorText)
+        {
+            this._codeMirror.operation(function() 
+            {
+                colorTextMarker.clear();
</ins><span class="cx"> 
</span><del>-        color.format = nextFormat;
</del><ins>+                this._codeMirror.replaceRange(newColorText, range.from, range.to);
</ins><span class="cx"> 
</span><del>-        var newColorText = color.toString();
</del><ins>+                // The color's text format could have changed, so we need to update the &quot;range&quot; 
+                // variable to anticipate a different &quot;range.to&quot; property.
+                var to = {line: range.from.line, ch: range.from.ch + newColorText.length};
+                range.to = to;
</ins><span class="cx"> 
</span><del>-        function update()
-        {
-            colorTextMarker.clear();
</del><ins>+                colorTextMarker = this._codeMirror.markText(range.from, to);
+                colorTextMarker.__markedColor = true;
</ins><span class="cx"> 
</span><del>-            this._codeMirror.replaceRange(newColorText, range.from, range.to);
</del><ins>+                swatch.__colorTextMarker = colorTextMarker;
+            }.bind(this));
+        }
</ins><span class="cx"> 
</span><del>-            var to = {line: range.from.line, ch: range.from.ch + newColorText.length};
</del><ins>+        if (event.shiftKey) {
+            var nextFormat = color.nextFormat();
+            console.assert(nextFormat);
+            if (!nextFormat)
+                return;
+            color.format = nextFormat;
</ins><span class="cx"> 
</span><del>-            colorTextMarker = this._codeMirror.markText(range.from, to);
-            colorTextMarker.__markedColor = true;
</del><ins>+            var newColorText = color.toString();
</ins><span class="cx"> 
</span><del>-            event.target.__colorTextMarker = colorTextMarker;
</del><ins>+            // Ignore the change so we don't commit the format change. However, any future user
+            // edits will commit the color format.
+            this._ignoreCodeMirrorContentDidChangeEvent = true;
+            updateCodeMirror.call(this, newColorText);
+            delete this._ignoreCodeMirrorContentDidChangeEvent;
+
+        } else {
+            this._colorPickerPopover = new WebInspector.Popover(this);
+
+            var colorPicker = new WebInspector.CSSColorPicker;
+            colorPicker.color = color;
+
+            colorPicker.addEventListener(WebInspector.CSSColorPicker.Event.ColorChanged, function(event) {
+                updateCodeMirror.call(this, event.data.color.toString());
+            }.bind(this));
+
+            var bounds = WebInspector.Rect.rectFromClientRect(swatch.getBoundingClientRect());
+            
+            this._colorPickerPopover.content = colorPicker.element;
+            this._colorPickerPopover.present(bounds, [WebInspector.RectEdge.MIN_X]);
+
+            colorPicker.shown();
</ins><span class="cx">         }
</span><del>-
-        // Ignore the change so we don't commit the format change. However, any future user
-        // edits will commit the color format.
-        this._ignoreCodeMirrorContentDidChangeEvent = true;
-        this._codeMirror.operation(update.bind(this));
-        delete this._ignoreCodeMirrorContentDidChangeEvent;
</del><span class="cx">     },
</span><span class="cx"> 
</span><span class="cx">     _propertyOverriddenStatusChanged: function(event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (152091 => 152092)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2013-06-27 11:03:32 UTC (rev 152091)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2013-06-27 11:07:33 UTC (rev 152092)
</span><span class="lines">@@ -115,6 +115,7 @@
</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><ins>+    &lt;link rel=&quot;stylesheet&quot; href=&quot;CSSColorPicker.css&quot;&gt;
</ins><span class="cx"> 
</span><span class="cx">     &lt;script src=&quot;External/CodeMirror/codemirror.js&quot;&gt;&lt;/script&gt;
</span><span class="cx">     &lt;script src=&quot;External/CodeMirror/comment.js&quot;&gt;&lt;/script&gt;
</span><span class="lines">@@ -304,6 +305,7 @@
</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><ins>+    &lt;script src=&quot;CSSColorPicker.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>
</div>

</body>
</html>