Web Inspector: Display color picker in popover on color swatch click

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

Patch by Matthew Holden <jftholden@yahoo.com> 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:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@152092 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 57dfdaba
2013-06-27 Matthew Holden <jftholden@yahoo.com>
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:
2013-06-26 Antoine Quint <graouts@apple.com> 2013-06-26 Antoine Quint <graouts@apple.com>
Web Inspector: stepping through while paused in debugger makes a popover appear Web Inspector: stepping through while paused in debugger makes a popover appear
......
Bvar localizedStrings = new Object; Bvar localizedStrings = new Object;
......
/*
* Copyright (C) 2011 Brian Grinstead All rights reserved.
* Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
*
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
* its contributors may be used to endorse or promote products derived
* from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
* THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
.colorpicker-container {
top: 0;
left: 0;
padding: 5px;
width: 212px;
z-index: 10;
}
.colorpicker-fill-parent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.colorpicker-top {
position: relative;
width: 100%;
display: inline-block;
}
.colorpicker-color {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 160px;
border: 1px solid #D0D0D0;
}
.colorpicker-bottom span {
display: inline-block;
}
.colorpicker-text {
font-family: monospace;
font-size: 11px !important;
}
.colorpicker-color-text-value {
-webkit-user-select: text;
position: relative;
left: 3px;
top: -6px;
white-space: pre-wrap;
}
.colorpicker-hue {
position: absolute;
top: 0;
width: 30px;
right: 0;
bottom: 0;
-webkit-box-reflect: right -28px;
}
.colorpicker-fill {
/* Same as colorpicker-color width to force aspect ratio. */
margin-top: 160px;
}
.colorpicker-range-container {
position: relative;
padding-bottom: 5px;
}
.colorpicker-range-container * {
font-size: 11px;
vertical-align: middle;
}
.colorpicker-range-container label {
display: inline-block;
padding-right: 4px;
}
.colorpicker-range-container input {
margin: 3px 0 0 3px;
width: 137px;
}
.colorpicker-saturation {
background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0));
}
.colorpicker-value {
background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0));
}
.colorpicker-hue {
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.colorpicker-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border: 1px solid white;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: black;
}
.colorpicker-slider {
position: absolute;
top: 0;
cursor: pointer;
border: 1px solid black;
height: 4px;
left: -1px;
right: -1px;
}
.colorpicker-container .swatch {
width: 20px;
height:20px;
margin: 0;
}
.colorpicker-container .swatch-inner {
height: 100%;
width: 100%;
display: inline-block;
border: 1px solid rgba(128, 128, 128, 0.6);
}
This diff is collapsed.
...@@ -191,6 +191,12 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = { ...@@ -191,6 +191,12 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = {
// Protected // Protected
didDismissPopover: function(popover)
{
if (popover === this._colorPickerPopover)
delete this._colorPickerPopover;
},
completionControllerCompletionsHidden: function(completionController) completionControllerCompletionsHidden: function(completionController)
{ {
var styleText = this._style.text; var styleText = this._style.text;
...@@ -428,7 +434,7 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = { ...@@ -428,7 +434,7 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = {
} }
var swatchElement = document.createElement("span"); var swatchElement = document.createElement("span");
swatchElement.title = WebInspector.UIString("Click to toggle color format"); swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format.");
swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName; swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this)); swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
...@@ -650,12 +656,17 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = { ...@@ -650,12 +656,17 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = {
_colorSwatchClicked: function(event) _colorSwatchClicked: function(event)
{ {
var color = event.target.__color; if (this._colorPickerPopover)
return;
var swatch = event.target;
var color = swatch.__color;
console.assert(color); console.assert(color);
if (!color) if (!color)
return; return;
var colorTextMarker = event.target.__colorTextMarker; var colorTextMarker = swatch.__colorTextMarker;
console.assert(colorTextMarker); console.assert(colorTextMarker);
if (!colorTextMarker) if (!colorTextMarker)
return; return;
...@@ -665,34 +676,58 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = { ...@@ -665,34 +676,58 @@ WebInspector.CSSStyleDeclarationTextEditor.prototype = {
if (!range) if (!range)
return; return;
var nextFormat = color.nextFormat(); function updateCodeMirror(newColorText)
console.assert(nextFormat); {
if (!nextFormat) this._codeMirror.operation(function()
return; {
colorTextMarker.clear();
color.format = nextFormat; this._codeMirror.replaceRange(newColorText, range.from, range.to);
var newColorText = color.toString(); // The color's text format could have changed, so we need to update the "range"
// variable to anticipate a different "range.to" property.
var to = {line: range.from.line, ch: range.from.ch + newColorText.length};
range.to = to;
function update() colorTextMarker = this._codeMirror.markText(range.from, to);
{ colorTextMarker.__markedColor = true;
colorTextMarker.clear();
this._codeMirror.replaceRange(newColorText, range.from, range.to); swatch.__colorTextMarker = colorTextMarker;
}.bind(this));
}
var to = {line: range.from.line, ch: range.from.ch + newColorText.length}; if (event.shiftKey) {
var nextFormat = color.nextFormat();
console.assert(nextFormat);
if (!nextFormat)
return;
color.format = nextFormat;
colorTextMarker = this._codeMirror.markText(range.from, to); var newColorText = color.toString();
colorTextMarker.__markedColor = true;
event.target.__colorTextMarker = colorTextMarker; // 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;
// Ignore the change so we don't commit the format change. However, any future user } else {
// edits will commit the color format. this._colorPickerPopover = new WebInspector.Popover(this);
this._ignoreCodeMirrorContentDidChangeEvent = true;
this._codeMirror.operation(update.bind(this)); var colorPicker = new WebInspector.CSSColorPicker;
delete this._ignoreCodeMirrorContentDidChangeEvent; 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();
}
}, },
_propertyOverriddenStatusChanged: function(event) _propertyOverriddenStatusChanged: function(event)
......
...@@ -115,6 +115,7 @@ ...@@ -115,6 +115,7 @@
<link rel="stylesheet" href="CompletionSuggestionsView.css"> <link rel="stylesheet" href="CompletionSuggestionsView.css">
<link rel="stylesheet" href="CodeMirrorOverrides.css"> <link rel="stylesheet" href="CodeMirrorOverrides.css">
<link rel="stylesheet" href="ConsolePrompt.css"> <link rel="stylesheet" href="ConsolePrompt.css">
<link rel="stylesheet" href="CSSColorPicker.css">
<script src="External/CodeMirror/codemirror.js"></script> <script src="External/CodeMirror/codemirror.js"></script>
<script src="External/CodeMirror/comment.js"></script> <script src="External/CodeMirror/comment.js"></script>
...@@ -304,6 +305,7 @@ ...@@ -304,6 +305,7 @@
<script src="ComputedStyleDetailsPanel.js"></script> <script src="ComputedStyleDetailsPanel.js"></script>
<script src="RulesStyleDetailsPanel.js"></script> <script src="RulesStyleDetailsPanel.js"></script>
<script src="MetricsStyleDetailsPanel.js"></script> <script src="MetricsStyleDetailsPanel.js"></script>
<script src="CSSColorPicker.js"></script>
<script src="CSSStyleDeclarationTextEditor.js"></script> <script src="CSSStyleDeclarationTextEditor.js"></script>
<script src="CSSStyleDeclarationSection.js"></script> <script src="CSSStyleDeclarationSection.js"></script>
<script src="IndeterminateProgressSpinner.js"></script> <script src="IndeterminateProgressSpinner.js"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment