<!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>[194977] 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/194977">194977</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-01-13 13:14:44 -0800 (Wed, 13 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add support for the existing GradientEditor in the CSS Rules sidebar
https://bugs.webkit.org/show_bug.cgi?id=153004
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-01-13
Reviewed by Timothy Hatcher.
Both the Visual sidebar and Resource view have editors for CSS gradient
values, but the Rules sidebar instead only adds editors for basic color
values. Instead of duplicating the code for gradient swatches, existing
code will be used to give this same functionality to the Rules sidebar.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:
* UserInterface/Models/Gradient.js:
(WebInspector.Gradient):
(WebInspector.Gradient.fromString):
(WebInspector.Gradient.stopsWithComponents):
(WebInspector.Gradient.prototype.copy):
(WebInspector.Gradient.prototype.toString):
Refactored WebInspector.Gradient into its own class.
(WebInspector.LinearGradient):
(WebInspector.LinearGradient.prototype.toString):
Now uses WebInspector.Gradient inheritance and methods.
(WebInspector.RadialGradient):
(WebInspector.RadialGradient.prototype.toString):
Now uses WebInspector.Gradient inheritance and methods.
* UserInterface/Views/CSSStyleDeclarationTextEditor.css:
Use InlineSwatch.css values instead.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker): Deleted.
(@media (-webkit-max-device-pixel-ratio: 1)): Deleted.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover): Deleted.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active): Deleted.
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover): Deleted.
Removed unused popover member variable.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.createSwatch):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches):
Renamed variables for more consistent naming and reimplemented the logic
to use the new WebInspector.InlineSwatch methods. As a result, it was
possible to consolidate the 3 different type of swatch functions into a
single function.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._commentProperty.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._uncommentRange.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.createSwatch): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked): Deleted.
* UserInterface/Views/CodeMirrorTextMarkers.js:
(createCodeMirrorColorTextMarkers.matchFunction):
Added logic so that if the matched color string is found inside a gradient,
it will not have a marker created for it.
* UserInterface/Views/InlineSwatch.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css.
Consolidated the various swatch CSS classes into one file.
(.inline-swatch):
(.inline-swatch.bezier):
(.inline-swatch.bezier:hover):
(.inline-swatch.bezier:active):
(@media (-webkit-max-device-pixel-ratio: 1)):
(.inline-swatch > span):
Ensured that the inner swatch element can not be selected so that the "click"
listener on its parent always fires.
(.inline-swatch:hover > span):
(.inline-swatch:active > span):
(.inline-swatch.bezier > span):
* UserInterface/Views/InlineSwatch.js: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js.
(WebInspector.InlineSwatch):
Now accepts a new first argument to indicate what type of color swatch
to create and what functionality it will have. Currently has options
for WebInspector.Color, WebInspector.Gradient, and WebInspector.CubicBezier.
(WebInspector.InlineSwatch.prototype.get element):
(WebInspector.InlineSwatch.prototype.get value):
(WebInspector.InlineSwatch.prototype.set value):
(WebInspector.InlineSwatch.prototype._fallbackValue):
(WebInspector.InlineSwatch.prototype._updateSwatch):
(WebInspector.InlineSwatch.prototype._swatchElementClicked):
(WebInspector.InlineSwatch.prototype._valueEditorValueDidChange):
(WebInspector.InlineSwatch.prototype._handleContextMenuEvent):
(WebInspector.InlineSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
(WebInspector.InlineSwatch.prototype._getNextValidHEXFormat):
* UserInterface/Views/VisualStyleBackgroundPicker.css:
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient):
(.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .inline-swatch.gradient):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:hover):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:active):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient > span):
(.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .inline-swatch.gradient + .value-input):
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .color-swatch): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
(.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-swatch + .value-input): Deleted.
* UserInterface/Views/VisualStyleBackgroundPicker.js:
Removed the specific code for the gradient swatch and moved to using a
gradient-type InlineSwatch for gradient values instead.
(WebInspector.VisualStyleBackgroundPicker):
(WebInspector.VisualStyleBackgroundPicker.prototype.set value):
(WebInspector.VisualStyleBackgroundPicker.prototype._updateGradient):
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchColorChanged):
(WebInspector.VisualStyleBackgroundPicker.prototype._valueInputValueChanged):
(WebInspector.VisualStyleBackgroundPicker.prototype._handleKeywordChanged):
(WebInspector.VisualStyleBackgroundPicker.prototype._updateGradientSwatch): Deleted.
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked.handleColorPickerToggled): Deleted.
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked): Deleted.
(WebInspector.VisualStyleBackgroundPicker.prototype._gradientEditorGradientChanged): Deleted.
* UserInterface/Views/VisualStyleColorPicker.css:
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:hover):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:active):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color > span):
Add override CSS to ensure that the color-type InlineSwatch displays nicely
next to the flexbox style Visual sidebar.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch): Deleted.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
Refactored to only use overriding properties of the basic .inline-swatch values.
* UserInterface/Views/VisualStyleColorPicker.js:
(WebInspector.VisualStyleColorPicker):
(WebInspector.VisualStyleColorPicker.prototype._colorSwatchColorChanged):
(WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):
* UserInterface/Views/VisualStyleTimingEditor.css:
(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier):
(.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier):
(@media (-webkit-min-device-pixel-ratio: 2)):
Add override CSS to ensure that the color-type InlineSwatch displays nicely
next to the flexbox style Visual sidebar.
(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor): Deleted.
(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover): Deleted.
(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active): Deleted.
Refactored to only use overriding properties of the basic .inline-swatch values.
* UserInterface/Views/VisualStyleTimingEditor.js:
Removed the specific code for the cubic-bezier swatch and moved to using a
cubic-bezier-type InlineSwatch for gradient values instead.
(WebInspector.VisualStyleTimingEditor):
(WebInspector.VisualStyleTimingEditor.prototype.get bezierValue):
(WebInspector.VisualStyleTimingEditor.prototype.set bezierValue):
(WebInspector.VisualStyleTimingEditor.prototype._setValue):
(WebInspector.VisualStyleTimingEditor.prototype._handleKeywordChanged):
(WebInspector.VisualStyleTimingEditor.prototype._bezierSwatchValueChanged):
(WebInspector.VisualStyleTimingEditor.prototype._bezierMarkerClicked): Deleted.</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="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsGradientjs">trunk/Source/WebInspectorUI/UserInterface/Models/Gradient.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorTextMarkersjs">trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickercss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickerjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickercss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickerjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleTimingEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleTimingEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchcss">trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchjs">trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchcss">trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchjs">trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -1,3 +1,182 @@
</span><ins>+2016-01-13 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: Add support for the existing GradientEditor in the CSS Rules sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=153004
+
+ Reviewed by Timothy Hatcher.
+
+ Both the Visual sidebar and Resource view have editors for CSS gradient
+ values, but the Rules sidebar instead only adds editors for basic color
+ values. Instead of duplicating the code for gradient swatches, existing
+ code will be used to give this same functionality to the Rules sidebar.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Main.html:
+
+ * UserInterface/Models/Gradient.js:
+ (WebInspector.Gradient):
+ (WebInspector.Gradient.fromString):
+ (WebInspector.Gradient.stopsWithComponents):
+ (WebInspector.Gradient.prototype.copy):
+ (WebInspector.Gradient.prototype.toString):
+ Refactored WebInspector.Gradient into its own class.
+
+ (WebInspector.LinearGradient):
+ (WebInspector.LinearGradient.prototype.toString):
+ Now uses WebInspector.Gradient inheritance and methods.
+
+ (WebInspector.RadialGradient):
+ (WebInspector.RadialGradient.prototype.toString):
+ Now uses WebInspector.Gradient inheritance and methods.
+
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.css:
+ Use InlineSwatch.css values instead.
+
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker): Deleted.
+ (@media (-webkit-max-device-pixel-ratio: 1)): Deleted.
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover): Deleted.
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active): Deleted.
+
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype.didDismissPopover): Deleted.
+ Removed unused popover member variable.
+
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._contentChanged):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._updateTextMarkers.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.createSwatch):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createInlineSwatches):
+ Renamed variables for more consistent naming and reimplemented the logic
+ to use the new WebInspector.InlineSwatch methods. As a result, it was
+ possible to consolidate the 3 different type of swatch functions into a
+ single function.
+
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._commentProperty.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._uncommentRange.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._inlineSwatchValueChanged):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._resetContent.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.createSwatch): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors.update): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createBezierEditors): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged.update): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror.update): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked.updateCodeMirror): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._cubicBezierMarkerClicked): Deleted.
+
+ * UserInterface/Views/CodeMirrorTextMarkers.js:
+ (createCodeMirrorColorTextMarkers.matchFunction):
+ Added logic so that if the matched color string is found inside a gradient,
+ it will not have a marker created for it.
+
+ * UserInterface/Views/InlineSwatch.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css.
+ Consolidated the various swatch CSS classes into one file.
+
+ (.inline-swatch):
+ (.inline-swatch.bezier):
+ (.inline-swatch.bezier:hover):
+ (.inline-swatch.bezier:active):
+ (@media (-webkit-max-device-pixel-ratio: 1)):
+ (.inline-swatch > span):
+ Ensured that the inner swatch element can not be selected so that the "click"
+ listener on its parent always fires.
+
+ (.inline-swatch:hover > span):
+ (.inline-swatch:active > span):
+ (.inline-swatch.bezier > span):
+
+ * UserInterface/Views/InlineSwatch.js: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js.
+ (WebInspector.InlineSwatch):
+ Now accepts a new first argument to indicate what type of color swatch
+ to create and what functionality it will have. Currently has options
+ for WebInspector.Color, WebInspector.Gradient, and WebInspector.CubicBezier.
+
+ (WebInspector.InlineSwatch.prototype.get element):
+ (WebInspector.InlineSwatch.prototype.get value):
+ (WebInspector.InlineSwatch.prototype.set value):
+ (WebInspector.InlineSwatch.prototype._fallbackValue):
+ (WebInspector.InlineSwatch.prototype._updateSwatch):
+ (WebInspector.InlineSwatch.prototype._swatchElementClicked):
+ (WebInspector.InlineSwatch.prototype._valueEditorValueDidChange):
+ (WebInspector.InlineSwatch.prototype._handleContextMenuEvent):
+ (WebInspector.InlineSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
+ (WebInspector.InlineSwatch.prototype._getNextValidHEXFormat):
+
+ * UserInterface/Views/VisualStyleBackgroundPicker.css:
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .inline-swatch.gradient):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:hover):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:active):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient > span):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .inline-swatch.gradient + .value-input):
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch): Deleted.
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .color-swatch): Deleted.
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
+ (.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-swatch + .value-input): Deleted.
+
+ * UserInterface/Views/VisualStyleBackgroundPicker.js:
+ Removed the specific code for the gradient swatch and moved to using a
+ gradient-type InlineSwatch for gradient values instead.
+
+ (WebInspector.VisualStyleBackgroundPicker):
+ (WebInspector.VisualStyleBackgroundPicker.prototype.set value):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._updateGradient):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchColorChanged):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._valueInputValueChanged):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._handleKeywordChanged):
+ (WebInspector.VisualStyleBackgroundPicker.prototype._updateGradientSwatch): Deleted.
+ (WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked.handleColorPickerToggled): Deleted.
+ (WebInspector.VisualStyleBackgroundPicker.prototype._gradientSwatchClicked): Deleted.
+ (WebInspector.VisualStyleBackgroundPicker.prototype._gradientEditorGradientChanged): Deleted.
+
+ * UserInterface/Views/VisualStyleColorPicker.css:
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:hover):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:active):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color > span):
+ Add override CSS to ensure that the color-type InlineSwatch displays nicely
+ next to the flexbox style Visual sidebar.
+
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch): Deleted.
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover): Deleted.
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active): Deleted.
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span): Deleted.
+ Refactored to only use overriding properties of the basic .inline-swatch values.
+
+ * UserInterface/Views/VisualStyleColorPicker.js:
+ (WebInspector.VisualStyleColorPicker):
+ (WebInspector.VisualStyleColorPicker.prototype._colorSwatchColorChanged):
+ (WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):
+
+ * UserInterface/Views/VisualStyleTimingEditor.css:
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier):
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+ Add override CSS to ensure that the color-type InlineSwatch displays nicely
+ next to the flexbox style Visual sidebar.
+
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor): Deleted.
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover): Deleted.
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active): Deleted.
+ Refactored to only use overriding properties of the basic .inline-swatch values.
+
+ * UserInterface/Views/VisualStyleTimingEditor.js:
+ Removed the specific code for the cubic-bezier swatch and moved to using a
+ cubic-bezier-type InlineSwatch for gradient values instead.
+
+ (WebInspector.VisualStyleTimingEditor):
+ (WebInspector.VisualStyleTimingEditor.prototype.get bezierValue):
+ (WebInspector.VisualStyleTimingEditor.prototype.set bezierValue):
+ (WebInspector.VisualStyleTimingEditor.prototype._setValue):
+ (WebInspector.VisualStyleTimingEditor.prototype._handleKeywordChanged):
+ (WebInspector.VisualStyleTimingEditor.prototype._bezierSwatchValueChanged):
+ (WebInspector.VisualStyleTimingEditor.prototype._bezierMarkerClicked): Deleted.
+
</ins><span class="cx"> 2016-01-12 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Timeline recording controls should use NavigationBar
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -130,12 +130,12 @@
</span><span class="cx"> localizedStrings["Click to disable the selected rule"] = "Click to disable the selected rule";
</span><span class="cx"> localizedStrings["Click to enable the selected rule"] = "Click to enable the selected rule";
</span><span class="cx"> localizedStrings["Click to link property values"] = "Click to link property values";
</span><del>-localizedStrings["Click to open a cubic-bezier editor"] = "Click to open a cubic-bezier editor";
</del><ins>+localizedStrings["Click to open a cubic-bezier editor."] = "Click to open a cubic-bezier editor.";
</ins><span class="cx"> localizedStrings["Click to remove link"] = "Click to remove link";
</span><span class="cx"> localizedStrings["Click to remove the selected item."] = "Click to remove the selected item.";
</span><span class="cx"> localizedStrings["Click to restart the animation"] = "Click to restart the animation";
</span><span class="cx"> localizedStrings["Click to select a color. Shift-click to switch color formats."] = "Click to select a color. Shift-click to switch color formats.";
</span><del>-localizedStrings["Click to select a gradient"] = "Click to select a gradient";
</del><ins>+localizedStrings["Click to select a gradient."] = "Click to select a gradient.";
</ins><span class="cx"> localizedStrings["Clickable"] = "Clickable";
</span><span class="cx"> localizedStrings["Clip"] = "Clip";
</span><span class="cx"> localizedStrings["Close"] = "Close";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -48,7 +48,6 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/ClusterContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/CodeMirrorOverrides.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ColorPicker.css">
</span><del>- <link rel="stylesheet" href="Views/ColorSwatch.css">
</del><span class="cx"> <link rel="stylesheet" href="Views/ColorWheel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/CompletionSuggestionsView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ComputedStyleDetailsPanel.css">
</span><span class="lines">@@ -95,6 +94,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/ImageResourceContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/IndeterminateProgressSpinner.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/IndexedDatabaseObjectStoreContentView.css">
</span><ins>+ <link rel="stylesheet" href="Views/InlineSwatch.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/IssueTreeElement.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/LayerTreeDetailsSidebarPanel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/LayoutTimelineOverviewGraph.css">
</span><span class="lines">@@ -436,7 +436,6 @@
</span><span class="cx"> <script src="Views/CodeMirrorFormatters.js"></script>
</span><span class="cx"> <script src="Views/CodeMirrorTextMarkers.js"></script>
</span><span class="cx"> <script src="Views/ColorPicker.js"></script>
</span><del>- <script src="Views/ColorSwatch.js"></script>
</del><span class="cx"> <script src="Views/ColorWheel.js"></script>
</span><span class="cx"> <script src="Views/CompletionSuggestionsView.js"></script>
</span><span class="cx"> <script src="Views/ComputedStyleDetailsPanel.js"></script>
</span><span class="lines">@@ -498,6 +497,7 @@
</span><span class="cx"> <script src="Views/IndexedDatabaseObjectStoreIndexTreeElement.js"></script>
</span><span class="cx"> <script src="Views/IndexedDatabaseObjectStoreTreeElement.js"></script>
</span><span class="cx"> <script src="Views/IndexedDatabaseTreeElement.js"></script>
</span><ins>+ <script src="Views/InlineSwatch.js"></script>
</ins><span class="cx"> <script src="Views/IssueTreeElement.js"></script>
</span><span class="cx"> <script src="Views/LayerTreeDataGridNode.js"></script>
</span><span class="cx"> <script src="Views/LayerTreeDetailsSidebarPanel.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsGradientjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Gradient.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/Gradient.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Gradient.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -23,14 +23,17 @@
</span><span class="cx"> * THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-// FIXME: Convert to class?
-WebInspector.Gradient = {
- Types: {
- Linear: "linear-gradient",
- Radial: "radial-gradient"
- },
</del><ins>+WebInspector.Gradient = class Gradient
+{
+ constructor(type, stops)
+ {
+ this.type = type;
+ this.stops = stops;
+ }
</ins><span class="cx">
</span><del>- fromString(cssString)
</del><ins>+ // Static
+
+ static fromString(cssString)
</ins><span class="cx"> {
</span><span class="cx"> var type;
</span><span class="cx"> var openingParenthesisIndex = cssString.indexOf("(");
</span><span class="lines">@@ -84,17 +87,17 @@
</span><span class="cx">
</span><span class="cx"> var gradient;
</span><span class="cx"> if (type === WebInspector.Gradient.Types.Linear)
</span><del>- gradient = WebInspector.LinearGradient.linearGradientWithComponents(components);
</del><ins>+ gradient = WebInspector.LinearGradient.fromComponents(components);
</ins><span class="cx"> else
</span><del>- gradient = WebInspector.RadialGradient.radialGradientWithComponents(components);
</del><ins>+ gradient = WebInspector.RadialGradient.fromComponents(components);
</ins><span class="cx">
</span><span class="cx"> if (gradient)
</span><span class="cx"> gradient.repeats = typeString.startsWith("repeating");
</span><span class="cx">
</span><span class="cx"> return gradient;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><del>- stopsWithComponents(components)
</del><ins>+ static stopsWithComponents(components)
</ins><span class="cx"> {
</span><span class="cx"> // FIXME: handle lengths.
</span><span class="cx"> var stops = components.map(function(component) {
</span><span class="lines">@@ -126,8 +129,10 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return stops;
</span><del>- },
</del><ins>+ }
</ins><span class="cx">
</span><ins>+ // Public
+
</ins><span class="cx"> stringFromStops(stops)
</span><span class="cx"> {
</span><span class="cx"> var count = stops.length - 1;
</span><span class="lines">@@ -138,20 +143,36 @@
</span><span class="cx"> return str;
</span><span class="cx"> }).join(", ");
</span><span class="cx"> }
</span><ins>+
+ // Public
+
+ copy()
+ {
+ // Implemented by subclasses.
+ }
+
+ toString()
+ {
+ // Implemented by subclasses.
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.LinearGradient = class LinearGradient
</del><ins>+WebInspector.Gradient.Types = {
+ Linear: "linear-gradient",
+ Radial: "radial-gradient"
+};
+
+WebInspector.LinearGradient = class LinearGradient extends WebInspector.Gradient
</ins><span class="cx"> {
</span><span class="cx"> constructor(angle, stops)
</span><span class="cx"> {
</span><del>- this.type = WebInspector.Gradient.Types.Linear;
</del><ins>+ super(WebInspector.Gradient.Types.Linear, stops);
</ins><span class="cx"> this.angle = angle;
</span><del>- this.stops = stops;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Static
</span><span class="cx">
</span><del>- static linearGradientWithComponents(components)
</del><ins>+ static fromComponents(components)
</ins><span class="cx"> {
</span><span class="cx"> var angle = 180;
</span><span class="cx">
</span><span class="lines">@@ -233,24 +254,23 @@
</span><span class="cx"> if (str !== "")
</span><span class="cx"> str += ", ";
</span><span class="cx">
</span><del>- str += WebInspector.Gradient.stringFromStops(this.stops);
</del><ins>+ str += this.stringFromStops(this.stops);
</ins><span class="cx">
</span><span class="cx"> return (this.repeats ? "repeating-" : "") + this.type + "(" + str + ")";
</span><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.RadialGradient = class RadialGradient
</del><ins>+WebInspector.RadialGradient = class RadialGradient extends WebInspector.Gradient
</ins><span class="cx"> {
</span><span class="cx"> constructor(sizing, stops)
</span><span class="cx"> {
</span><del>- this.type = WebInspector.Gradient.Types.Radial;
</del><ins>+ super(WebInspector.Gradient.Types.Radial, stops);
</ins><span class="cx"> this.sizing = sizing;
</span><del>- this.stops = stops;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Static
</span><span class="cx">
</span><del>- static radialGradientWithComponents(components)
</del><ins>+ static fromComponents(components)
</ins><span class="cx"> {
</span><span class="cx"> var sizing = !WebInspector.Color.fromString(components[0].join(" ")) ? components.shift().join(" ") : "";
</span><span class="cx">
</span><span class="lines">@@ -275,7 +295,7 @@
</span><span class="cx"> if (str !== "")
</span><span class="cx"> str += ", ";
</span><span class="cx">
</span><del>- str += WebInspector.Gradient.stringFromStops(this.stops);
</del><ins>+ str += this.stringFromStops(this.stops);
</ins><span class="cx">
</span><span class="cx"> return (this.repeats ? "repeating-" : "") + this.type + "(" + str + ")";
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -91,32 +91,6 @@
</span><span class="cx"> filter: brightness(0.9);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker {
- width: 11px;
- height: 11px;
- margin-right: 2px;
- vertical-align: -2px;
- content: url(../Images/CubicBezier.svg);
- cursor: default;
-}
-
-@media (-webkit-max-device-pixel-ratio: 1) {
- /* Ensure the bezier marker is even by even so it looks a bit less blurry. */
- .css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker {
- vertical-align: -1px;
- width: 10px;
- height: 10px;
- }
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:hover {
- filter: brightness(0.9);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .cubic-bezier-marker:active {
- filter: brightness(0.8);
-}
-
</del><span class="cx"> .computed .css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit,
</span><span class="cx"> .css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited {
</span><span class="cx"> opacity: 0.5;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -388,8 +388,6 @@
</span><span class="cx">
</span><span class="cx"> didDismissPopover(popover)
</span><span class="cx"> {
</span><del>- if (popover === this._colorPickerPopover)
- this._colorPickerPopover = null;
</del><span class="cx"> if (popover === this._cubicBezierEditorPopover)
</span><span class="cx"> this._cubicBezierEditorPopover = null;
</span><span class="cx"> }
</span><span class="lines">@@ -771,10 +769,8 @@
</span><span class="cx"> // When the change is a completion change, create color swatches now since the changes
</span><span class="cx"> // will not go through _propertiesChanged until completionControllerCompletionsHidden happens.
</span><span class="cx"> // This way any auto completed colors get swatches right away.
</span><del>- if (this._completionController.isCompletionChange(change)) {
- this._createColorSwatches(false, change.from.line);
- this._createBezierEditors(false, change.from.line);
- }
</del><ins>+ if (this._completionController.isCompletionChange(change))
+ this._createInlineSwatches(false, change.from.line);
</ins><span class="cx">
</span><span class="cx"> // Use a short delay for user input to coalesce more changes before committing. Other actions like
</span><span class="cx"> // undo, redo and paste are atomic and work better with a zero delay. CodeMirror identifies changes that
</span><span class="lines">@@ -824,9 +820,8 @@
</span><span class="cx"> }.bind(this));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Look for colors and make swatches.
- this._createColorSwatches(true);
- this._createBezierEditors(true);
</del><ins>+ // Look for swatchable values and make inline swatches.
+ this._createInlineSwatches(true);
</ins><span class="cx">
</span><span class="cx"> this._markLinesWithCheckboxPlaceholder();
</span><span class="cx"> }
</span><span class="lines">@@ -872,51 +867,41 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _createColorSwatches(nonatomic, lineNumber)
</del><ins>+ _createInlineSwatches(nonatomic, lineNumber)
</ins><span class="cx"> {
</span><del>- function update()
</del><ins>+ function createSwatch(swatch, marker, valueObject, valueString)
</ins><span class="cx"> {
</span><del>- let range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
</del><ins>+ swatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._inlineSwatchValueChanged, this);
</ins><span class="cx">
</span><del>- // Look for color strings and add swatches in front of them.
- createCodeMirrorColorTextMarkers(this._codeMirror, range, function(marker, color, colorString) {
- let swatch = new WebInspector.ColorSwatch(color, this._codeMirror.getOption("readOnly"));
- swatch.addEventListener(WebInspector.ColorSwatch.Event.ColorChanged, this._colorSwatchColorChanged, this);
</del><ins>+ let codeMirrorTextMarker = marker.codeMirrorTextMarker;
+ let codeMirrorTextMarkerRange = codeMirrorTextMarker.find();
+ this._codeMirror.setUniqueBookmark(codeMirrorTextMarkerRange.from, swatch.element);
</ins><span class="cx">
</span><del>- let codeMirrorTextMarker = marker.codeMirrorTextMarker;
- let codeMirrorTextMarkerRange = codeMirrorTextMarker.find();
- this._codeMirror.setUniqueBookmark(codeMirrorTextMarkerRange.from, swatch.element);
-
- swatch.__colorTextMarker = codeMirrorTextMarker;
- swatch.__colorTextMarkerRange = codeMirrorTextMarkerRange;
- }.bind(this));
</del><ins>+ swatch.__textMarker = codeMirrorTextMarker;
+ swatch.__textMarkerRange = codeMirrorTextMarkerRange;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- if (nonatomic)
- update.call(this);
- else
- this._codeMirror.operation(update.bind(this));
- }
-
- _createBezierEditors(nonatomic, lineNumber)
- {
</del><span class="cx"> function update()
</span><span class="cx"> {
</span><del>- var range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
</del><ins>+ let range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
</ins><span class="cx">
</span><del>- // Look for cubic-bezier and timing functions and add cubic-bezier icons in front of them.
- createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range, function(marker, cubicBezier) {
- var bezierMarker = document.createElement("span");
- bezierMarker.title = WebInspector.UIString("Click to open a cubic-bezier editor");
- bezierMarker.className = WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName;
- bezierMarker.addEventListener("click", this._cubicBezierMarkerClicked.bind(this));
</del><ins>+ // Look for color strings and add swatches in front of them.
+ createCodeMirrorColorTextMarkers(this._codeMirror, range, (marker, color, colorString) => {
+ let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Color, color, this._codeMirror.getOption("readOnly"));
+ createSwatch.call(this, swatch, marker, color, colorString);
+ });
</ins><span class="cx">
</span><del>- var codeMirrorTextMarker = marker.codeMirrorTextMarker;
- this._codeMirror.setUniqueBookmark(codeMirrorTextMarker.find().from, bezierMarker);
</del><ins>+ // Look for gradient strings and add swatches in front of them.
+ createCodeMirrorGradientTextMarkers(this._codeMirror, range, (marker, gradient, gradientString) => {
+ let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Gradient, gradient, this._codeMirror.getOption("readOnly"));
+ createSwatch.call(this, swatch, marker, gradient, gradientString);
+ });
</ins><span class="cx">
</span><del>- bezierMarker.__textMarker = codeMirrorTextMarker;
- bezierMarker.__bezier = cubicBezier;
- }.bind(this));
</del><ins>+ // Look for cubic-bezier strings and add swatches in front of them.
+ createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range, (marker, bezier, bezierString) => {
+ let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Bezier, bezier, this._codeMirror.getOption("readOnly"));
+ createSwatch.call(this, swatch, marker, bezier, bezierString);
+ });
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (nonatomic)
</span><span class="lines">@@ -1271,9 +1256,8 @@
</span><span class="cx"> // Replace the text with a commented version.
</span><span class="cx"> this._codeMirror.replaceRange("/* " + text + " */", range.from, range.to);
</span><span class="cx">
</span><del>- // Update the line for any color swatches or cubic-beziers that got removed.
- this._createColorSwatches(true, range.from.line);
- this._createBezierEditors(true, range.from.line);
</del><ins>+ // Update the line for any inline swatches that got removed.
+ this._createInlineSwatches(true, range.from.line);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._codeMirror.operation(update.bind(this));
</span><span class="lines">@@ -1311,28 +1295,27 @@
</span><span class="cx"> this._codeMirror.addLineClass(range.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
</span><span class="cx"> this._codeMirror.replaceRange(text, range.from, range.to);
</span><span class="cx">
</span><del>- // Update the line for any color swatches or cubic-beziers that got removed.
- this._createColorSwatches(true, range.from.line);
- this._createBezierEditors(true, range.from.line);
</del><ins>+ // Update the line for any inline swatches that got removed.
+ this._createInlineSwatches(true, range.from.line);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._codeMirror.operation(update.bind(this));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _colorSwatchColorChanged(event)
</del><ins>+ _inlineSwatchValueChanged(event)
</ins><span class="cx"> {
</span><span class="cx"> let swatch = event && event.target;
</span><span class="cx"> console.assert(swatch);
</span><span class="cx"> if (!swatch)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- let colorString = event && event.data && event.data.color && event.data.color.toString();
- console.assert(colorString);
- if (!colorString)
</del><ins>+ let value = event.data && event.data.value && event.data.value.toString();
+ console.assert(value);
+ if (!value)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- let colorTextMarker = swatch.__colorTextMarker;
- let range = swatch.__colorTextMarkerRange;
</del><ins>+ let textMarker = swatch.__textMarker;
+ let range = swatch.__textMarkerRange;
</ins><span class="cx"> console.assert(range);
</span><span class="cx"> if (!range)
</span><span class="cx"> return;
</span><span class="lines">@@ -1340,136 +1323,48 @@
</span><span class="cx"> function update()
</span><span class="cx"> {
</span><span class="cx"> // The original text marker might have been cleared by a style update,
</span><del>- // in this case we need to find the new color text marker so we know
- // the right range for the new style color text.
- if (!colorTextMarker || !colorTextMarker.find()) {
- colorTextMarker = null;
</del><ins>+ // in this case we need to find the new text marker so we know the
+ // right range for the new style text.
+ if (!textMarker || !textMarker.find()) {
+ textMarker = null;
</ins><span class="cx">
</span><span class="cx"> let marks = this._codeMirror.findMarksAt(range.from);
</span><span class="cx"> if (!marks.length)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> for (let mark of marks) {
</span><del>- if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type !== WebInspector.TextMarker.Type.Color)
</del><ins>+ let type = WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type;
+ if (type !== WebInspector.TextMarker.Type.Color && type !== WebInspector.TextMarker.Type.Gradient && type !== WebInspector.TextMarker.Type.CubicBezier)
</ins><span class="cx"> continue;
</span><del>- colorTextMarker = mark;
</del><ins>+ textMarker = mark;
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- if (!colorTextMarker)
</del><ins>+ if (!textMarker)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // Sometimes we still might find a stale text marker with findMarksAt.
</span><del>- let newRange = colorTextMarker.find();
- if (!newRange)
</del><ins>+ range = textMarker.find();
+ if (!range)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- range = newRange;
</del><ins>+ textMarker.clear();
</ins><span class="cx">
</span><del>- colorTextMarker.clear();
</del><ins>+ this._codeMirror.replaceRange(value, range.from, range.to);
</ins><span class="cx">
</span><del>- this._codeMirror.replaceRange(colorString, range.from, range.to);
-
- // The color's text format could have changed, so we need to update the "range"
</del><ins>+ // The value's text could have changed, so we need to update the "range"
</ins><span class="cx"> // variable to anticipate a different "range.to" property.
</span><del>- range.to.ch = range.from.ch + colorString.length;
</del><ins>+ range.to.ch = range.from.ch + value.length;
</ins><span class="cx">
</span><del>- colorTextMarker = this._codeMirror.markText(range.from, range.to);
</del><ins>+ textMarker = this._codeMirror.markText(range.from, range.to);
</ins><span class="cx">
</span><del>- swatch.__colorTextMarker = colorTextMarker;
</del><ins>+ swatch.__textMarker = textMarker;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._codeMirror.operation(update.bind(this));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _cubicBezierMarkerClicked(event)
- {
- if (this._cubicBezierEditorPopover)
- return;
-
- var bezierMarker = event.target;
-
- var bezier = bezierMarker.__bezier;
- console.assert(bezier);
- if (!bezier)
- return;
-
- var bezierTextMarker = bezierMarker.__textMarker;
- console.assert(bezierTextMarker);
- if (!bezierTextMarker)
- return;
-
- var range = bezierTextMarker.find();
- console.assert(range);
- if (!range)
- return;
-
- function updateCodeMirror(newCubicBezierText)
- {
- function update()
- {
- // The original text marker might have been cleared by a style update,
- // in this case we need to find the new bezier text marker so we know
- // the right range for the new style bezier text.
- if (!bezierTextMarker || !bezierTextMarker.find()) {
- bezierTextMarker = null;
-
- var marks = this._codeMirror.findMarksAt(range.from);
- if (!marks.length)
- return;
-
- for (var i = 0; i < marks.length; ++i) {
- var mark = marks[i];
- if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type !== WebInspector.TextMarker.Type.CubicBezier)
- continue;
- bezierTextMarker = mark;
- break;
- }
- }
-
- if (!bezierTextMarker)
- return;
-
- // Sometimes we still might find a stale text marker with findMarksAt.
- var newRange = bezierTextMarker.find();
- if (!newRange)
- return;
-
- range = newRange;
-
- bezierTextMarker.clear();
-
- this._codeMirror.replaceRange(newCubicBezierText, range.from, range.to);
-
- // The bezier's text format could have changed, so we need to update the "range"
- // variable to anticipate a different "range.to" property.
- range.to.ch = range.from.ch + newCubicBezierText.length;
-
- bezierTextMarker = this._codeMirror.markText(range.from, range.to);
-
- bezierMarker.__textMarker = bezierTextMarker;
- }
-
- this._codeMirror.operation(update.bind(this));
- }
-
- this._cubicBezierEditorPopover = new WebInspector.Popover(this);
-
- var bezierEditor = new WebInspector.BezierEditor;
-
- bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, function(event) {
- updateCodeMirror.call(this, event.data.bezier.toString());
- }.bind(this));
-
- var bounds = WebInspector.Rect.rectFromClientRect(bezierMarker.getBoundingClientRect());
-
- this._cubicBezierEditorPopover.content = bezierEditor.element;
- this._cubicBezierEditorPopover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
-
- bezierEditor.bezier = bezier;
- }
-
</del><span class="cx"> _propertyOverriddenStatusChanged(event)
</span><span class="cx"> {
</span><span class="cx"> this._updateTextMarkerForPropertyIfNeeded(event.target);
</span><span class="lines">@@ -1681,9 +1576,8 @@
</span><span class="cx"> }
</span><span class="cx"> }.bind(this));
</span><span class="cx">
</span><del>- // Look for colors and make swatches.
- this._createColorSwatches(true);
- this._createBezierEditors(true);
</del><ins>+ // Look for swatchable values and make inline swatches.
+ this._createInlineSwatches(true);
</ins><span class="cx">
</span><span class="cx"> // Restore the cursor position/selection.
</span><span class="cx"> this._codeMirror.setSelection(selectionAnchor, selectionHead);
</span><span class="lines">@@ -1771,7 +1665,6 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = "read-only";
</span><del>-WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName = "cubic-bezier-marker";
</del><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = "checkbox-placeholder";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = "editing-line";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay = 250;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCodeMirrorTextMarkersjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -84,9 +84,36 @@
</span><span class="cx">
</span><span class="cx"> function createCodeMirrorColorTextMarkers(codeMirror, range, callback)
</span><span class="cx"> {
</span><del>- // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
- var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b\w+\b(?![-.]))/g;
</del><ins>+ // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffff, #ffffff, #ffffffff, white
+ let colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b\w+\b(?![-.]))/g;
</ins><span class="cx"> function matchFunction(lineContent, match) {
</span><ins>+ if (!lineContent || !lineContent.length)
+ return false;
+
+ // In order determine if the matched color is inside a gradient, first
+ // look before the text to find the first unmatched open parenthesis.
+ // This parenthesis, if it exists, will be immediately after the CSS
+ // funciton whose name can be checked to see if it matches a gradient.
+ let openParenthesis = 0;
+ let index = match.index;
+ let c = null;
+ while (c = lineContent[index]) {
+ if (c === "(")
+ ++openParenthesis;
+ if (c === ")")
+ --openParenthesis;
+
+ if (openParenthesis > 0)
+ break;
+
+ --index;
+ if (index < 0)
+ break;
+ }
+
+ if (/(repeating-)?(linear|radial)-gradient$/.test(lineContent.substring(0, index)))
+ return false;
+
</ins><span class="cx"> // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
</span><span class="cx"> return !(match.index > 0 && /[-.\"\']/.test(lineContent[match.index - 1]));
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchcss"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -1,70 +0,0 @@
</span><del>-/*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
- * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. 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-swatch {
- display: inline-block;
- position: relative;
- width: 1em;
- height: 1em;
- margin-right: 3px;
- vertical-align: -2px;
- /* Make a checkered background for transparent colors to show against. */
- background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
- linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
- background-color: white;
- background-size: 50%;
- background-position: top left, bottom right;
- background-repeat: no-repeat;
- cursor: default;
- overflow: hidden;
-}
-
-@media (-webkit-max-device-pixel-ratio: 1) {
- /* Ensure the color swatch is even by even so that it looks okay checkered. */
- .color-swatch {
- vertical-align: -1px;
- width: 10px;
- height: 10px;
- }
-}
-
-.color-swatch > span {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- border: 1px solid hsla(0, 0%, 25%, 0.4);
-}
-
-.color-swatch:hover > span {
- border-color: hsla(0, 0%, 25%, 0.8);
-}
-
-.color-swatch:active > span {
- border-color: hsl(0, 0%, 25%);
-}
-
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchjs"></a>
<div class="delfile"><h4>Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -1,206 +0,0 @@
</span><del>-/*
- * Copyright (C) 2015 Apple Inc. All rights reserved.
- * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. 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.ColorSwatch = class ColorSwatch extends WebInspector.Object
-{
- constructor(color, readOnly)
- {
- super();
-
- this._swatchElement = document.createElement("span");
- this._swatchElement.classList.add("color-swatch");
- this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
- if (!readOnly) {
- this._swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
- this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
- }
-
- this._swatchInnerElement = document.createElement("span");
- this._swatchElement.appendChild(this._swatchInnerElement);
-
- this._color = color || WebInspector.Color.fromString("transparent");
-
- this._updateSwatch();
- }
-
- // Public
-
- get element()
- {
- return this._swatchElement;
- }
-
- set color(color)
- {
- this._color = color || WebInspector.Color.fromString("transparent");
- this._updateSwatch(true);
- }
-
- get color()
- {
- return this._color;
- }
-
- // Private
-
- _colorSwatchClicked(event)
- {
- if (event.shiftKey) {
- let nextFormat = this._color.nextFormat();
- console.assert(nextFormat);
- if (!nextFormat)
- return;
-
- this._color.format = nextFormat;
- this._updateSwatch();
- return;
- }
-
- let bounds = WebInspector.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
-
- let colorPicker = new WebInspector.ColorPicker;
- colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorDidChange, this);
-
- let popover = new WebInspector.Popover(this);
- popover.content = colorPicker.element;
- popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
-
- colorPicker.color = this._color;
- }
-
- _colorPickerColorDidChange(event)
- {
- this._color = event.data.color;
- this._updateSwatch();
- }
-
- _handleContextMenuEvent(event)
- {
- let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
-
- if (this._color.isKeyword() && this._color.format !== WebInspector.Color.Format.Keyword) {
- contextMenu.appendItem(WebInspector.UIString("Format: Keyword"), () => {
- this._color.format = WebInspector.Color.Format.Keyword;
- this._updateSwatch();
- });
- }
-
- let hexInfo = this._getNextValidHEXFormat();
- if (hexInfo) {
- contextMenu.appendItem(hexInfo.title, () => {
- this._color.format = hexInfo.format;
- this._updateSwatch();
- });
- }
-
- if (this._color.simple && this._color.format !== WebInspector.Color.Format.HSL) {
- contextMenu.appendItem(WebInspector.UIString("Format: HSL"), () => {
- this._color.format = WebInspector.Color.Format.HSL;
- this._updateSwatch();
- });
- } else if (this._color.format !== WebInspector.Color.Format.HSLA) {
- contextMenu.appendItem(WebInspector.UIString("Format: HSLA"), () => {
- this._color.format = WebInspector.Color.Format.HSLA;
- this._updateSwatch();
- });
- }
-
- if (this._color.simple && this._color.format !== WebInspector.Color.Format.RGB) {
- contextMenu.appendItem(WebInspector.UIString("Format: RGB"), () => {
- this._color.format = WebInspector.Color.Format.RGB;
- this._updateSwatch();
- });
- } else if (this._color.format !== WebInspector.Color.Format.RGBA) {
- contextMenu.appendItem(WebInspector.UIString("Format: RGBA"), () => {
- this._color.format = WebInspector.Color.Format.RGBA;
- this._updateSwatch();
- });
- }
- }
-
- _getNextValidHEXFormat()
- {
- function hexMatchesCurrentColor(hexInfo) {
- let nextIsSimple = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.HEX;
- if (nextIsSimple && !this._color.simple)
- return false;
-
- let nextIsShort = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.ShortHEXAlpha;
- if (nextIsShort && !this._color.canBeSerializedAsShortHEX())
- return false;
-
- return true;
- }
-
- const hexFormats = [
- {
- format: WebInspector.Color.Format.ShortHEX,
- title: WebInspector.UIString("Format: Short Hex")
- },
- {
- format: WebInspector.Color.Format.ShortHEXAlpha,
- title: WebInspector.UIString("Format: Short Hex with Alpha")
- },
- {
- format: WebInspector.Color.Format.HEX,
- title: WebInspector.UIString("Format: Hex")
- },
- {
- format: WebInspector.Color.Format.HEXAlpha,
- title: WebInspector.UIString("Format: Hex with Alpha")
- }
- ];
-
- // FIXME: <https://webkit.org/b/152497> Arrow functions: "this" isn't lexically bound
- let currentColorIsHEX = hexFormats.some(function(info) {
- return info.format === this._color.format;
- }.bind(this));
-
- for (let i = 0; i < hexFormats.length; ++i) {
- if (currentColorIsHEX && this._color.format !== hexFormats[i].format)
- continue;
-
- for (let j = ~~currentColorIsHEX; j < hexFormats.length; ++j) {
- let nextIndex = (i + j) % hexFormats.length;
- if (hexMatchesCurrentColor.call(this, hexFormats[nextIndex]))
- return hexFormats[nextIndex];
- }
- return null;
- }
- return hexFormats[0];
- }
-
- _updateSwatch(dontFireEvents)
- {
- this._swatchInnerElement.style.backgroundColor = this._color.toString() || null;
- if (!dontFireEvents)
- this.dispatchEventToListeners(WebInspector.ColorSwatch.Event.ColorChanged, {color: this._color});
- }
-};
-
-WebInspector.ColorSwatch.Event = {
- ColorChanged: "color-swatch-color-changed"
-};
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchcssfromrev194976trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css (from rev 194976, trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css) (0 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -0,0 +1,89 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. 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.
+ */
+
+.inline-swatch {
+ display: inline-block;
+ position: relative;
+ width: 1em;
+ height: 1em;
+ margin-right: 3px;
+ vertical-align: -2px;
+ /* Make a checkered background for transparent colors to show against. */
+ background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
+ linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
+ background-color: white;
+ background-size: 50%;
+ background-position: top left, bottom right;
+ background-repeat: no-repeat;
+ cursor: default;
+ overflow: hidden;
+}
+
+.inline-swatch.bezier {
+ margin-right: 2px;
+ content: url(../Images/CubicBezier.svg);
+ background: none;
+}
+
+.inline-swatch.bezier:hover {
+ filter: brightness(0.9);
+}
+
+.inline-swatch.bezier:active {
+ filter: brightness(0.8);
+}
+
+@media (-webkit-max-device-pixel-ratio: 1) {
+ /* Ensure the color swatch is even by even so that it looks okay checkered. */
+ .inline-swatch {
+ vertical-align: -1px;
+ width: 10px;
+ height: 10px;
+ }
+}
+
+.inline-swatch > span {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border: 1px solid hsla(0, 0%, 25%, 0.4);
+ pointer-events: none;
+}
+
+.inline-swatch:hover > span {
+ border-color: hsla(0, 0%, 25%, 0.8);
+}
+
+.inline-swatch:active > span {
+ border-color: hsl(0, 0%, 25%);
+}
+
+.inline-swatch.bezier > span {
+ display: none;
+}
+
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchjsfromrev194976trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (from rev 194976, trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js) (0 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -0,0 +1,268 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. 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.InlineSwatch = class InlineSwatch extends WebInspector.Object
+{
+ constructor(type, value, readOnly)
+ {
+ super();
+
+ this._type = type;
+
+ this._swatchElement = document.createElement("span");
+ this._swatchElement.classList.add("inline-swatch", this._type.split("-").lastValue);
+
+ switch (this._type) {
+ case WebInspector.InlineSwatch.Type.Bezier:
+ this._swatchElement.title = WebInspector.UIString("Click to open a cubic-bezier editor.");
+ break;
+ case WebInspector.InlineSwatch.Type.Gradient:
+ this._swatchElement.title = WebInspector.UIString("Click to select a gradient.");
+ break;
+ default:
+ console.assert(this._type === WebInspector.InlineSwatch.Type.Color);
+ this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
+ break;
+ }
+
+ if (!readOnly) {
+ this._swatchElement.addEventListener("click", this._swatchElementClicked.bind(this));
+ if (this._type === WebInspector.InlineSwatch.Type.Color)
+ this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+ }
+
+ this._swatchInnerElement = this._swatchElement.createChild("span");
+
+ this._value = value || this._fallbackValue();
+
+ this._updateSwatch();
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._swatchElement;
+ }
+
+ get value()
+ {
+ return this._value;
+ }
+
+ set value(value)
+ {
+ this._value = value;
+ this._updateSwatch(true);
+ }
+
+ // Private
+
+ _fallbackValue()
+ {
+ switch (this._type) {
+ case WebInspector.InlineSwatch.Type.Bezier:
+ return WebInspector.CubicBezier.fromString("linear");
+ case WebInspector.InlineSwatch.Type.Gradient:
+ return WebInspector.Gradient.fromString("linear-gradient(transparent, transparent)");
+ case WebInspector.InlineSwatch.Type.Color:
+ return WebInspector.Color.fromString("transparent");
+ default:
+ return null;
+ }
+ }
+
+ _updateSwatch(dontFireEvents)
+ {
+ if (this._type === WebInspector.InlineSwatch.Type.Color || this._type === WebInspector.InlineSwatch.Type.Gradient)
+ this._swatchInnerElement.style.background = this._value ? this._value.toString() : null;
+
+ if (!dontFireEvents)
+ this.dispatchEventToListeners(WebInspector.InlineSwatch.Event.ValueChanged, {value: this._value});
+ }
+
+ _swatchElementClicked(event)
+ {
+ if (this._type === WebInspector.InlineSwatch.Type.Color && event.shiftKey && this._value) {
+ let nextFormat = this._value.nextFormat();
+ console.assert(nextFormat);
+ if (!nextFormat)
+ return;
+
+ this._value.format = nextFormat;
+ this._updateSwatch();
+ return;
+ }
+
+ let bounds = WebInspector.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
+ let popover = new WebInspector.Popover(this);
+
+ let valueEditor = null;
+ if (this._type === WebInspector.InlineSwatch.Type.Bezier) {
+ valueEditor = new WebInspector.BezierEditor;
+ valueEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._valueEditorValueDidChange, this);
+ } else if (this._type === WebInspector.InlineSwatch.Type.Gradient) {
+ valueEditor = new WebInspector.GradientEditor;
+ valueEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._valueEditorValueDidChange, this);
+ valueEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, (event) => popover.update());
+ } else {
+ valueEditor = new WebInspector.ColorPicker;
+ valueEditor.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._valueEditorValueDidChange, this);
+ }
+
+ popover.content = valueEditor.element;
+ popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+
+ let value = this._value || this._fallbackValue();
+ if (this._type === WebInspector.InlineSwatch.Type.Bezier)
+ valueEditor.bezier = value;
+ else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
+ valueEditor.gradient = value;
+ else
+ valueEditor.color = value;
+ }
+
+ _valueEditorValueDidChange(event)
+ {
+ if (this._type === WebInspector.InlineSwatch.Type.Bezier)
+ this._value = event.data.bezier;
+ else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
+ this._value = event.data.gradient;
+ else
+ this._value = event.data.color;
+
+ this._updateSwatch();
+ }
+
+ _handleContextMenuEvent(event)
+ {
+ let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+ if (this._value.isKeyword() && this._value.format !== WebInspector.Color.Format.Keyword) {
+ contextMenu.appendItem(WebInspector.UIString("Format: Keyword"), () => {
+ this._value.format = WebInspector.Color.Format.Keyword;
+ this._updateSwatch();
+ });
+ }
+
+ let hexInfo = this._getNextValidHEXFormat();
+ if (hexInfo) {
+ contextMenu.appendItem(hexInfo.title, () => {
+ this._value.format = hexInfo.format;
+ this._updateSwatch();
+ });
+ }
+
+ if (this._value.simple && this._value.format !== WebInspector.Color.Format.HSL) {
+ contextMenu.appendItem(WebInspector.UIString("Format: HSL"), () => {
+ this._value.format = WebInspector.Color.Format.HSL;
+ this._updateSwatch();
+ });
+ } else if (this._value.format !== WebInspector.Color.Format.HSLA) {
+ contextMenu.appendItem(WebInspector.UIString("Format: HSLA"), () => {
+ this._value.format = WebInspector.Color.Format.HSLA;
+ this._updateSwatch();
+ });
+ }
+
+ if (this._value.simple && this._value.format !== WebInspector.Color.Format.RGB) {
+ contextMenu.appendItem(WebInspector.UIString("Format: RGB"), () => {
+ this._value.format = WebInspector.Color.Format.RGB;
+ this._updateSwatch();
+ });
+ } else if (this._value.format !== WebInspector.Color.Format.RGBA) {
+ contextMenu.appendItem(WebInspector.UIString("Format: RGBA"), () => {
+ this._value.format = WebInspector.Color.Format.RGBA;
+ this._updateSwatch();
+ });
+ }
+ }
+
+ _getNextValidHEXFormat()
+ {
+ if (this._type !== WebInspector.InlineSwatch.Type.Color)
+ return false;
+
+ function hexMatchesCurrentColor(hexInfo) {
+ let nextIsSimple = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.HEX;
+ if (nextIsSimple && !this._value.simple)
+ return false;
+
+ let nextIsShort = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.ShortHEXAlpha;
+ if (nextIsShort && !this._value.canBeSerializedAsShortHEX())
+ return false;
+
+ return true;
+ }
+
+ const hexFormats = [
+ {
+ format: WebInspector.Color.Format.ShortHEX,
+ title: WebInspector.UIString("Format: Short Hex")
+ },
+ {
+ format: WebInspector.Color.Format.ShortHEXAlpha,
+ title: WebInspector.UIString("Format: Short Hex with Alpha")
+ },
+ {
+ format: WebInspector.Color.Format.HEX,
+ title: WebInspector.UIString("Format: Hex")
+ },
+ {
+ format: WebInspector.Color.Format.HEXAlpha,
+ title: WebInspector.UIString("Format: Hex with Alpha")
+ }
+ ];
+
+ // FIXME: <https://webkit.org/b/152497> Arrow functions: "this" isn't lexically bound
+ let currentColorIsHEX = hexFormats.some(function(info) {
+ return info.format === this._value.format;
+ }.bind(this));
+
+ for (let i = 0; i < hexFormats.length; ++i) {
+ if (currentColorIsHEX && this._value.format !== hexFormats[i].format)
+ continue;
+
+ for (let j = ~~currentColorIsHEX; j < hexFormats.length; ++j) {
+ let nextIndex = (i + j) % hexFormats.length;
+ if (hexMatchesCurrentColor.call(this, hexFormats[nextIndex]))
+ return hexFormats[nextIndex];
+ }
+ return null;
+ }
+ return hexFormats[0];
+ }
+};
+
+WebInspector.InlineSwatch.Type = {
+ Color: "inline-swatch-type-color",
+ Gradient: "inline-swatch-type-gradient",
+ Bezier: "inline-swatch-type-bezier"
+};
+
+WebInspector.InlineSwatch.Event = {
+ ValueChanged: "inline-swatch-value-changed"
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -27,46 +27,31 @@
</span><span class="cx"> display: flex;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch {
- display: none;
- position: relative;
</del><ins>+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient {
</ins><span class="cx"> width: 38px;
</span><span class="cx"> height: 18px;
</span><del>- margin-top: 1px;
- /* Make a checkered background for transparent colors to show against. */
- background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
- linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
- background-color: white;
- background-size: 50%;
- background-position: top left, bottom right;
- background-repeat: no-repeat;
</del><ins>+ margin: 1px 0 0;
</ins><span class="cx"> border: 1px solid hsla(0, 0%, 25%, 0.4);
</span><span class="cx"> border-radius: 4px;
</span><del>- overflow: hidden;
- cursor: default;
</del><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:hover {
</del><ins>+.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .inline-swatch.gradient {
+ display: none;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:hover {
</ins><span class="cx"> border-color: hsla(0, 0%, 25%, 0.8);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch:active {
</del><ins>+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:active {
</ins><span class="cx"> border-color: hsl(0, 0%, 25%);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.background-picker > .visual-style-property-value-container > .color-gradient-swatch > span {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
</del><ins>+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient > span {
+ border: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch {
- display: block;
-}
-
-.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .color-gradient-swatch + .value-input {
</del><ins>+.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .inline-swatch.gradient + .value-input {
</ins><span class="cx"> margin-left: -3px;
</span><span class="cx"> padding-left: 5px;
</span><span class="cx"> border-top-left-radius: 0;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleBackgroundPickerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -29,16 +29,10 @@
</span><span class="cx"> {
</span><span class="cx"> super(propertyNames, text, possibleValues, null, "background-picker", layoutReversed);
</span><span class="cx">
</span><del>- this._gradientSwatchElement = document.createElement("span");
- this._gradientSwatchElement.classList.add("color-gradient-swatch");
- this._gradientSwatchElement.title = WebInspector.UIString("Click to select a gradient");
- this._gradientSwatchElement.addEventListener("click", this._gradientSwatchClicked.bind(this));
</del><ins>+ this._gradientSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Gradient);
+ this._gradientSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._gradientSwatchColorChanged, this);
+ this.contentElement.appendChild(this._gradientSwatch.element);
</ins><span class="cx">
</span><del>- let gradientSwatchInnerElement = document.createElement("span");
- this._gradientSwatchElement.appendChild(gradientSwatchInnerElement);
-
- this.contentElement.appendChild(this._gradientSwatchElement);
-
</del><span class="cx"> this._valueInputElement = document.createElement("input");
</span><span class="cx"> this._valueInputElement.classList.add("value-input");
</span><span class="cx"> this._valueInputElement.type = "url";
</span><span class="lines">@@ -86,9 +80,6 @@
</span><span class="cx"> this.contentElement.appendChild(this._valueTypePickerElement);
</span><span class="cx">
</span><span class="cx"> this._currentType = "url";
</span><del>- this._gradient = null;
-
- this._updateGradientSwatch();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -114,11 +105,7 @@
</span><span class="cx"> if (!this._currentType.includes("gradient"))
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._gradient = WebInspector.Gradient.fromString(value);
- if (!this._gradient)
- return;
-
- this._updateGradientSwatch();
</del><ins>+ this._updateGradient();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get synthesizedValue()
</span><span class="lines">@@ -159,49 +146,24 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _updateGradientSwatch()
</del><ins>+ _updateGradient()
</ins><span class="cx"> {
</span><del>- this._gradientSwatchElement.firstChild.style.background = "";
</del><span class="cx"> const value = this.synthesizedValue;
</span><span class="cx"> if (!value || value === this._currentType)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._gradient = WebInspector.Gradient.fromString(value);
- this._gradientSwatchElement.firstChild.style.background = this._gradient ? value : null;
</del><ins>+ this._gradientSwatch.value = WebInspector.Gradient.fromString(value);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- _gradientSwatchClicked(event)
</del><ins>+ _gradientSwatchColorChanged(event)
</ins><span class="cx"> {
</span><del>- let bounds = WebInspector.Rect.rectFromClientRect(this._gradientSwatchElement.getBoundingClientRect());
- let popover = new WebInspector.Popover(this);
-
- function handleColorPickerToggled(event)
- {
- popover.update();
- }
-
- let gradientEditor = new WebInspector.GradientEditor;
- gradientEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._gradientEditorGradientChanged, this);
- gradientEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, handleColorPickerToggled, this);
-
- popover.content = gradientEditor.element;
- popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
-
- if (!this._gradient)
- this._gradient = WebInspector.Gradient.fromString(`${this._currentType}(transparent, transparent)`);
-
- gradientEditor.gradient = this._gradient;
- }
-
- _gradientEditorGradientChanged(event)
- {
- this.value = event.data.gradient.toString();
</del><ins>+ this.value = event.data.value.toString();
</ins><span class="cx"> this._valueDidChange();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _valueInputValueChanged(event)
</span><span class="cx"> {
</span><del>- this._updateGradientSwatch();
</del><ins>+ this._updateGradient();
</ins><span class="cx"> this._valueDidChange();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -217,7 +179,7 @@
</span><span class="cx"> {
</span><span class="cx"> this._currentType = this._valueTypePickerElement.value;
</span><span class="cx"> this._updateValueInput();
</span><del>- this._updateGradientSwatch();
</del><ins>+ this._updateGradient();
</ins><span class="cx"> this._valueDidChange();
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -31,7 +31,7 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch {
</del><ins>+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color {
</ins><span class="cx"> width: 22px;
</span><span class="cx"> height: 18px;
</span><span class="cx"> margin-top: 1px;
</span><span class="lines">@@ -40,15 +40,15 @@
</span><span class="cx"> border-radius: 4px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover {
</del><ins>+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:hover {
</ins><span class="cx"> border-color: hsla(0, 0%, 25%, 0.8);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active {
</del><ins>+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:active {
</ins><span class="cx"> border-color: hsl(0, 0%, 25%);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span {
</del><ins>+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color > span {
</ins><span class="cx"> border: none;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -29,8 +29,8 @@
</span><span class="cx"> {
</span><span class="cx"> super(propertyNames, text, null, null, "input-color-picker", layoutReversed);
</span><span class="cx">
</span><del>- this._colorSwatch = new WebInspector.ColorSwatch;
- this._colorSwatch.addEventListener(WebInspector.ColorSwatch.Event.ColorChanged, this._colorSwatchColorChanged, this);
</del><ins>+ this._colorSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Color);
+ this._colorSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._colorSwatchColorChanged, this);
</ins><span class="cx"> this.contentElement.appendChild(this._colorSwatch.element);
</span><span class="cx">
</span><span class="cx"> this._textInputElement = document.createElement("input");
</span><span class="lines">@@ -99,7 +99,7 @@
</span><span class="cx">
</span><span class="cx"> _colorSwatchColorChanged(event)
</span><span class="cx"> {
</span><del>- let colorString = event && event.data && event.data.color && event.data.color.toString();
</del><ins>+ let colorString = event && event.data && event.data.value && event.data.value.toString();
</ins><span class="cx"> if (!colorString)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -110,7 +110,7 @@
</span><span class="cx"> _updateColorSwatch()
</span><span class="cx"> {
</span><span class="cx"> let value = this._textInputElement.value;
</span><del>- this._colorSwatch.color = WebInspector.Color.fromString(value || "transparent");
</del><ins>+ this._colorSwatch.value = WebInspector.Color.fromString(value);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _completionClicked(event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleTimingEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -31,24 +31,17 @@
</span><span class="cx"> order: 1;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor {
</del><ins>+.visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier {
</ins><span class="cx"> width: 23px;
</span><span class="cx"> height: 20px;
</span><del>- margin-right: 2px;
- content: url(../Images/CubicBezier.svg);
- cursor: default;
</del><span class="cx"> }
</span><span class="cx">
</span><ins>+.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier {
+ display: none;
+}
+
</ins><span class="cx"> @media (-webkit-min-device-pixel-ratio: 2) {
</span><del>- .visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor {
</del><ins>+ .visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier {
</ins><span class="cx"> margin-left: 0.5px;
</span><span class="cx"> }
</span><span class="cx"> }
</span><del>-
-.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover {
- filter: brightness(0.9);
-}
-
-.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:active {
- filter: brightness(0.8);
-}
</del></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleTimingEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js (194976 => 194977)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js 2016-01-13 20:52:46 UTC (rev 194976)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js 2016-01-13 21:14:44 UTC (rev 194977)
</span><span class="lines">@@ -36,16 +36,9 @@
</span><span class="cx"> this._customValueOptionElement.text = WebInspector.UIString("Custom");
</span><span class="cx"> this._keywordSelectElement.appendChild(this._customValueOptionElement);
</span><span class="cx">
</span><del>- this._bezierMarkerElement = document.createElement("span");
- this._bezierMarkerElement.title = WebInspector.UIString("Click to open a cubic-bezier editor");
- this._bezierMarkerElement.classList.add("bezier-editor");
- this._bezierMarkerElement.hidden = true;
- this._bezierMarkerElement.addEventListener("click", this._bezierMarkerClicked.bind(this));
- this.contentElement.appendChild(this._bezierMarkerElement);
-
- this._bezierEditor = new WebInspector.BezierEditor;
- this._bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._valueDidChange.bind(this));
- this._bezierEditor.bezier = WebInspector.CubicBezier.fromString("linear");
</del><ins>+ this._bezierSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Bezier);
+ this._bezierSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._bezierSwatchValueChanged, this);
+ this.contentElement.appendChild(this._bezierSwatch.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</span><span class="lines">@@ -57,7 +50,7 @@
</span><span class="cx">
</span><span class="cx"> get bezierValue()
</span><span class="cx"> {
</span><del>- let bezier = this._bezierEditor.bezier;
</del><ins>+ let bezier = this._bezierSwatch.value;
</ins><span class="cx"> if (!bezier)
</span><span class="cx"> return null;
</span><span class="cx">
</span><span class="lines">@@ -67,7 +60,7 @@
</span><span class="cx"> set bezierValue(text)
</span><span class="cx"> {
</span><span class="cx"> let bezier = WebInspector.CubicBezier.fromString(text);
</span><del>- this._bezierEditor.bezier = bezier;
</del><ins>+ this._bezierSwatch.value = bezier;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="lines">@@ -82,13 +75,13 @@
</span><span class="cx"> this.bezierValue = value;
</span><span class="cx"> if (this.valueIsSupportedKeyword(value)) {
</span><span class="cx"> super._setValue(value);
</span><del>- this._bezierMarkerElement.hidden = true;
</del><ins>+ this.contentElement.classList.remove("bezier-value");
</ins><span class="cx"> return;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> let bezier = this.bezierValue;
</span><span class="cx"> this._customValueOptionElement.selected = !!bezier;
</span><del>- this._bezierMarkerElement.hidden = !bezier;
</del><ins>+ this.contentElement.classList.toggle("bezier-value", !!bezier);
</ins><span class="cx"> this.specialPropertyPlaceholderElement.hidden = !!bezier;
</span><span class="cx"> if (!bezier)
</span><span class="cx"> super._setValue(value);
</span><span class="lines">@@ -99,21 +92,18 @@
</span><span class="cx"> return this._customValueOptionElement.selected ? this.bezierValue : super._generateSynthesizedValue();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _bezierMarkerClicked()
- {
- let bounds = WebInspector.Rect.rectFromClientRect(this._bezierMarkerElement.getBoundingClientRect());
- this._cubicBezierEditorPopover = new WebInspector.Popover(this);
- this._cubicBezierEditorPopover.content = this._bezierEditor.element;
- this._cubicBezierEditorPopover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
- }
-
</del><span class="cx"> _handleKeywordChanged()
</span><span class="cx"> {
</span><span class="cx"> super._handleKeywordChanged();
</span><span class="cx"> let customOptionSelected = this._customValueOptionElement.selected;
</span><del>- this._bezierMarkerElement.hidden = !customOptionSelected;
</del><ins>+ this.contentElement.classList.toggle("bezier-value", !!customOptionSelected);
</ins><span class="cx"> this.specialPropertyPlaceholderElement.hidden = !!customOptionSelected;
</span><span class="cx"> if (customOptionSelected)
</span><span class="cx"> this.bezierValue = "linear";
</span><span class="cx"> }
</span><ins>+
+ _bezierSwatchValueChanged(event)
+ {
+ this._valueDidChange();
+ }
</ins><span class="cx"> };
</span></span></pre>
</div>
</div>
</body>
</html>