Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188228 => 188229)
--- 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)
@@ -1,5 +1,158 @@
2015-08-10 Devin Rousso <drou...@apple.com>
+ 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 <drou...@apple.com>
+
Web Inspector: Add VisualStyleSelectorSection
https://bugs.webkit.org/show_bug.cgi?id=147572
Added: trunk/Source/WebInspectorUI/UserInterface/Images/ClearBoth.svg (0 => 188229)
--- 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)
@@ -0,0 +1,13 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/ClearLeft.svg (0 => 188229)
--- 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)
@@ -0,0 +1,9 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/ClearRight.svg (0 => 188229)
--- 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)
@@ -0,0 +1,9 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/FloatLeft.svg (0 => 188229)
--- 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)
@@ -0,0 +1,10 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/FloatRight.svg (0 => 188229)
--- 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)
@@ -0,0 +1,10 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleItalic.svg (0 => 188229)
--- 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)
@@ -0,0 +1,5 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/FontStyleNormal.svg (0 => 188229)
--- 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)
@@ -0,0 +1,5 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/FontVariantSmallCaps.svg (0 => 188229)
--- 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)
@@ -0,0 +1,8 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignCenter.svg (0 => 188229)
--- 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)
@@ -0,0 +1,9 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignJustify.svg (0 => 188229)
--- 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)
@@ -0,0 +1,9 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignLeft.svg (0 => 188229)
--- 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)
@@ -0,0 +1,9 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextAlignRight.svg (0 => 188229)
--- 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)
@@ -0,0 +1,9 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationLineThrough.svg (0 => 188229)
--- 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)
@@ -0,0 +1,6 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationOverline.svg (0 => 188229)
--- 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)
@@ -0,0 +1,6 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextDecorationUnderline.svg (0 => 188229)
--- 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)
@@ -0,0 +1,6 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformCapitalize.svg (0 => 188229)
--- 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)
@@ -0,0 +1,5 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformLowercase.svg (0 => 188229)
--- 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)
@@ -0,0 +1,5 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/TextTransformUppercase.svg (0 => 188229)
--- 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)
@@ -0,0 +1,5 @@
+<?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>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/VisualStyleNone.svg (0 => 188229)
--- 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)
@@ -0,0 +1,5 @@
+<?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>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (188228 => 188229)
--- 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)
@@ -880,7 +880,7 @@
// Look for color strings and add swatches in front of them.
createCodeMirrorColorTextMarkers(this._codeMirror, range, function(marker, color, colorString) {
var swatchElement = document.createElement("span");
- swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format.");
+ swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js (188228 => 188229)
--- 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)
@@ -36,7 +36,7 @@
this._value = 0;
this._knobX = 0;
- this.__maxX = 0;
+ this._maxX = 0;
this._element.addEventListener("mousedown", this);
}
@@ -60,15 +60,27 @@
if (value === this._value)
return;
- this._value = value;
+ this.knobX = value;
- this._knobX = Math.round(value * this._maxX);
- this._knob.style.webkitTransform = "translate3d(" + this._knobX + "px, 0, 0)";
-
if (this.delegate && typeof this.delegate.sliderValueDidChange === "function")
this.delegate.sliderValueDidChange(this, value);
}
+ 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;
+ }
+
// Protected
handleEvent(event)
@@ -91,7 +103,7 @@
_handleMousedown(event)
{
if (event.target !== this._knob)
- this.value = (this._localPointForEvent(event).x - 3) / this._maxX;
+ this.value = (this._localPointForEvent(event).x - 3) / this.maxX;
this._startKnobX = this._knobX;
this._startMouseX = this._localPointForEvent(event).x;
@@ -105,9 +117,9 @@
_handleMousemove(event)
{
var dx = this._localPointForEvent(event).x - this._startMouseX;
- var x = Math.max(Math.min(this._startKnobX + dx, this._maxX), 0);
+ var x = Math.max(Math.min(this._startKnobX + dx, this.maxX), 0);
- this.value = x / this._maxX;
+ this.value = x / this.maxX;
}
_handleMouseup(event)
@@ -124,14 +136,6 @@
// may be transformed using CSS Transforms and interaction works as expected.
return window.webkitConvertPointFromPageToNode(this._element, new WebKitPoint(event.pageX, event.pageY));
}
-
- get _maxX()
- {
- if (this.__maxX === 0 && document.body.contains(this._element))
- this.__maxX = this._element.offsetWidth - Math.ceil(WebInspector.Slider.KnobWidth / 2);
-
- return this.__maxX;
- }
};
WebInspector.Slider.KnobWidth = 13;
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css (0 => 188229)
--- 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)
@@ -0,0 +1,85 @@
+/*
+ * 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;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js (0 => 188229)
--- 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)
@@ -0,0 +1,222 @@
+/*
+ * 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;
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css (0 => 188229)
--- 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)
@@ -0,0 +1,41 @@
+/*
+ * 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;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js (0 => 188229)
--- 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)
@@ -0,0 +1,69 @@
+/*
+ * 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;
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css (0 => 188229)
--- 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)
@@ -0,0 +1,88 @@
+/*
+ * 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);
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js (0 => 188229)
--- 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)
@@ -0,0 +1,117 @@
+/*
+ * 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();
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js (0 => 188229)
--- 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)
@@ -0,0 +1,156 @@
+/*
+ * 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;
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js (0 => 188229)
--- 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)
@@ -0,0 +1,141 @@
+/*
+ * 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;
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js (0 => 188229)
--- 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)
@@ -0,0 +1,69 @@
+/*
+ * 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);
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css (0 => 188229)
--- 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)
@@ -0,0 +1,37 @@
+/*
+ * 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);
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js (0 => 188229)
--- 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)
@@ -0,0 +1,62 @@
+/*
+ * 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();
+ }
+};
