<!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>[188229] 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/188229">188229</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2015-08-10 13:56:18 -0700 (Mon, 10 Aug 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add different types of non-numerical Visual editors for CSS properties
https://bugs.webkit.org/show_bug.cgi?id=147711
Added editors for keyword based CSS properties for use in the Visual style
details panel in the CSS sidebar. Also added images for keyword values that
are simple enough to be conveyed in an image.
Reviewed by Brian Burg.
* UserInterface/Images/ClearBoth.svg: Added.
* UserInterface/Images/ClearLeft.svg: Added.
* UserInterface/Images/ClearRight.svg: Added.
* UserInterface/Images/FloatLeft.svg: Added.
* UserInterface/Images/FloatRight.svg: Added.
* UserInterface/Images/FontStyleItalic.svg: Added.
* UserInterface/Images/FontStyleNormal.svg: Added.
* UserInterface/Images/FontVariantSmallCaps.svg: Added.
* UserInterface/Images/TextAlignCenter.svg: Added.
* UserInterface/Images/TextAlignJustify.svg: Added.
* UserInterface/Images/TextAlignLeft.svg: Added.
* UserInterface/Images/TextAlignRight.svg: Added.
* UserInterface/Images/TextDecorationLineThrough.svg: Added.
* UserInterface/Images/TextDecorationOverline.svg: Added.
* UserInterface/Images/TextDecorationUnderline.svg: Added.
* UserInterface/Images/TextTransformCapitalize.svg: Added.
* UserInterface/Images/TextTransformLowercase.svg: Added.
* UserInterface/Images/TextTransformUppercase.svg: Added.
* UserInterface/Images/VisualStyleNone.svg: Added.
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
Changed color swatch title.
* UserInterface/Views/Slider.js:
(WebInspector.Slider):
(WebInspector.Slider.prototype.set value):
(WebInspector.Slider.prototype.set knobX):
(WebInspector.Slider.prototype.get maxX):
If the given value is below 0, reset it to 0.
(WebInspector.Slider.prototype._handleMousedown):
(WebInspector.Slider.prototype._handleMousemove):
(WebInspector.Slider.prototype.get _maxX): Deleted.
* UserInterface/Views/VisualStyleColorPicker.css: Added.
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .visual-style-special-property-placeholder):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input):
(.visual-style-property-container.input-color-picker.multiple > .visual-style-property-value-container > .visual-style-multiple-property-placeholder):
* UserInterface/Views/VisualStyleColorPicker.js: Added.
(WebInspector.VisualStyleColorPicker):
(WebInspector.VisualStyleColorPicker.prototype.get value):
(WebInspector.VisualStyleColorPicker.prototype.set value):
(WebInspector.VisualStyleColorPicker.prototype.get placeholder):
(WebInspector.VisualStyleColorPicker.prototype.set placeholder):
(WebInspector.VisualStyleColorPicker.prototype.get synthesizedValue):
(WebInspector.VisualStyleColorPicker.prototype.get hasCompletions):
(WebInspector.VisualStyleColorPicker.prototype.set completions):
(WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):
(WebInspector.VisualStyleColorPicker.prototype._colorSwatchClicked):
(WebInspector.VisualStyleColorPicker.prototype._colorPickerColorDidChange):
(WebInspector.VisualStyleColorPicker.prototype._completionClicked):
(WebInspector.VisualStyleColorPicker.prototype._textInputKeyDown):
(WebInspector.VisualStyleColorPicker.prototype._textInputKeyUp):
(WebInspector.VisualStyleColorPicker.prototype._showCompletionsIfAble):
(WebInspector.VisualStyleColorPicker.prototype._hideCompletions):
(WebInspector.VisualStyleColorPicker.prototype._toggleTabbingOfSelectableElements):
* UserInterface/Views/VisualStyleKeywordCheckbox.css: Added.
(.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container):
(.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > input):
(.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > div):
* UserInterface/Views/VisualStyleKeywordCheckbox.js: Added.
(WebInspector.VisualStyleKeywordCheckbox):
(WebInspector.VisualStyleKeywordCheckbox.prototype.get value):
(WebInspector.VisualStyleKeywordCheckbox.prototype.set value):
(WebInspector.VisualStyleKeywordCheckbox.prototype.get synthesizedValue):
(WebInspector.VisualStyleKeywordCheckbox.prototype._toggleTabbingOfSelectableElements):
* UserInterface/Views/VisualStyleKeywordIconList.css: Added.
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:first-child):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:last-child):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected)):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected svg .stroked):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected svg .filled):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) + .keyword-icon):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon > div):
(.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:not(.selected) > div):
* UserInterface/Views/VisualStyleKeywordIconList.js: Added.
(WebInspector.VisualStyleKeywordIconList.dashToCapital):
(WebInspector.VisualStyleKeywordIconList.createListItem):
(WebInspector.VisualStyleKeywordIconList):
(WebInspector.VisualStyleKeywordIconList.prototype.get value):
(WebInspector.VisualStyleKeywordIconList.prototype.set value):
(WebInspector.VisualStyleKeywordIconList.prototype.get synthesizedValue):
(WebInspector.VisualStyleKeywordIconList.prototype._handleKeywordChanged):
* UserInterface/Views/VisualStyleKeywordPicker.js: Added.
(WebInspector.VisualStyleKeywordPicker):
(WebInspector.VisualStyleKeywordPicker.prototype.get value):
(WebInspector.VisualStyleKeywordPicker.prototype.set value):
(WebInspector.VisualStyleKeywordPicker.prototype.set placeholder):
(WebInspector.VisualStyleKeywordPicker.prototype.get synthesizedValue):
(WebInspector.VisualStyleKeywordPicker.prototype.updateEditorValues):
(WebInspector.VisualStyleKeywordPicker.prototype._handleKeywordChanged):
(WebInspector.VisualStyleKeywordPicker.prototype._keywordSelectMouseDown):
(WebInspector.VisualStyleKeywordPicker.prototype._addValues):
(WebInspector.VisualStyleKeywordPicker.prototype._addAdvancedValues):
(WebInspector.VisualStyleKeywordPicker.prototype._removeAdvancedValues):
(WebInspector.VisualStyleKeywordPicker.prototype._toggleTabbingOfSelectableElements):
* UserInterface/Views/VisualStylePropertyNameInput.js: Added.
(WebInspector.VisualStylePropertyNameInput):
(WebInspector.VisualStylePropertyNameInput.prototype.get value):
(WebInspector.VisualStylePropertyNameInput.prototype.set value):
(WebInspector.VisualStylePropertyNameInput.prototype.get synthesizedValue):
(WebInspector.VisualStylePropertyNameInput.prototype.get hasCompletions):
(WebInspector.VisualStylePropertyNameInput.prototype.set completions):
(WebInspector.VisualStylePropertyNameInput.prototype._completionClicked):
(WebInspector.VisualStylePropertyNameInput.prototype._inputKeyDown):
(WebInspector.VisualStylePropertyNameInput.prototype._inputKeyUp):
(WebInspector.VisualStylePropertyNameInput.prototype._hideCompletions):
(WebInspector.VisualStylePropertyNameInput.prototype._toggleTabbingOfSelectableElements):
* UserInterface/Views/VisualStyleURLInput.js: Added.
(WebInspector.VisualStyleURLInput):
(WebInspector.VisualStyleURLInput.prototype.set get value):
(WebInspector.VisualStyleURLInput.prototype.parseValue):
* UserInterface/Views/VisualStyleUnitSlider.css: Added.
(.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider):
(.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider > img):
(.visual-style-property-container.unit-slider.opacity > .visual-style-property-value-container > .slider):
* UserInterface/Views/VisualStyleUnitSlider.js: Added.
(WebInspector.VisualStyleUnitSlider):
(WebInspector.VisualStyleUnitSlider.prototype.set value):
(WebInspector.VisualStyleUnitSlider.prototype.get value):
(WebInspector.VisualStyleUnitSlider.prototype.get synthesizedValue):
(WebInspector.VisualStyleUnitSlider.prototype.sliderValueDidChange):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSliderjs">trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesClearBothsvg">trunk/Source/WebInspectorUI/UserInterface/Images/ClearBoth.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesClearLeftsvg">trunk/Source/WebInspectorUI/UserInterface/Images/ClearLeft.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesClearRightsvg">trunk/Source/WebInspectorUI/UserInterface/Images/ClearRight.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesFloatLeftsvg">trunk/Source/WebInspectorUI/UserInterface/Images/FloatLeft.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesFloatRightsvg">trunk/Source/WebInspectorUI/UserInterface/Images/FloatRight.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesFontStyleItalicsvg">trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleItalic.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesFontStyleNormalsvg">trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleNormal.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesFontVariantSmallCapssvg">trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextAlignCentersvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignCenter.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextAlignJustifysvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignJustify.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextAlignLeftsvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignLeft.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextAlignRightsvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignRight.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextDecorationLineThroughsvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationLineThrough.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextDecorationOverlinesvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationOverline.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextDecorationUnderlinesvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationUnderline.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextTransformCapitalizesvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformCapitalize.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextTransformLowercasesvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformLowercase.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesTextTransformUppercasesvg">trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformUppercase.svg</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceImagesVisualStyleNonesvg">trunk/Source/WebInspectorUI/UserInterface/Images/VisualStyleNone.svg</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="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordCheckboxcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordCheckboxjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListcss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordPickerjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyNameInputjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleURLInputjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleUnitSlidercss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleUnitSliderjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (188228 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-10 20:51:54 UTC (rev 188228)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -1,5 +1,158 @@
</span><span class="cx"> 2015-08-10 Devin Rousso <drousso@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: Add different types of non-numerical Visual editors for CSS properties
+ https://bugs.webkit.org/show_bug.cgi?id=147711
+
+ Added editors for keyword based CSS properties for use in the Visual style
+ details panel in the CSS sidebar. Also added images for keyword values that
+ are simple enough to be conveyed in an image.
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Images/ClearBoth.svg: Added.
+ * UserInterface/Images/ClearLeft.svg: Added.
+ * UserInterface/Images/ClearRight.svg: Added.
+ * UserInterface/Images/FloatLeft.svg: Added.
+ * UserInterface/Images/FloatRight.svg: Added.
+ * UserInterface/Images/FontStyleItalic.svg: Added.
+ * UserInterface/Images/FontStyleNormal.svg: Added.
+ * UserInterface/Images/FontVariantSmallCaps.svg: Added.
+ * UserInterface/Images/TextAlignCenter.svg: Added.
+ * UserInterface/Images/TextAlignJustify.svg: Added.
+ * UserInterface/Images/TextAlignLeft.svg: Added.
+ * UserInterface/Images/TextAlignRight.svg: Added.
+ * UserInterface/Images/TextDecorationLineThrough.svg: Added.
+ * UserInterface/Images/TextDecorationOverline.svg: Added.
+ * UserInterface/Images/TextDecorationUnderline.svg: Added.
+ * UserInterface/Images/TextTransformCapitalize.svg: Added.
+ * UserInterface/Images/TextTransformLowercase.svg: Added.
+ * UserInterface/Images/TextTransformUppercase.svg: Added.
+ * UserInterface/Images/VisualStyleNone.svg: Added.
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
+ Changed color swatch title.
+
+ * UserInterface/Views/Slider.js:
+ (WebInspector.Slider):
+ (WebInspector.Slider.prototype.set value):
+ (WebInspector.Slider.prototype.set knobX):
+ (WebInspector.Slider.prototype.get maxX):
+ If the given value is below 0, reset it to 0.
+ (WebInspector.Slider.prototype._handleMousedown):
+ (WebInspector.Slider.prototype._handleMousemove):
+ (WebInspector.Slider.prototype.get _maxX): Deleted.
+
+ * UserInterface/Views/VisualStyleColorPicker.css: Added.
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .visual-style-special-property-placeholder):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input):
+ (.visual-style-property-container.input-color-picker.multiple > .visual-style-property-value-container > .visual-style-multiple-property-placeholder):
+
+ * UserInterface/Views/VisualStyleColorPicker.js: Added.
+ (WebInspector.VisualStyleColorPicker):
+ (WebInspector.VisualStyleColorPicker.prototype.get value):
+ (WebInspector.VisualStyleColorPicker.prototype.set value):
+ (WebInspector.VisualStyleColorPicker.prototype.get placeholder):
+ (WebInspector.VisualStyleColorPicker.prototype.set placeholder):
+ (WebInspector.VisualStyleColorPicker.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleColorPicker.prototype.get hasCompletions):
+ (WebInspector.VisualStyleColorPicker.prototype.set completions):
+ (WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):
+ (WebInspector.VisualStyleColorPicker.prototype._colorSwatchClicked):
+ (WebInspector.VisualStyleColorPicker.prototype._colorPickerColorDidChange):
+ (WebInspector.VisualStyleColorPicker.prototype._completionClicked):
+ (WebInspector.VisualStyleColorPicker.prototype._textInputKeyDown):
+ (WebInspector.VisualStyleColorPicker.prototype._textInputKeyUp):
+ (WebInspector.VisualStyleColorPicker.prototype._showCompletionsIfAble):
+ (WebInspector.VisualStyleColorPicker.prototype._hideCompletions):
+ (WebInspector.VisualStyleColorPicker.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStyleKeywordCheckbox.css: Added.
+ (.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container):
+ (.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > input):
+ (.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > div):
+
+ * UserInterface/Views/VisualStyleKeywordCheckbox.js: Added.
+ (WebInspector.VisualStyleKeywordCheckbox):
+ (WebInspector.VisualStyleKeywordCheckbox.prototype.get value):
+ (WebInspector.VisualStyleKeywordCheckbox.prototype.set value):
+ (WebInspector.VisualStyleKeywordCheckbox.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleKeywordCheckbox.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStyleKeywordIconList.css: Added.
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:first-child):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:last-child):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected)):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected svg .stroked):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected svg .filled):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) + .keyword-icon):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon > div):
+ (.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:not(.selected) > div):
+
+ * UserInterface/Views/VisualStyleKeywordIconList.js: Added.
+ (WebInspector.VisualStyleKeywordIconList.dashToCapital):
+ (WebInspector.VisualStyleKeywordIconList.createListItem):
+ (WebInspector.VisualStyleKeywordIconList):
+ (WebInspector.VisualStyleKeywordIconList.prototype.get value):
+ (WebInspector.VisualStyleKeywordIconList.prototype.set value):
+ (WebInspector.VisualStyleKeywordIconList.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleKeywordIconList.prototype._handleKeywordChanged):
+
+ * UserInterface/Views/VisualStyleKeywordPicker.js: Added.
+ (WebInspector.VisualStyleKeywordPicker):
+ (WebInspector.VisualStyleKeywordPicker.prototype.get value):
+ (WebInspector.VisualStyleKeywordPicker.prototype.set value):
+ (WebInspector.VisualStyleKeywordPicker.prototype.set placeholder):
+ (WebInspector.VisualStyleKeywordPicker.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleKeywordPicker.prototype.updateEditorValues):
+ (WebInspector.VisualStyleKeywordPicker.prototype._handleKeywordChanged):
+ (WebInspector.VisualStyleKeywordPicker.prototype._keywordSelectMouseDown):
+ (WebInspector.VisualStyleKeywordPicker.prototype._addValues):
+ (WebInspector.VisualStyleKeywordPicker.prototype._addAdvancedValues):
+ (WebInspector.VisualStyleKeywordPicker.prototype._removeAdvancedValues):
+ (WebInspector.VisualStyleKeywordPicker.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStylePropertyNameInput.js: Added.
+ (WebInspector.VisualStylePropertyNameInput):
+ (WebInspector.VisualStylePropertyNameInput.prototype.get value):
+ (WebInspector.VisualStylePropertyNameInput.prototype.set value):
+ (WebInspector.VisualStylePropertyNameInput.prototype.get synthesizedValue):
+ (WebInspector.VisualStylePropertyNameInput.prototype.get hasCompletions):
+ (WebInspector.VisualStylePropertyNameInput.prototype.set completions):
+ (WebInspector.VisualStylePropertyNameInput.prototype._completionClicked):
+ (WebInspector.VisualStylePropertyNameInput.prototype._inputKeyDown):
+ (WebInspector.VisualStylePropertyNameInput.prototype._inputKeyUp):
+ (WebInspector.VisualStylePropertyNameInput.prototype._hideCompletions):
+ (WebInspector.VisualStylePropertyNameInput.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStyleURLInput.js: Added.
+ (WebInspector.VisualStyleURLInput):
+ (WebInspector.VisualStyleURLInput.prototype.set get value):
+ (WebInspector.VisualStyleURLInput.prototype.parseValue):
+
+ * UserInterface/Views/VisualStyleUnitSlider.css: Added.
+ (.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider):
+ (.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider > img):
+ (.visual-style-property-container.unit-slider.opacity > .visual-style-property-value-container > .slider):
+
+ * UserInterface/Views/VisualStyleUnitSlider.js: Added.
+ (WebInspector.VisualStyleUnitSlider):
+ (WebInspector.VisualStyleUnitSlider.prototype.set value):
+ (WebInspector.VisualStyleUnitSlider.prototype.get value):
+ (WebInspector.VisualStyleUnitSlider.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleUnitSlider.prototype.sliderValueDidChange):
+
+2015-08-10 Devin Rousso <drousso@apple.com>
+
</ins><span class="cx"> Web Inspector: Add VisualStyleSelectorSection
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=147572
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesClearBothsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/ClearBoth.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/ClearBoth.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ClearBoth.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,13 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect class="stroked" x="0.5" y="1.5" width="3.5" height="12" fill="transparent" stroke="black" />
+ <polygon class="filled" points="0.5 3.5 0.5 5.5 4 3.5 4 1.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="0.5 7.5 0.5 9.5 4 7.5 4 5.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="0.5 11.5 0.5 13.5 4 11.5 4 9.5" stroke="none" style="opacity: 0.7" />
+ <rect class="stroked" x="12" y="1.5" width="3.5" height="12" fill="transparent" stroke="black" />
+ <polygon class="filled" points="12 3.5 12 5.5 15.5 3.5 15.5 1.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="12 7.5 12 9.5 15.5 7.5 15.5 5.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="12 11.5 12 13.5 15.5 11.5 15.5 9.5" stroke="none" style="opacity: 0.7" />
+ <rect class="stroked" x="5.5" y="5" width="5" height="5" fill="none" stroke="black" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesClearLeftsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/ClearLeft.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/ClearLeft.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ClearLeft.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect class="stroked" x="2" y="1.5" width="5" height="12" fill="none" stroke="black" />
+ <polygon class="filled" points="2 3.5 2 5.5 7 3.5 7 1.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="2 7.5 2 9.5 7 7.5 7 5.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="2 11.5 2 13.5 7 11.5 7 9.5" stroke="none" style="opacity: 0.7" />
+ <rect class="stroked" x="9" y="5" width="5" height="5" fill="none" stroke="black" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesClearRightsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/ClearRight.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/ClearRight.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/ClearRight.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect class="stroked" x="9" y="1.5" width="5" height="12" fill="none" stroke="black" />
+ <polygon class="filled" points="9 3.5 9 5.5 14 3.5 14 1.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="9 7.5 9 9.5 14 7.5 14 5.5" stroke="none" style="opacity: 0.7" />
+ <polygon class="filled" points="9 11.5 9 13.5 14 11.5 14 9.5" stroke="none" style="opacity: 0.7" />
+ <rect class="stroked" x="2" y="5" width="5" height="5" fill="none" stroke="black" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesFloatLeftsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/FloatLeft.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/FloatLeft.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/FloatLeft.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke="black">
+ <rect class="stroked" x="0.5" y="2.5" width="5" height="5" fill="none" />
+ <line class="stroked" x1="7.5" y1="2.5" x2="16" y2="2.5" />
+ <line class="stroked" x1="7.5" y1="5" x2="16" y2="5" />
+ <line class="stroked" x1="7.5" y1="7.5" x2="16" y2="7.5" />
+ <line class="stroked" x1="0" y1="10" x2="16" y2="10" />
+ <line class="stroked" x1="0" y1="12.5" x2="16" y2="12.5" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesFloatRightsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/FloatRight.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/FloatRight.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/FloatRight.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke="black">
+ <rect class="stroked" x="10.5" y="2.5" width="5" height="5" fill="none" />
+ <line class="stroked" x1="0" y1="2.5" x2="8.5" y2="2.5" />
+ <line class="stroked" x1="0" y1="5" x2="8.5" y2="5" />
+ <line class="stroked" x1="0" y1="7.5" x2="8.5" y2="7.5" />
+ <line class="stroked" x1="0" y1="10" x2="16" y2="10" />
+ <line class="stroked" x1="0" y1="12.5" x2="16" y2="12.5" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesFontStyleItalicsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleItalic.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleItalic.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleItalic.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif" font-style="italic">
+ <text class="filled" x="-1" y="11">Abc</text>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesFontStyleNormalsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleNormal.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleNormal.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleNormal.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif">
+ <text class="filled" x="-1" y="11">Abc</text>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesFontVariantSmallCapssvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="7" font-family="-apple-system, sans-serif">
+ <rect class="filled" x="-2" width="20" height="20" fill="white" stroke="none" />
+ <text class="filled" x="0.25" y="11" font-size="10">A</text>
+ <text class="filled" x="6.75" y="11">B</text>
+ <text class="filled" x="11" y="11">C</text>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextAlignCentersvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignCenter.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignCenter.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignCenter.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke="black">
+ <line class="stroked" x1="0.5" y1="3" x2="14.5" y2="3" />
+ <line class="stroked" x1="3" y1="5.5" x2="12" y2="5.5" />
+ <line class="stroked" x1="0.5" y1="8" x2="14.5" y2="8" />
+ <line class="stroked" x1="3" y1="10.5" x2="12" y2="10.5" />
+ <line class="stroked" x1="0.5" y1="13" x2="14.5" y2="13" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextAlignJustifysvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignJustify.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignJustify.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignJustify.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke="black">
+ <line class="stroked" x1="0.5" y1="3" x2="14.5" y2="3" />
+ <line class="stroked" x1="0.5" y1="5.5" x2="14.5" y2="5.5" />
+ <line class="stroked" x1="0.5" y1="8" x2="14.5" y2="8" />
+ <line class="stroked" x1="0.5" y1="10.5" x2="14.5" y2="10.5" />
+ <line class="stroked" x1="0.5" y1="13" x2="14.5" y2="13" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextAlignLeftsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignLeft.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignLeft.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignLeft.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke="black">
+ <line class="stroked" x1="0.5" y1="3" x2="14.5" y2="3" />
+ <line class="stroked" x1="0.5" y1="5.5" x2="9.5" y2="5.5" />
+ <line class="stroked" x1="0.5" y1="8" x2="14.5" y2="8" />
+ <line class="stroked" x1="0.5" y1="10.5" x2="9.5" y2="10.5" />
+ <line class="stroked" x1="0.5" y1="13" x2="14.5" y2="13" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextAlignRightsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignRight.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignRight.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignRight.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke="black">
+ <line class="stroked" x1="0.5" y1="3" x2="14.5" y2="3" />
+ <line class="stroked" x1="5.5" y1="5.5" x2="14.5" y2="5.5" />
+ <line class="stroked" x1="0.5" y1="8" x2="14.5" y2="8" />
+ <line class="stroked" x1="5.5" y1="10.5" x2="14.5" y2="10.5" />
+ <line class="stroked" x1="0.5" y1="13" x2="14.5" y2="13" />
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextDecorationLineThroughsvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationLineThrough.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationLineThrough.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationLineThrough.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif">
+ <text class="filled" x="0" y="11.5">Abc</text>
+ <line class="stroked" x1="0" y1="8.5" x2="15.5" y2="8.5" stroke="black"/>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextDecorationOverlinesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationOverline.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationOverline.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationOverline.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif">
+ <text class="filled" x="0" y="11.5">Abc</text>
+ <line class="stroked" x1="0" y1="3.5" x2="15.5" y2="3.5" stroke="black"/>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextDecorationUnderlinesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationUnderline.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationUnderline.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationUnderline.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,6 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif">
+ <text class="filled" x="0" y="11.5">Abc</text>
+ <line class="stroked" x1="0" y1="12.5" x2="15.5" y2="12.5" stroke="black"/>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextTransformCapitalizesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformCapitalize.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformCapitalize.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformCapitalize.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif">
+ <text class="filled" x="0" y="11.5">Abc</text>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextTransformLowercasesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformLowercase.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformLowercase.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformLowercase.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif">
+ <text class="filled" x="0.5" y="11.5">abc</text>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesTextTransformUppercasesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformUppercase.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformUppercase.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformUppercase.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" font-size="9" font-family="-apple-system, sans-serif">
+ <text class="filled" x="-1" y="11.5">ABC</text>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceImagesVisualStyleNonesvg"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Images/VisualStyleNone.svg (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Images/VisualStyleNone.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/VisualStyleNone.svg 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,5 @@
</span><ins>+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <line class="stroked" x1="0" y1="8" x2="14" y2="8" stroke="black"/>
+</svg>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (188228 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-08-10 20:51:54 UTC (rev 188228)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -880,7 +880,7 @@
</span><span class="cx"> // Look for color strings and add swatches in front of them.
</span><span class="cx"> createCodeMirrorColorTextMarkers(this._codeMirror, range, function(marker, color, colorString) {
</span><span class="cx"> var swatchElement = document.createElement("span");
</span><del>- swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format.");
</del><ins>+ swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
</ins><span class="cx"> swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
</span><span class="cx"> swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSliderjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js (188228 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js 2015-08-10 20:51:54 UTC (rev 188228)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -36,7 +36,7 @@
</span><span class="cx">
</span><span class="cx"> this._value = 0;
</span><span class="cx"> this._knobX = 0;
</span><del>- this.__maxX = 0;
</del><ins>+ this._maxX = 0;
</ins><span class="cx">
</span><span class="cx"> this._element.addEventListener("mousedown", this);
</span><span class="cx"> }
</span><span class="lines">@@ -60,15 +60,27 @@
</span><span class="cx"> if (value === this._value)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- this._value = value;
</del><ins>+ this.knobX = value;
</ins><span class="cx">
</span><del>- this._knobX = Math.round(value * this._maxX);
- this._knob.style.webkitTransform = "translate3d(" + this._knobX + "px, 0, 0)";
-
</del><span class="cx"> if (this.delegate && typeof this.delegate.sliderValueDidChange === "function")
</span><span class="cx"> this.delegate.sliderValueDidChange(this, value);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ set knobX(value)
+ {
+ this._value = value;
+ this._knobX = Math.round(value * this.maxX);
+ this._knob.style.webkitTransform = "translate3d(" + this._knobX + "px, 0, 0)";
+ }
+
+ get maxX()
+ {
+ if (this._maxX <= 0 && document.body.contains(this._element))
+ this._maxX = Math.max(this._element.offsetWidth - Math.ceil(WebInspector.Slider.KnobWidth / 2), 0);
+
+ return this._maxX;
+ }
+
</ins><span class="cx"> // Protected
</span><span class="cx">
</span><span class="cx"> handleEvent(event)
</span><span class="lines">@@ -91,7 +103,7 @@
</span><span class="cx"> _handleMousedown(event)
</span><span class="cx"> {
</span><span class="cx"> if (event.target !== this._knob)
</span><del>- this.value = (this._localPointForEvent(event).x - 3) / this._maxX;
</del><ins>+ this.value = (this._localPointForEvent(event).x - 3) / this.maxX;
</ins><span class="cx">
</span><span class="cx"> this._startKnobX = this._knobX;
</span><span class="cx"> this._startMouseX = this._localPointForEvent(event).x;
</span><span class="lines">@@ -105,9 +117,9 @@
</span><span class="cx"> _handleMousemove(event)
</span><span class="cx"> {
</span><span class="cx"> var dx = this._localPointForEvent(event).x - this._startMouseX;
</span><del>- var x = Math.max(Math.min(this._startKnobX + dx, this._maxX), 0);
</del><ins>+ var x = Math.max(Math.min(this._startKnobX + dx, this.maxX), 0);
</ins><span class="cx">
</span><del>- this.value = x / this._maxX;
</del><ins>+ this.value = x / this.maxX;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _handleMouseup(event)
</span><span class="lines">@@ -124,14 +136,6 @@
</span><span class="cx"> // may be transformed using CSS Transforms and interaction works as expected.
</span><span class="cx"> return window.webkitConvertPointFromPageToNode(this._element, new WebKitPoint(event.pageX, event.pageY));
</span><span class="cx"> }
</span><del>-
- get _maxX()
- {
- if (this.__maxX === 0 && document.body.contains(this._element))
- this.__maxX = this._element.offsetWidth - Math.ceil(WebInspector.Slider.KnobWidth / 2);
-
- return this.__maxX;
- }
</del><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.Slider.KnobWidth = 13;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,85 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container {
+ display: flex;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .visual-style-special-property-placeholder {
+ display: none;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch {
+ display: block;
+ position: relative;
+ width: 22px;
+ height: 18px;
+ 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: hsl(0, 100%, 100%);
+ background-size: 50%;
+ background-position: top left, bottom right;
+ background-repeat: no-repeat;
+ border: 1px solid hsla(0, 0%, 25%, 0.4);
+ border-radius: 4px;
+ overflow: hidden;
+ cursor: default;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover {
+ border-color: hsla(0, 0%, 25%, 0.8);
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:active {
+ border-color: hsl(0, 0%, 25%);
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input {
+ margin: 1px 1.5px 3px -3px;
+ padding: 0 3px 0 5px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border: solid 1px hsl(0, 0%, 83%);
+ border-left: none;
+ text-align: right;
+ font-size: 10px;
+}
+
+.visual-style-property-container.input-color-picker.multiple > .visual-style-property-value-container > .visual-style-multiple-property-placeholder {
+ width: calc(100% - 20px);
+ left: 18px;
+ padding-right: 3px;
+ text-align: right;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,222 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleColorPicker = class VisualStyleColorPicker extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, layoutReversed)
+ {
+ super(propertyNames, text, null, null, "input-color-picker", layoutReversed);
+
+ 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.");
+ this._swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
+
+ this._swatchInnerElement = document.createElement("span");
+ this._swatchElement.appendChild(this._swatchInnerElement);
+
+ this.contentElement.appendChild(this._swatchElement);
+
+ this._textInputElement = document.createElement("input");
+ this._textInputElement.spellcheck = false;
+ this._textInputElement.addEventListener("keydown", this._textInputKeyDown.bind(this));
+ this._textInputElement.addEventListener("keyup", this._textInputKeyUp.bind(this));
+ this._textInputElement.addEventListener("blur", this._hideCompletions.bind(this));
+ this.contentElement.appendChild(this._textInputElement);
+
+ this._completionController = new WebInspector.VisualStyleCompletionsController(this);
+ this._completionController.addEventListener(WebInspector.VisualStyleCompletionsController.Event.CompletionSelected, this._completionClicked, this);
+
+ this._formatChanged = false;
+ this._updateColorSwatch();
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._textInputElement.value;
+ }
+
+ set value(value)
+ {
+ if (value && value === this.value)
+ return;
+
+ this._textInputElement.value = this._hasMultipleConflictingValues() ? null : value;
+ this._updateColorSwatch();
+ }
+
+ get placeholder()
+ {
+ return this._textInputElement.getAttribute("placeholder");
+ }
+
+ set placeholder(text)
+ {
+ if (text && text === this.placeholder)
+ return;
+
+ if (this._hasMultipleConflictingValues())
+ text = this.specialPropertyPlaceholderElement.textContent;
+
+ this._textInputElement.setAttribute("placeholder", text || "transparent");
+ }
+
+ get synthesizedValue()
+ {
+ return this.value || null;
+ }
+
+ get hasCompletions()
+ {
+ return this._completionController.hasCompletions;
+ }
+
+ set completions(completions)
+ {
+ this._completionController.completions = completions;
+ }
+
+ // Private
+
+ _updateColorSwatch()
+ {
+ let value = this._textInputElement.value;
+ this._color = WebInspector.Color.fromString(value || "transparent");
+ this._swatchInnerElement.style.backgroundColor = this._color ? value : null;
+ }
+
+ _colorSwatchClicked(event)
+ {
+ let color = this._color;
+ if (event.shiftKey) {
+ let nextFormat = color.nextFormat();
+
+ console.assert(nextFormat);
+ if (!nextFormat)
+ return;
+
+ color.format = nextFormat;
+ this.value = color.toString();
+
+ this._formatChanged = true;
+ this._valueDidChange();
+ 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 = color;
+ }
+
+ _colorPickerColorDidChange(event)
+ {
+ let format = !this._formatChanged ? WebInspector.Color.Format.HEX : null;
+ this.value = event.data.color.toString(format);
+ this._valueDidChange();
+ }
+
+ _completionClicked(event)
+ {
+ this.value = event.data.text;
+ this._valueDidChange();
+ }
+
+ _textInputKeyDown(event)
+ {
+ if (!this._completionController.visible)
+ return;
+
+ let keyCode = event.keyCode;
+ let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
+ let tabKeyCode = WebInspector.KeyboardShortcut.Key.Tab.keyCode;
+ if (keyCode === enterKeyCode || keyCode === tabKeyCode) {
+ this.value = this._completionController.currentCompletion;
+ this._hideCompletions();
+ this._valueDidChange();
+ return;
+ }
+
+ let escapeKeyCode = WebInspector.KeyboardShortcut.Key.Escape.keyCode;
+ if (keyCode === escapeKeyCode) {
+ this._hideCompletions();
+ return;
+ }
+
+ let key = event.keyIdentifier;
+ if (key === "Up") {
+ this._completionController.previous();
+ return;
+ }
+
+ if (key === "Down") {
+ this._completionController.next();
+ return;
+ }
+ }
+
+ _textInputKeyUp()
+ {
+ this._showCompletionsIfAble();
+ this._updateColorSwatch();
+ this._valueDidChange();
+ }
+
+ _showCompletionsIfAble()
+ {
+ if (!this.hasCompletions)
+ return;
+
+ let result = this._valueDidChange();
+ if (!result)
+ return;
+
+ if (this._completionController.update(this.value)) {
+ let bounds = WebInspector.Rect.rectFromClientRect(this._textInputElement.getBoundingClientRect());
+ if (!bounds)
+ return;
+
+ this._completionController.show(bounds, 2);
+ }
+ }
+
+ _hideCompletions()
+ {
+ this._completionController.hide();
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ this._textInputElement.tabIndex = disabled ? "-1" : null;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordCheckboxcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container {
+ display: flex;
+ align-items: center;
+}
+
+.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > input {
+ order: 1;
+ position: absolute;
+ top: 4px;
+ width: auto;
+}
+
+.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > div {
+ width: 18px;
+ margin: 0 2px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordCheckboxjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,69 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleKeywordCheckbox = class VisualStyleKeywordCheckbox extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, value, checkboxImage, layoutReversed)
+ {
+ super(propertyNames, text, null, null, "keyword-checkbox", layoutReversed);
+
+ this._value = value || null;
+
+ this._checkboxElement = document.createElement("input");
+ this._checkboxElement.type = "checkbox";
+ this._checkboxElement.addEventListener("change", this._valueDidChange.bind(this));
+ this.contentElement.appendChild(this._checkboxElement);
+
+ if (checkboxImage) {
+ wrappedSVGDocument(checkboxImage, null, value, function(wrapper) {
+ this.contentElement.appendChild(wrapper);
+ }.bind(this));
+ }
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._checkboxElement.checked ? this._value : null;
+ }
+
+ set value(value)
+ {
+ this._checkboxElement.checked = value === this._value;
+ }
+
+ get synthesizedValue()
+ {
+ return this.value;
+ }
+
+ // Private
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ this._checkboxElement.tabIndex = disabled ? "-1" : null;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,88 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container {
+ margin: 1px 0 2px;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container {
+ display: flex;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon {
+ position: relative;
+ width: 26px;
+ height: 18px;
+ background-color: hsl(0, 100%, 100%);
+ border: 1px solid hsl(0, 0%, 83%);
+ border-right: none;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:first-child {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:last-child {
+ border-right: 1px solid hsl(0, 0%, 83%);
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) {
+ width: 27px;
+ border-right: 1px solid;
+ border-color: hsl(213, 92%, 55%);
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected {
+ background-color: hsl(213, 92%, 55%);
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected svg .stroked {
+ stroke: hsl(0, 100%, 100%);
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected svg .filled {
+ fill: hsl(0, 100%, 100%);
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) + .keyword-icon {
+ width: 25px;
+ border-left: none;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon > div {
+ position: absolute;
+ top: 0;
+ left: 5px;
+ width: 16px;
+ height: 16px;
+ pointer-events: none;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:not(.selected) > div {
+ -webkit-filter: opacity(0.7);
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordIconListjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,117 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleKeywordIconList = class VisualStyleKeywordIconList extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, possibleValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, null, "keyword-icon-list", layoutReversed);
+
+ this._iconListContainer = document.createElement("div");
+ this._iconListContainer.classList.add("keyword-icon-list-container");
+
+ this._iconElements = [];
+ this._computedIcon = null;
+ this._selectedIcon = null;
+
+ function dashToCapital(match) {
+ return match[1].toUpperCase();
+ }
+
+ let prettyPropertyReferenceName = this._propertyReferenceName.capitalize().replace(/(-.)/g, dashToCapital);
+
+ function createListItem(value, title) {
+ let iconButtonElement = document.createElement("button");
+ iconButtonElement.id = value;
+ iconButtonElement.title = title;
+ iconButtonElement.classList.add("keyword-icon");
+ iconButtonElement.addEventListener("click", this._handleKeywordChanged.bind(this));
+
+ let imageName = value === "none" ? "VisualStyleNone" : prettyPropertyReferenceName + title.replace(/\s/g, "");
+ wrappedSVGDocument("Images/" + imageName + ".svg", null, null, function(wrapper) {
+ iconButtonElement.appendChild(wrapper);
+ }.bind(this));
+
+ return iconButtonElement;
+ }
+
+ for (let key in this._possibleValues.basic) {
+ let iconElement = createListItem.call(this, key, this._possibleValues.basic[key]);
+ this._iconListContainer.appendChild(iconElement);
+ this._iconElements.push(iconElement);
+ }
+
+ this.contentElement.appendChild(this._iconListContainer);
+ }
+
+ // Public
+
+ get value()
+ {
+ if (!this._selectedIcon)
+ return null;
+
+ return this._selectedIcon.id;
+ }
+
+ set value(value)
+ {
+ this._computedIcon = null;
+ this._selectedIcon = null;
+ for (let icon of this._iconElements) {
+ if (icon.id === this._updatedValues.placeholder)
+ this._computedIcon = icon;
+
+ if (icon.id === value && !this._updatedValues.propertyMissing)
+ this._selectedIcon = icon;
+ else
+ icon.classList.remove("selected", "computed");
+ }
+
+ if (!this._computedIcon)
+ this._computedIcon = this._iconElements[0];
+
+ let iconIsSelected = this._selectedIcon && this._selectedIcon.classList.toggle("selected");
+ if (!iconIsSelected) {
+ this._selectedIcon = null;
+ this._updatedValues.propertyMissing = true;
+ this._computedIcon.classList.add("computed");
+ }
+ }
+
+ get synthesizedValue()
+ {
+ return this.value;
+ }
+
+ // Private
+
+ _handleKeywordChanged(event)
+ {
+ this._updatedValues.propertyMissing = false;
+ this.value = event.target.id;
+ this._valueDidChange();
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleKeywordPickerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,156 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleKeywordPicker = class VisualStyleKeywordPicker extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, possibleValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, null, "keyword-picker", layoutReversed);
+
+ this._keywordSelectElement = document.createElement("select");
+ this._keywordSelectElement.classList.add("keyword-picker-select");
+ if (this._possibleValues.advanced)
+ this._keywordSelectElement.title = WebInspector.UIString("Option-click to show all values");
+
+ this._unchangedOptionElement = document.createElement("option");
+ this._unchangedOptionElement.value = "";
+ this._unchangedOptionElement.text = WebInspector.UIString("Unchanged");
+ this._keywordSelectElement.appendChild(this._unchangedOptionElement);
+
+ this._keywordSelectElement.appendChild(document.createElement("hr"));
+
+ this._createValueOptions(this._possibleValues.basic);
+ this._advancedValuesElements = null;
+
+ this._keywordSelectElement.addEventListener("mousedown", this._keywordSelectMouseDown.bind(this));
+ this._keywordSelectElement.addEventListener("change", this._handleKeywordChanged.bind(this));
+ this.contentElement.appendChild(this._keywordSelectElement);
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._keywordSelectElement.value;
+ }
+
+ set value(value)
+ {
+ if (this._updatedValues.propertyMissing || !this.valueIsSupportedKeyword(value))
+ return;
+
+ if (value === this.value)
+ return;
+
+ if (this._valueIsSupportedAdvancedKeyword(value))
+ this._addAdvancedValues();
+
+ this._keywordSelectElement.value = value;
+ }
+
+ set placeholder(placeholder)
+ {
+ if (this._updatedValues.conflictingValues)
+ return;
+
+ this.specialPropertyPlaceholderElement.textContent = this._keyForKeyword(placeholder) || placeholder;
+ }
+
+ get synthesizedValue()
+ {
+ let value = this._keywordSelectElement.value;
+ if (!value || !value.length)
+ return null;
+
+ return value;
+ }
+
+ updateEditorValues(updatedValues)
+ { if (!updatedValues.conflictingValues) {
+ let missing = updatedValues.propertyMissing || !updatedValues.value;
+ this._unchangedOptionElement.selected = missing;
+ this.specialPropertyPlaceholderElement.hidden = !missing;
+ }
+
+ super.updateEditorValues(updatedValues);
+ }
+
+ // Private
+
+ _handleKeywordChanged()
+ {
+ this._valueDidChange();
+
+ if (this._keywordSelectElement.contains(this._unchangedOptionElement) && this._unchangedOptionElement.selected)
+ this.specialPropertyPlaceholderElement.hidden = false;
+ }
+
+ _keywordSelectMouseDown(event)
+ {
+ if (event.altKey)
+ this._addAdvancedValues();
+ else if (!this._valueIsSupportedAdvancedKeyword())
+ this._removeAdvancedValues();
+ }
+
+ _createValueOptions(values)
+ {
+ let addedElements = [];
+ for (let key in values) {
+ let option = document.createElement("option");
+ option.value = key;
+ option.text = values[key];
+ this._keywordSelectElement.appendChild(option);
+ addedElements.push(option);
+ }
+ return addedElements;
+ }
+
+ _addAdvancedValues()
+ {
+ if (this._advancedValuesElements)
+ return;
+
+ this._keywordSelectElement.appendChild(document.createElement("hr"));
+ this._advancedValuesElements = this._createValueOptions(this._possibleValues.advanced);
+ }
+
+ _removeAdvancedValues()
+ {
+ if (!this._advancedValuesElements)
+ return;
+
+ this._keywordSelectElement.removeChild(this._advancedValuesElements[0].previousSibling);
+ for (let element of this._advancedValuesElements)
+ this._keywordSelectElement.removeChild(element);
+
+ this._advancedValuesElements = null;
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ this._keywordSelectElement.tabIndex = disabled ? "-1" : null;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStylePropertyNameInputjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,141 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStylePropertyNameInput = class VisualStylePropertyNameInput extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, layoutReversed)
+ {
+ super(propertyNames, text, null, null, "property-name-input", layoutReversed);
+
+ this._propertyNameInputElement = document.createElement("input");
+ this._propertyNameInputElement.placeholder = WebInspector.UIString("Enter a name.");
+ this._propertyNameInputElement.addEventListener("keydown", this._inputKeyDown.bind(this));
+ this._propertyNameInputElement.addEventListener("keyup", this._inputKeyUp.bind(this));
+ this._propertyNameInputElement.addEventListener("blur", this._hideCompletions.bind(this));
+ this.contentElement.appendChild(this._propertyNameInputElement);
+
+ this._completionController = new WebInspector.VisualStyleCompletionsController(this);
+ this._completionController.addEventListener(WebInspector.VisualStyleCompletionsController.Event.CompletionSelected, this._completionClicked, this);
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._propertyNameInputElement.value;
+ }
+
+ set value(value)
+ {
+ if (value && value === this.value)
+ return;
+
+ this._propertyNameInputElement.value = value;
+ }
+
+ get synthesizedValue()
+ {
+ return this.value || null;
+ }
+
+ get hasCompletions()
+ {
+ return this._completionController.hasCompletions;
+ }
+
+ set completions(completions)
+ {
+ this._completionController.completions = completions;
+ }
+
+ // Private
+
+ _completionClicked(event)
+ {
+ this.value = event.data.text;
+ this._valueDidChange();
+ }
+
+ _inputKeyDown(event)
+ {
+ if (!this._completionController.visible)
+ return;
+
+ let keyCode = event.keyCode;
+ let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
+ let tabKeyCode = WebInspector.KeyboardShortcut.Key.Tab.keyCode;
+ if (keyCode === enterKeyCode || keyCode === tabKeyCode) {
+ this.value = this._completionController.currentCompletion;
+ this._hideCompletions();
+ this._valueDidChange();
+ return;
+ }
+
+ let escapeKeyCode = WebInspector.KeyboardShortcut.Key.Escape.keyCode;
+ if (keyCode === escapeKeyCode) {
+ this._hideCompletions();
+ return;
+ }
+
+ let key = event.keyIdentifier;
+ if (key === "Up") {
+ this._completionController.previous();
+ return;
+ }
+
+ if (key === "Down") {
+ this._completionController.next();
+ return;
+ }
+ }
+
+ _inputKeyUp()
+ {
+ if (!this.hasCompletions)
+ return;
+
+ let result = this._valueDidChange();
+ if (!result)
+ return;
+
+ if (this._completionController.update(this.value)) {
+ let bounds = WebInspector.Rect.rectFromClientRect(this._propertyNameInputElement.getBoundingClientRect());
+ if (!bounds)
+ return;
+
+ this._completionController.show(bounds, 2);
+ }
+ }
+
+ _hideCompletions()
+ {
+ this._completionController.hide();
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ this._propertyNameInputElement.tabIndex = disabled ? "-1" : null;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleURLInputjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,69 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleURLInput = class VisualStyleURLInput extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, layoutReversed)
+ {
+ super(propertyNames, text, null, null, "url-input", layoutReversed);
+
+ this._urlInputElement = document.createElement("input");
+ this._urlInputElement.type = "url";
+ this._urlInputElement.placeholder = WebInspector.UIString("Enter a URL");
+ this._urlInputElement.addEventListener("keyup", this._valueDidChange.bind(this));
+ this.contentElement.appendChild(this._urlInputElement);
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._urlInputElement.value;
+ }
+
+ set value(value)
+ {
+ if (value && value === this.value)
+ return;
+
+ this._urlInputElement.value = value;
+ }
+
+ get synthesizedValue()
+ {
+ var value = this.value;
+ if (!value || !value.length)
+ return null;
+
+ return "url(" + this.value + ")";
+ }
+
+ // Protected
+
+ parseValue(text)
+ {
+ return /^(?:url\(\s*)([^\)]*)(?:\s*\)\s*;?)$/.exec(text);
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleUnitSlidercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider {
+ position: relative;
+ margin: 5px 1px 0;
+}
+
+.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider > img {
+ top: -1px;
+}
+
+.visual-style-property-container.unit-slider.opacity > .visual-style-property-value-container > .slider {
+ background-image: linear-gradient(90deg, hsla(0, 0%, 0%, 0), #000), url(../Images/Checkers.svg);
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleUnitSliderjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js (0 => 188229)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js 2015-08-10 20:56:18 UTC (rev 188229)
</span><span class="lines">@@ -0,0 +1,62 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleUnitSlider = class VisualStyleUnitSlider extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, label, layoutReversed)
+ {
+ super(propertyNames, label, null, null, "unit-slider", layoutReversed);
+
+ this._slider = new WebInspector.Slider;
+ this._slider.delegate = this;
+ this.contentElement.appendChild(this._slider.element);
+ }
+
+ // Public
+
+ set value(value)
+ {
+ let knobX = parseFloat(value);
+ if (isNaN(knobX))
+ knobX = parseFloat(this._updatedValues.placeholder) || 0;
+
+ this._slider.knobX = knobX;
+ }
+
+ get value()
+ {
+ return Math.round(this._slider.value * 100) / 100;
+ }
+
+ get synthesizedValue()
+ {
+ return this.value;
+ }
+
+ sliderValueDidChange(slider, value)
+ {
+ this._valueDidChange();
+ }
+};
</ins></span></pre>
</div>
</div>
</body>
</html>