Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188237 => 188238)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-10 23:44:10 UTC (rev 188237)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-10 23:56:51 UTC (rev 188238)
@@ -1,5 +1,99 @@
2015-08-10 Devin Rousso <drou...@apple.com>
+ Web Inspector: Add numerical input and slider based Visual editors for CSS properties
+ https://bugs.webkit.org/show_bug.cgi?id=147712
+
+ Reviewed by Brian Burg.
+
+ Added editors for CSS properties with numerical values for use in the Visual style
+ details panel in the CSS sidebar, in the form of a combined select and input or an
+ input range. Also added optional visual linkages to sync values between multiple
+ editors of this type.
+
+ * UserInterface/Images/VisualStylePropertyLinked.svg: Added.
+ * UserInterface/Images/VisualStylePropertyUnlinked.svg: Added.
+
+ * UserInterface/Views/VisualStyleNumberInputBox.css: Added.
+ (.visual-style-property-container > .visual-style-property-value-container.focused > .focus-ring):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-keyword-select):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container):
+ (.visual-style-property-container > .visual-style-property-value-container:not(.number-input-editable) > .number-input-container):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container > span):
+
+ * UserInterface/Views/VisualStyleNumberInputBox.js: Added.
+ (WebInspector.VisualStyleNumberInputBox):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get value):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set value):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get units):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set units):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get placeholder):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set placeholder):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get numberInputEditable):
+ (WebInspector.VisualStyleNumberInputBox.prototype.updateValueFromText):
+ (WebInspector.VisualStyleNumberInputBox.prototype.parseValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype._keywordChanged):
+ (WebInspector.VisualStyleNumberInputBox.prototype._valueNumberInputKeyDown.shiftValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype._valueNumberInputKeyDown):
+ (WebInspector.VisualStyleNumberInputBox.prototype._numberInputChanged):
+ (WebInspector.VisualStyleNumberInputBox.prototype._keywordSelectMouseDown):
+ (WebInspector.VisualStyleNumberInputBox.prototype._createValueOptions):
+ (WebInspector.VisualStyleNumberInputBox.prototype._createUnitOptions):
+ (WebInspector.VisualStyleNumberInputBox.prototype._addAdvancedUnits):
+ (WebInspector.VisualStyleNumberInputBox.prototype._removeAdvancedUnits):
+ (WebInspector.VisualStyleNumberInputBox.prototype._focusContentElement):
+ (WebInspector.VisualStyleNumberInputBox.prototype._blurContentElement):
+ (WebInspector.VisualStyleNumberInputBox.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStylePropertyEditorLink.css: Added.
+ (.visual-style-property-editor-link):
+ (.visual-style-property-editor-link.disabled):
+ (.visual-style-property-editor-link.link-all):
+ (.visual-style-property-editor-link.link-all.linked):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right):
+ (.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-border.left):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-border.right):
+ (.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link:not(.link-all).linked > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .filled):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .stroked):
+ (.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon):
+ (.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-icon):
+
+ * UserInterface/Views/VisualStylePropertyEditorLink.js: Added.
+ (WebInspector.VisualStylePropertyEditorLink):
+ (WebInspector.VisualStylePropertyEditorLink.prototype.get element):
+ (WebInspector.VisualStylePropertyEditorLink.prototype.set disabled):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._linkedPropertyValueChanged):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._updateLinkedEditors):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._iconMouseover):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._iconMouseout):
+ (WebInspector.VisualStylePropertyEditorLink.prototype._iconClicked):
+
+ * UserInterface/Views/VisualStyleRelativeNumberSlider.css: Added.
+ (.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-title):
+ (.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container):
+ (.visual-style-property-container.number-input-box.relative-number-slider.disabled > .relative-slider):
+ (.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container.no-values.no-units):
+ (.visual-style-property-container.number-input-box.relative-number-slider > .relative-slider):
+
+ * UserInterface/Views/VisualStyleRelativeNumberSlider.js: Added.
+ (WebInspector.VisualStyleRelativeNumberSlider):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype.set scale):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype.updateEditorValues):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._resetSlider):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._sliderChanged):
+ (WebInspector.VisualStyleRelativeNumberSlider.prototype._numberInputChanged):
+
+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: trunk/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyLinked.svg (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyLinked.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyLinked.svg 2015-08-10 23:56:51 UTC (rev 188238)
@@ -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">
+ <circle class="filled" cx="8" cy="8" r="4" fill="black" stroke="none" />
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/VisualStylePropertyUnlinked.svg 2015-08-10 23:56:51 UTC (rev 188238)
@@ -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">
+ <path class="filled" d="M 10 4 C 16 4 16 12 10 12" stroke="none" />
+ <path class="filled" d="M 6 4 C 0 4 0 12 6 12" stroke="none" />
+</svg>
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css 2015-08-10 23:56:51 UTC (rev 188238)
@@ -0,0 +1,74 @@
+/*
+ * 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 > .visual-style-property-value-container.focused > .focus-ring {
+ position: absolute;
+ top: 2px;
+ left: 1px;
+ width: calc(100% - 2px);
+ height: 16px;
+ border-radius: 3px;
+ box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.25);
+ pointer-events: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-keyword-select {
+ outline: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container {
+ display: flex;
+ position: absolute;
+ top: 2px;
+ left: 1px;
+ width: calc(100% - 20px);
+ line-height: 16px;
+ text-align: right;
+ border-radius: 4px;
+ background-color: hsl(0, 100%, 100%);
+ pointer-events: none;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.visual-style-property-container > .visual-style-property-value-container:not(.number-input-editable) > .number-input-container {
+ display: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value {
+ width: 100%;
+ height: 16px;
+ margin-right: 1px;
+ padding: 0 0 1px 3px;
+ border-bottom-left-radius: 3px;
+ text-align: right;
+ border: none;
+ outline: none;
+ pointer-events: all;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container > span {
+ min-width: -webkit-fit-content;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2015-08-10 23:56:51 UTC (rev 188238)
@@ -0,0 +1,334 @@
+/*
+ * 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.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends WebInspector.VisualStylePropertyEditor
+{
+ constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, possibleUnits || [WebInspector.UIString("No Units")], "number-input-box", layoutReversed);
+
+ this._hasUnits = !!possibleUnits;
+ this._allowNegativeValues = !!allowNegativeValues || false;
+
+ this.contentElement.classList.toggle("no-values", !possibleValues || !possibleValues.length);
+ this.contentElement.classList.toggle("no-units", !this._hasUnits);
+
+ let focusRingElement = document.createElement("div");
+ focusRingElement.classList.add("focus-ring");
+ this.contentElement.appendChild(focusRingElement);
+
+ this._keywordSelectElement = document.createElement("select");
+ this._keywordSelectElement.classList.add("number-input-keyword-select");
+ if (this._possibleUnits.advanced)
+ this._keywordSelectElement.title = WebInspector.UIString("Option-click to show all units");
+
+ if (this._possibleValues) {
+ this._createValueOptions(this._possibleValues.basic);
+ this._keywordSelectElement.appendChild(document.createElement("hr"));
+ }
+
+ if (this._possibleUnits)
+ this._createUnitOptions(this._possibleUnits.basic);
+
+ this._advancedUnitsElements = null;
+
+ this._keywordSelectElement.addEventListener("focus", this._focusContentElement.bind(this));
+ this._keywordSelectElement.addEventListener("mousedown", this._keywordSelectMouseDown.bind(this));
+ this._keywordSelectElement.addEventListener("change", this._keywordChanged.bind(this));
+ this._keywordSelectElement.addEventListener("blur", this._blurContentElement.bind(this));
+ this.contentElement.appendChild(this._keywordSelectElement);
+
+ this._numberUnitsContainer = document.createElement("div");
+ this._numberUnitsContainer.classList.add("number-input-container");
+
+ this._valueNumberInputElement = document.createElement("input");
+ this._valueNumberInputElement.classList.add("number-input-value");
+ this._valueNumberInputElement.spellcheck = false;
+ this._valueNumberInputElement.addEventListener("focus", this._focusContentElement.bind(this));
+ this._valueNumberInputElement.addEventListener("keydown", this._valueNumberInputKeyDown.bind(this));
+ this._valueNumberInputElement.addEventListener("keyup", this._numberInputChanged.bind(this));
+ this._valueNumberInputElement.addEventListener("blur", this._blurContentElement.bind(this));
+ this._numberUnitsContainer.appendChild(this._valueNumberInputElement);
+
+ this._unitsElement = document.createElement("span");
+ this._numberUnitsContainer.appendChild(this._unitsElement);
+ this.contentElement.appendChild(this._numberUnitsContainer);
+
+ this._numberInputIsEditable = true;
+ this.contentElement.classList.add("number-input-editable");
+ this._valueNumberInputElement.value = null;
+ this._valueNumberInputElement.setAttribute("placeholder", 0);
+ if (this._hasUnits && this.valueIsSupportedUnit("px"))
+ this._unitsElement.textContent = this._keywordSelectElement.value = "px";
+ }
+
+ // Public
+
+ get value()
+ {
+ if (this._numberInputIsEditable)
+ return parseFloat(this._valueNumberInputElement.value);
+
+ if (!this._numberInputIsEditable)
+ return this._keywordSelectElement.value;
+
+ return null;
+ }
+
+ set value(value)
+ {
+ if (value && value === this.value)
+ return;
+
+ if (!isNaN(value)) {
+ this._numberInputIsEditable = true;
+ this.contentElement.classList.add("number-input-editable");
+ this._valueNumberInputElement.value = value;
+ return;
+ }
+
+ if (!value) {
+ this._valueNumberInputElement.value = null;
+ return;
+ }
+
+ if (this.valueIsSupportedKeyword(value)) {
+ this._numberInputIsEditable = false;
+ this.contentElement.classList.remove("number-input-editable");
+ this._keywordSelectElement.value = value;
+ return;
+ }
+ }
+
+ get units()
+ {
+ let keyword = this._keywordSelectElement.value;
+ if (!this.valueIsSupportedUnit(keyword))
+ return;
+
+ return keyword;
+ }
+
+ set units(unit)
+ {
+ if (!unit || unit === this.units)
+ return;
+
+ if (!this.valueIsSupportedUnit(unit))
+ return;
+
+ if (this._valueIsSupportedAdvancedUnit(unit))
+ this._addAdvancedUnits();
+
+ this._numberInputIsEditable = true;
+ this.contentElement.classList.add("number-input-editable");
+ this._keywordSelectElement.value = unit;
+
+ if (this._hasUnits)
+ this._unitsElement.textContent = unit;
+ }
+
+ get placeholder()
+ {
+ return this._valueNumberInputElement.getAttribute("placeholder");
+ }
+
+ set placeholder(text)
+ {
+ if (text === this.placeholder)
+ return;
+
+ let _onlyNumericalText_ = !isNaN(text) && text;
+ this._valueNumberInputElement.setAttribute("placeholder", onlyNumericalText || 0);
+ }
+
+ get synthesizedValue()
+ {
+ let value = this._valueNumberInputElement.value;
+ if (this._numberInputIsEditable && !value)
+ return null;
+
+ let keyword = this._keywordSelectElement.value;
+ return this.valueIsSupportedUnit(keyword) ? value + (this._hasUnits ? keyword : "") : keyword;
+ }
+
+ updateValueFromText(text, value)
+ {
+ let match = this.parseValue(value);
+ this.value = match ? match[1] : value;
+ this.units = match ? match[2] : null;
+ return this.modifyPropertyText(text, value);
+ }
+
+ // Protected
+
+ parseValue(text)
+ {
+ return /^(-?[\d.]+)([^\s\d]{0,4})(?:\s*;?)$/.exec(text);
+ }
+
+ // Private
+
+ _keywordChanged()
+ {
+ let selectedKeywordIsUnit = this.valueIsSupportedUnit(this._keywordSelectElement.value);
+ if (!this._numberInputIsEditable && selectedKeywordIsUnit)
+ this._valueNumberInputElement.value = null;
+
+ if (this._hasUnits)
+ this._unitsElement.textContent = this._keywordSelectElement.value;
+
+ this._numberInputIsEditable = selectedKeywordIsUnit;
+ this.contentElement.classList.toggle("number-input-editable", selectedKeywordIsUnit);
+ this._valueDidChange();
+ }
+
+ _valueNumberInputKeyDown(event)
+ {
+ if (!this._numberInputIsEditable)
+ return;
+
+ function adjustValue(delta)
+ {
+ let newValue;
+ let value = this.value;
+ if (!value && isNaN(value)) {
+ let placeholderValue = this.placeholder && !isNaN(this.placeholder) ? parseFloat(this.placeholder) : 0;
+ newValue = placeholderValue + delta;
+ } else
+ newValue = value + delta;
+
+ if (!this._allowNegativeValues && newValue < 0)
+ newValue = 0;
+
+ this.value = Math.round(newValue * 100) / 100;
+ this._valueDidChange();
+ }
+
+ let shift = 1;
+ if (event.ctrlKey)
+ shift /= 10;
+ else if (event.shiftKey)
+ shift *= 10;
+
+ let key = event.keyIdentifier;
+ if (key.startsWith("Page"))
+ shift *= 10;
+
+ if (key === "Up" || key === "PageUp") {
+ event.preventDefault();
+ adjustValue.call(this, shift);
+ return;
+ }
+
+ if (key === "Down" || key === "PageDown") {
+ event.preventDefault();
+ adjustValue.call(this, -shift);
+ return;
+ }
+
+ this._valueDidChange();
+ }
+
+ _numberInputChanged()
+ {
+ if (!this._numberInputIsEditable)
+ return;
+
+ this._valueDidChange();
+ }
+
+ _keywordSelectMouseDown(event)
+ {
+ if (event.altKey)
+ this._addAdvancedUnits();
+ else if (!this._valueIsSupportedAdvancedUnit())
+ this._removeAdvancedUnits();
+ }
+
+ _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;
+ }
+
+ _createUnitOptions(units)
+ {
+ let addedElements = [];
+ for (let unit of units) {
+ let option = document.createElement("option");
+ option.text = unit;
+ this._keywordSelectElement.appendChild(option);
+ addedElements.push(option);
+ }
+
+ return addedElements;
+ }
+
+ _addAdvancedUnits()
+ {
+ if (this._advancedUnitsElements)
+ return;
+
+ this._keywordSelectElement.appendChild(document.createElement("hr"));
+ this._advancedUnitsElements = this._createUnitOptions(this._possibleUnits.advanced);
+ }
+
+ _removeAdvancedUnits()
+ {
+ if (!this._advancedUnitsElements)
+ return;
+
+ this._keywordSelectElement.removeChild(this._advancedUnitsElements[0].previousSibling);
+ for (let element of this._advancedUnitsElements)
+ this._keywordSelectElement.removeChild(element);
+
+ this._advancedUnitsElements = null;
+ }
+
+ _focusContentElement(event)
+ {
+ this.contentElement.classList.add("focused");
+ }
+
+ _blurContentElement(event)
+ {
+ this.contentElement.classList.remove("focused");
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ this._keywordSelectElement.tabIndex = disabled ? "-1" : null;
+ this._valueNumberInputElement.tabIndex = disabled ? "-1" : null;
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-08-10 23:56:51 UTC (rev 188238)
@@ -0,0 +1,127 @@
+/*
+ * 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-editor-link {
+ position: relative;
+ min-width: 32px;
+ margin-left: 1px;
+}
+
+.visual-style-property-editor-link.disabled {
+ visibility: hidden;
+}
+
+.visual-style-property-editor-link.link-all {
+ height: 13px;
+ margin: 0 auto 2px;
+ padding: 0 50px;
+ border-top-width: 0;
+ border-right-width: 1px;
+ border-bottom-width: 0;
+ border-left-width: 1px;
+ border-color: hsl(0, 0%, 50%);
+ border-style: dashed;
+}
+
+.visual-style-property-editor-link.link-all.linked {
+ border-color: black;
+ border-style: solid;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border {
+ position: absolute;
+ top: -webkit-calc(50% - 0.5px);
+ width: 48px;
+ border-top: 1px dashed hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left,
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right {
+ width: 49px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
+ width: 52px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right {
+ width: 51px;
+}
+
+.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border {
+ border-top: 1px solid hsl(0, 0, 0);
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border.left {
+ left: 1px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border.right {
+ right: 1px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
+ left: 0;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right {
+ right: 0;
+}
+
+.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-border {
+ width: 10px;
+ top: -webkit-calc(50% - 1px);
+}
+
+.visual-style-property-editor-link:not(.link-all).linked > .visual-style-property-editor-link-border {
+ width: 12px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon {
+ width: 10px;
+ height: 10px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon {
+ position: relative;
+ background-color: hsl(0, 100%, 100%);
+ z-index: 1;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .filled {
+ fill: hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon svg .stroked {
+ stroke: hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon {
+ margin: 5px 0 0 11px;
+}
+
+.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-icon {
+ margin-top: 1px;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js 2015-08-10 23:56:51 UTC (rev 188238)
@@ -0,0 +1,142 @@
+/*
+ * 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.VisualStylePropertyEditorLink = class VisualStylePropertyEditorLink extends WebInspector.Object
+{
+ constructor(linkedProperties, className, linksToHideWhenLinked)
+ {
+ super();
+
+ this._linkedProperties = linkedProperties || [];
+ this._linksToHideWhenLinked = linksToHideWhenLinked || [];
+ this._lastPropertyEdited = null;
+
+ for (let property of this._linkedProperties)
+ property.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._linkedPropertyValueChanged, this);
+
+ this._element = document.createElement("div");
+ this._element.classList.add("visual-style-property-editor-link", className || "");
+
+ let leftLineElement = document.createElement("div");
+ leftLineElement.classList.add("visual-style-property-editor-link-border", "left");
+ this._element.appendChild(leftLineElement);
+
+ this._iconElement = document.createElement("div");
+ this._iconElement.classList.add("visual-style-property-editor-link-icon");
+ this._iconElement.title = WebInspector.UIString("Click to link property values");
+ this._iconElement.addEventListener("mouseover", this._iconMouseover.bind(this));
+ this._iconElement.addEventListener("mouseout", this._iconMouseout.bind(this));
+ this._iconElement.addEventListener("click", this._iconClicked.bind(this));
+
+ wrappedSVGDocument("Images/VisualStylePropertyUnlinked.svg", "unlinked-icon", null, function(wrapper) {
+ this._iconElement.appendChild(wrapper);
+ this._unlinkedIcon = wrapper;
+ }.bind(this));
+
+ wrappedSVGDocument("Images/VisualStylePropertyLinked.svg", "linked-icon", null, function(wrapper) {
+ this._iconElement.appendChild(wrapper);
+ this._linkedIcon = wrapper;
+ this._linkedIcon.hidden = true;
+ }.bind(this));
+
+ this._element.appendChild(this._iconElement);
+
+ let rightLineElement = document.createElement("div");
+ rightLineElement.classList.add("visual-style-property-editor-link-border", "right");
+ this._element.appendChild(rightLineElement);
+
+ this._linked = false;
+ this._disabled = false;
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ }
+
+ set disabled(flag)
+ {
+ this._disabled = flag;
+ this._element.classList.toggle("disabled", this._disabled);
+ }
+
+ // Private
+
+ _linkedPropertyValueChanged(event)
+ {
+ if (!event)
+ return;
+
+ let property = event.target;
+ if (!property)
+ return;
+
+ this._lastPropertyEdited = property;
+ if (!this._linked)
+ return;
+
+ this._updateLinkedEditors(property);
+ }
+
+ _updateLinkedEditors(property)
+ {
+ let style = property.style;
+ let text = style.text;
+ let value = property.synthesizedValue || null;
+
+ for (let linkedProperty of this._linkedProperties)
+ text = linkedProperty.updateValueFromText(text, value);
+
+ style.text = text;
+ }
+
+ _iconMouseover()
+ {
+ this._linkedIcon.hidden = this._linked;
+ this._unlinkedIcon.hidden = !this._linked;
+ }
+
+ _iconMouseout()
+ {
+ this._linkedIcon.hidden = !this._linked;
+ this._unlinkedIcon.hidden = this._linked;
+ }
+
+ _iconClicked()
+ {
+ this._linked = !this._linked;
+ this._element.classList.toggle("linked", this._linked);
+ this._linkedIcon.hidden = !this._linked;
+ this._unlinkedIcon.hidden = this._linked;
+
+ this._iconElement.title = this._linked ? WebInspector.UIString("Click to remove link") : WebInspector.UIString("Click to link property values");
+
+ this._updateLinkedEditors(this._lastPropertyEdited || this._linkedProperties[0]);
+ for (let linkToHide of this._linksToHideWhenLinked)
+ linkToHide.disabled = this._linked;
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css 2015-08-10 23:56:51 UTC (rev 188238)
@@ -0,0 +1,47 @@
+/*
+ * 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.number-input-box.relative-number-slider > .visual-style-property-title {
+ margin-right: 3px;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container {
+ order: 2;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container:not(.number-input-editable) + .relative-slider,
+.visual-style-property-container.number-input-box.relative-number-slider.disabled > .relative-slider {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container.no-values.no-units {
+ display: none;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .relative-slider {
+ width: 47%;
+ margin-right: 7px;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js (0 => 188238)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js 2015-08-10 23:56:51 UTC (rev 188238)
@@ -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.
+ */
+
+WebInspector.VisualStyleRelativeNumberSlider = class VisualStyleRelativeNumberSlider extends WebInspector.VisualStyleNumberInputBox
+{
+ constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
+ {
+ super(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed);
+
+ this._element.classList.add("relative-number-slider");
+
+ this._sliderElement = document.createElement("input");
+ this._sliderElement.classList.add("relative-slider");
+ this._sliderElement.type = "range";
+ this._sliderElement.addEventListener("input", this._sliderChanged.bind(this));
+ this._element.appendChild(this._sliderElement);
+
+ this._startingValue = null;
+ this._scale = 100;
+ }
+
+ // Public
+
+ set scale(scale)
+ {
+ this._scale = scale || 1;
+ }
+
+ updateEditorValues(updatedValues)
+ {
+ super.updateEditorValues(updatedValues);
+ this._resetSlider();
+ }
+
+ // Private
+
+ _resetSlider()
+ {
+ this._startingValue = parseFloat(this._valueNumberInputElement.value);
+ if (isNaN(this._startingValue))
+ this._startingValue = parseFloat(this.placeholder) || 0;
+
+ let origin = this._scale / 2;
+ if (this._allowNegativeValues || this._startingValue > origin) {
+ this._sliderElement.min = -origin;
+ this._sliderElement.max = origin;
+ this._sliderElement.value = 0;
+ } else {
+ this._sliderElement.min = 0;
+ this._sliderElement.max = this._scale;
+ this._sliderElement.value = this._startingValue;
+ }
+ }
+
+ _sliderChanged()
+ {
+ this.value = this._startingValue + Math.round(parseFloat(this._sliderElement.value) * 100) / 100;
+ this._valueDidChange();
+ }
+
+ _numberInputChanged()
+ {
+ super._numberInputChanged();
+ this._resetSlider();
+ }
+};
