Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188483 => 188484)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-14 20:05:06 UTC (rev 188483)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-14 20:07:15 UTC (rev 188484)
@@ -1,5 +1,103 @@
2015-08-14 Devin Rousso <[email protected]>
+ Web Inspector: Add visual editors for CSS properties
+ https://bugs.webkit.org/show_bug.cgi?id=147576
+
+ Added parent class for property editors in the Visual style
+ details panel in the CSS sidebar.
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/VisualStylePropertyCombiner.js: Added.
+ (WebInspector.VisualStylePropertyCombiner):
+ (WebInspector.VisualStylePropertyCombiner.prototype.get style):
+ (WebInspector.VisualStylePropertyCombiner.prototype.get synthesizedValue):
+ (WebInspector.VisualStylePropertyCombiner.prototype.modifyPropertyText):
+ (WebInspector.VisualStylePropertyCombiner.prototype.update):
+ (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText.updateCompatibleEditor):
+ (WebInspector.VisualStylePropertyCombiner.prototype.updateValuesFromText):
+ (WebInspector.VisualStylePropertyCombiner.prototype.propertyMissing):
+ (WebInspector.VisualStylePropertyCombiner.prototype.resetEditorValues):
+ (WebInspector.VisualStylePropertyCombiner.prototype._markEditors):
+ (WebInspector.VisualStylePropertyCombiner.prototype._handlePropertyEditorValueChanged):
+
+ * UserInterface/Views/VisualStylePropertyEditor.css: Added.
+ (.visual-style-property-container):
+ (.visual-style-property-container > .visual-style-property-title):
+ (.visual-style-property-container > .visual-style-property-title > .property-reference-info):
+ (.visual-style-property-container.disabled > .visual-style-property-title > :not(.property-reference-info)):
+ (.visual-style-property-container > .visual-style-property-value-container):
+ (.visual-style-property-container.disabled > .visual-style-property-value-container):
+ (.visual-style-property-container > .visual-style-property-value-container select):
+ (.visual-style-property-container > .visual-style-property-value-container input):
+ (.visual-style-property-container.disabled > .visual-style-property-value-container input):
+ (.visual-style-property-container.layout-reversed > .visual-style-property-title):
+ (.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder):
+ (.visual-style-property-info-popover):
+ (.visual-style-property-info-popover > h3):
+
+ * UserInterface/Views/VisualStylePropertyEditor.js: Added.
+ (WebInspector.VisualStylePropertyEditor.canonicalizeValues):
+ (WebInspector.VisualStylePropertyEditor):
+ (WebInspector.VisualStylePropertyEditor.prototype.get element):
+ (WebInspector.VisualStylePropertyEditor.prototype.get style):
+ (WebInspector.VisualStylePropertyEditor.prototype.get value):
+ (WebInspector.VisualStylePropertyEditor.prototype.set value):
+ (WebInspector.VisualStylePropertyEditor.prototype.get units):
+ (WebInspector.VisualStylePropertyEditor.prototype.set units):
+ (WebInspector.VisualStylePropertyEditor.prototype.get placeholder):
+ (WebInspector.VisualStylePropertyEditor.prototype.set placeholder):
+ (WebInspector.VisualStylePropertyEditor.prototype.get synthesizedValue):
+ (WebInspector.VisualStylePropertyEditor.prototype.set suppressStyleTextUpdate):
+ (WebInspector.VisualStylePropertyEditor.prototype.set masterProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get masterProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.set optionalProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get optionalProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.set colorProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get colorProperty):
+ (WebInspector.VisualStylePropertyEditor.prototype.get propertyReferenceName):
+ (WebInspector.VisualStylePropertyEditor.prototype.set propertyReferenceName):
+ (WebInspector.VisualStylePropertyEditor.prototype.set disabled):
+ (WebInspector.VisualStylePropertyEditor.prototype.get disabled):
+ (WebInspector.VisualStylePropertyEditor.prototype.update):
+ (WebInspector.VisualStylePropertyEditor.prototype.updateEditorValues):
+ (WebInspector.VisualStylePropertyEditor.prototype.resetEditorValues):
+ (WebInspector.VisualStylePropertyEditor.prototype.modifyPropertyText):
+ (WebInspector.VisualStylePropertyEditor.prototype.getValuesFromText):
+ (WebInspector.VisualStylePropertyEditor.prototype.propertyMissing):
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsCompatible):
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedKeyword):
+ (WebInspector.VisualStylePropertyEditor.prototype.valueIsSupportedUnit):
+ (WebInspector.VisualStylePropertyEditor.prototype.get contentElement):
+ (WebInspector.VisualStylePropertyEditor.prototype.get specialPropertyPlaceholderElement):
+ (WebInspector.VisualStylePropertyEditor.prototype.parseValue):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedKeyword):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueIsSupportedAdvancedUnit):
+ (WebInspector.VisualStylePropertyEditor.prototype._canonicalizedKeywordForKey):
+ (WebInspector.VisualStylePropertyEditor.prototype._keyForKeyword):
+ (WebInspector.VisualStylePropertyEditor.prototype._valueDidChange):
+ (WebInspector.VisualStylePropertyEditor.prototype._replaceShorthandPropertyWithLonghandProperties):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementPrepareForClick):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementMouseOver):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementMouseOut):
+ (WebInspector.VisualStylePropertyEditor.prototype._titleElementClick):
+ (WebInspector.VisualStylePropertyEditor.prototype._hasMultipleConflictingValues):
+ (WebInspector.VisualStylePropertyEditor.prototype._showPropertyInfoPopover):
+ (WebInspector.VisualStylePropertyEditor.prototype._toggleTabbingOfSelectableElements):
+
+ * UserInterface/Views/VisualStyleTabbedPropertiesRow.css: Added.
+ (.visual-style-tabbed-properties-row ~ :not(.visible)):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button.selected):
+ (.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button:not(.selected):hover):
+
+ * UserInterface/Views/VisualStyleTabbedPropertiesRow.js: Added.
+ (WebInspector.VisualStyleTabbedPropertiesRow):
+ (WebInspector.VisualStyleTabbedPropertiesRow.prototype._handleButtonClicked):
+
+2015-08-14 Devin Rousso <[email protected]>
+
Web Inspector: Add Visual editors for CSS properties with comma separated values
https://bugs.webkit.org/show_bug.cgi?id=147578
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js (0 => 188484)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js 2015-08-14 20:07:15 UTC (rev 188484)
@@ -0,0 +1,182 @@
+/*
+ * 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.VisualStylePropertyCombiner = class VisualStylePropertyCombiner extends WebInspector.Object
+{
+ constructor(propertyName, propertyEditors)
+ {
+ super();
+
+ this._style = null;
+ this._propertyName = propertyName;
+ this._propertyMissing = false;
+ this._propertyEditors = propertyEditors || [];
+
+ for (let editor of this._propertyEditors) {
+ editor.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._handlePropertyEditorValueChanged, this);
+ editor.suppressStyleTextUpdate = true;
+ }
+
+ this._textContainsNameRegExp = new RegExp("(?:(?:^|;)\\s*" + this._propertyName + "\\s*:)");
+ this._replacementRegExp = new RegExp("(^|;)(?:\\s*)(" + this._propertyName + ")(.+?(?:;|$))");
+ this._valueRegExp = /([^\s]+\(.+\)|[^\s]+)(?:;?)/g;
+ }
+
+ get style()
+ {
+ return this._style;
+ }
+
+ get synthesizedValue()
+ {
+ let value = "";
+ let _oneEditorHasValue_ = false;
+ for (let editor of this._propertyEditors) {
+ let editorValue = editor.synthesizedValue;
+ if (editorValue && editorValue.length)
+ _oneEditorHasValue_ = true;
+ else if (editor.optionalProperty)
+ continue;
+
+ if (editor.masterProperty && editor.valueIsSupportedKeyword()) {
+ this._markEditors(editor, true);
+ return editorValue;
+ }
+
+ if (editor !== this._propertyEditors[0])
+ value += " ";
+
+ value += editorValue || (editor.colorProperty ? "transparent" : 0);
+ }
+
+ this._markEditors();
+ return value.length && oneEditorHasValue ? value : null;
+ }
+
+ modifyPropertyText(text, value)
+ {
+ let trimmedText = text.trimRight();
+ if (this._textContainsNameRegExp.test(text))
+ text = text.replace(this._replacementRegExp, value !== null ? "$1$2: " + value + ";" : "$1");
+ else if (value !== null) {
+ if (trimmedText.trimLeft().length && !trimmedText.endsWith(";"))
+ text += ";";
+
+ text += this._propertyName + ": " + value + ";";
+ }
+ return text;
+ }
+
+ update(style)
+ {
+ if (style)
+ this._style = style;
+ else if (this._ignoreNextUpdate) {
+ this._ignoreNextUpdate = false;
+ return;
+ }
+
+ if (!this._style || !this._valueRegExp)
+ return;
+
+ let property = this._style.propertyForName(this._propertyName, true);
+ let propertyMissing = !property;
+ if (propertyMissing && this._style.nodeStyles)
+ property = this._style.nodeStyles.computedStyle.propertyForName(this._propertyName);
+
+ if (!property)
+ return;
+
+ this.updateValuesFromText(property.value, propertyMissing);
+ this._propertyMissing = propertyMissing;
+ }
+
+ updateValuesFromText(styleText, propertyMissing)
+ {
+ if (styleText === this.synthesizedValue)
+ return;
+
+ for (let editor of this._propertyEditors)
+ editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = false;
+
+ function updateCompatibleEditor(value) {
+ for (let editor of this._propertyEditors) {
+ if (value && !editor.valueIsCompatible(value) || editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol])
+ continue;
+
+ if (this._currentValueIsKeyword && editor.disabled)
+ continue;
+
+ let updatedValues = editor.getValuesFromText(value || "", propertyMissing);
+ editor.updateEditorValues(updatedValues);
+ editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = true;
+
+ if (value)
+ return;
+ }
+ }
+
+ let matches = styleText.match(this._valueRegExp);
+ for (let i = 0; i < this._propertyEditors.length; ++i)
+ updateCompatibleEditor.call(this, matches && matches[i]);
+ }
+
+ get propertyMissing()
+ {
+ return this._propertyMissing;
+ }
+
+ resetEditorValues(value)
+ {
+ this._ignoreNextUpdate = false;
+ this.updateValuesFromText(value || "");
+ }
+
+ // Private
+
+ _markEditors(ignoredEditor, disabled)
+ {
+ this._currentValueIsKeyword = disabled || false;
+ for (let editor of this._propertyEditors) {
+ if (ignoredEditor && editor === ignoredEditor)
+ continue;
+
+ editor.disabled = this._currentValueIsKeyword;
+ }
+ }
+
+ _handlePropertyEditorValueChanged()
+ {
+ this._ignoreNextUpdate = true;
+ let value = this.synthesizedValue;
+ if (this._style)
+ this._style.text = this.modifyPropertyText(this._style.text, value);
+
+ this._propertyMissing = !value;
+ this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
+ }
+};
+
+WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol = Symbol("visual-style-property-combiner-editor-updated");
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css (0 => 188484)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css 2015-08-14 20:07:15 UTC (rev 188484)
@@ -0,0 +1,99 @@
+/*
+ * 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 {
+ display: flex;
+ width: 100%;
+ min-height: 22px;
+}
+
+.visual-style-property-container > .visual-style-property-title {
+ margin: 4px;
+ text-align: right;
+}
+
+.visual-style-property-container > .visual-style-property-title > .property-reference-info{
+ cursor: help;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-title > :not(.property-reference-info) {
+ opacity: 0.7;
+}
+
+.visual-style-property-container > .visual-style-property-value-container {
+ flex: 1;
+ position: relative;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-value-container {
+ pointer-events: none;
+ opacity: 0.4;
+}
+
+.visual-style-property-container > .visual-style-property-value-container select {
+ width: 100%;
+ margin: 1px 0;
+}
+
+.visual-style-property-container > .visual-style-property-value-container input {
+ width: calc(100% - 1px);
+ margin: 0;
+ outline: none;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-value-container input {
+ pointer-events: none !important;
+}
+
+.visual-style-property-container.layout-reversed > .visual-style-property-title {
+ order: 2;
+ text-align: left;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder {
+ position: absolute;
+ top: 2px;
+ left: 1px;
+ width: calc(100% - 20px);
+ line-height: 16px;
+ text-indent: 7px;
+ border-radius: 4px;
+ background-color: white;
+ color: hsl(0, 0%, 50%);
+ pointer-events: none;
+ overflow: hidden;
+ white-space: nowrap;
+ z-index: 1;
+}
+
+.visual-style-property-info-popover {
+ width: 190px;
+ margin: 0 5px 3px;
+ padding: 0;
+}
+
+.visual-style-property-info-popover > h3 {
+ margin: 6px 3px;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (0 => 188484)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js 2015-08-14 20:07:15 UTC (rev 188484)
@@ -0,0 +1,525 @@
+/*
+ * 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.VisualStylePropertyEditor = class VisualStylePropertyEditor extends WebInspector.Object
+{
+ constructor(propertyNames, label, possibleValues, possibleUnits, className, layoutReversed)
+ {
+ super();
+
+ this._propertyInfoList = [];
+ this._style = null;
+
+ function canonicalizeValues(values)
+ {
+ if (!values)
+ return;
+
+ let canonicalizedValues = {};
+ for (let value of values)
+ canonicalizedValues[value.toLowerCase().replace(/\s/g, "-")] = value;
+
+ return canonicalizedValues;
+ }
+
+ this._possibleValues = null;
+ if (possibleValues) {
+ this._possibleValues = {};
+ if (Array.isArray(possibleValues))
+ this._possibleValues.basic = canonicalizeValues(possibleValues);
+ else {
+ this._possibleValues.basic = canonicalizeValues(possibleValues.basic);
+ this._possibleValues.advanced = canonicalizeValues(possibleValues.advanced);
+ }
+ }
+ this._possibleUnits = null;
+ if (possibleUnits) {
+ this._possibleUnits = {};
+ if (Array.isArray(possibleUnits))
+ this._possibleUnits.basic = possibleUnits;
+ else
+ this._possibleUnits = possibleUnits;
+ }
+
+ this._element = document.createElement("div");
+ this._element.classList.add("visual-style-property-container", className);
+ this._element.classList.toggle("layout-reversed", layoutReversed);
+
+ if (label && label.length) {
+ let titleContainer = document.createElement("div");
+ titleContainer.classList.add("visual-style-property-title");
+
+ this._titleElement = document.createElement("span");
+ this._titleElement.appendChild(document.createTextNode(label));
+ this._titleElement.addEventListener("mouseover", this._titleElementMouseOver.bind(this));
+ this._titleElement.addEventListener("mouseout", this._titleElementMouseOut.bind(this));
+ this._titleElement.addEventListener("click", this._titleElementClick.bind(this));
+ titleContainer.appendChild(this._titleElement);
+
+ this._element.appendChild(titleContainer);
+
+ this._boundTitleElementPrepareForClick = this._titleElementPrepareForClick.bind(this);
+ }
+
+ this._contentElement = document.createElement("div");
+ this._contentElement.classList.add("visual-style-property-value-container");
+
+ this._specialPropertyPlaceholderElement = document.createElement("span");
+ this._specialPropertyPlaceholderElement.classList.add("visual-style-special-property-placeholder");
+ this._specialPropertyPlaceholderElement.hidden = true;
+ this._contentElement.appendChild(this._specialPropertyPlaceholderElement);
+
+ this._element.appendChild(this._contentElement);
+
+ this._updatedValues = {};
+ this._lastValue = null;
+
+ if (typeof propertyNames === "string")
+ propertyNames = [propertyNames];
+ else {
+ this._hasMultipleProperties = true;
+ this._element.classList.add("multiple");
+ }
+
+ for (let name of propertyNames) {
+ this._element.classList.add(name);
+ this._propertyInfoList.push({
+ name,
+ textContainsNameRegExp: new RegExp("(?:(?:^|;)\\s*" + name + "\\s*:)"),
+ replacementRegExp: new RegExp("(^|;)(?:\\s*)(" + name + ")(.+?(?:;|$))")
+ })
+ }
+
+ this._propertyReferenceName = propertyNames[0];
+ this._propertyReferenceText = WebInspector.VisualStyleDetailsPanel.propertyReferenceInfo[this._propertyReferenceName];
+ this._hasPropertyReference = this._propertyReferenceText && !!this._propertyReferenceText.trim().length;
+ this._representedProperty = null;
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ }
+
+ get style()
+ {
+ return this._style;
+ }
+
+ get value()
+ {
+ // Implemented by subclass.
+ }
+
+ set value(value)
+ {
+ // Implemented by subclass.
+ }
+
+ get units()
+ {
+ // Implemented by subclass.
+ }
+
+ set units(unit)
+ {
+ // Implemented by subclass.
+ }
+
+ get placeholder()
+ {
+ // Implemented by subclass.
+ }
+
+ set placeholder(text)
+ {
+ // Implemented by subclass.
+ }
+
+ get synthesizedValue()
+ {
+ // Implemented by subclass.
+ }
+
+ set suppressStyleTextUpdate(flag)
+ {
+ this._suppressStyleTextUpdate = flag;
+ }
+
+ set masterProperty(flag)
+ {
+ this._masterProperty = flag;
+ }
+
+ get masterProperty()
+ {
+ return this._masterProperty;
+ }
+
+ set optionalProperty(flag)
+ {
+ this._optionalProperty = flag;
+ }
+
+ get optionalProperty()
+ {
+ return this._optionalProperty;
+ }
+
+ set colorProperty(flag)
+ {
+ this._colorProperty = flag;
+ }
+
+ get colorProperty()
+ {
+ return this._colorProperty;
+ }
+
+ get propertyReferenceName()
+ {
+ return this._propertyReferenceName;
+ }
+
+ set propertyReferenceName(name)
+ {
+ if (!name || !name.length)
+ return;
+
+ this._propertyReferenceName = name;
+ }
+
+ set disabled(flag)
+ {
+ this._disabled = flag;
+ this._element.classList.toggle("disabled", this._disabled);
+ this._toggleTabbingOfSelectableElements(this._disabled);
+ }
+
+ get disabled()
+ {
+ return this._disabled;
+ }
+
+ update(style)
+ {
+ if (style)
+ this._style = style;
+ else if (this._ignoreNextUpdate) {
+ this._ignoreNextUpdate = false;
+ return;
+ }
+
+ if (!this._style)
+ return;
+
+ this._updatedValues = {};
+ let propertyValuesConflict = false;
+ let propertyMissing = false;
+ for (let propertyInfo of this._propertyInfoList) {
+ let property = this._style.propertyForName(propertyInfo.name, true);
+ propertyMissing = !property;
+ if (propertyMissing && this._style.nodeStyles)
+ property = this._style.nodeStyles.computedStyle.propertyForName(propertyInfo.name);
+
+ if (!property)
+ continue;
+
+ if (!propertyMissing && property.anonymous)
+ this._representedProperty = property;
+
+ let newValues = this.getValuesFromText(property.value, propertyMissing);
+ if (this._updatedValues.placeholder && this._updatedValues.placeholder !== newValues.placeholder)
+ propertyValuesConflict = true;
+
+ if (!this._updatedValues.placeholder)
+ this._updatedValues = newValues;
+
+ if (propertyValuesConflict) {
+ this._updatedValues.conflictingValues = true;
+ this._specialPropertyPlaceholderElement.textContent = WebInspector.UIString("(multiple)");
+ break;
+ }
+ }
+
+ if (this._hasMultipleProperties)
+ this._specialPropertyPlaceholderElement.hidden = !propertyValuesConflict;
+
+ this.updateEditorValues(this._updatedValues);
+ }
+
+ updateEditorValues(updatedValues)
+ {
+ this.value = updatedValues.value;
+ this.units = updatedValues.units;
+ this.placeholder = updatedValues.placeholder;
+
+ this._lastValue = this.synthesizedValue;
+ this.disabled = false;
+ }
+
+ resetEditorValues(value)
+ {
+ this._ignoreNextUpdate = false;
+ if (!value || !value.length) {
+ this.value = null;
+ this._specialPropertyPlaceholderElement.hidden = false;
+ return;
+ }
+
+ let updatedValues = this.getValuesFromText(value);
+ this.updateEditorValues(updatedValues);
+ }
+
+ modifyPropertyText(text, value)
+ {
+ let trimmedText = text.trimRight();
+ for (let property of this._propertyInfoList) {
+ if (property.textContainsNameRegExp.test(text))
+ text = text.replace(property.replacementRegExp, value !== null ? "$1$2: " + value + ";" : "$1");
+ else if (value !== null) {
+ if (trimmedText.trimLeft().length && !trimmedText.endsWith(";"))
+ text += ";";
+
+ text += property.name + ": " + value + ";";
+ }
+ }
+ return text;
+ }
+
+ getValuesFromText(text, propertyMissing)
+ {
+ let match = this.parseValue(text);
+ let placeholder = match ? match[1] : text;
+ let units = match ? match[2] : null;
+ let value = placeholder;
+ if (propertyMissing)
+ value = this.valueIsSupportedKeyword(text) ? text : null;
+
+ return {value, units, placeholder, propertyMissing};
+ }
+
+ get propertyMissing()
+ {
+ return this._updatedValues && this._updatedValues.propertyMissing;
+ }
+
+ valueIsCompatible(value)
+ {
+ if (!value || !value.length)
+ return false;
+
+ return this.valueIsSupportedKeyword(value) || !!this.parseValue(value);
+ }
+
+ valueIsSupportedKeyword(value) {
+ if (!this._possibleValues)
+ return false;
+
+ value = value || this.value;
+ if (Object.keys(this._possibleValues.basic).includes(value))
+ return true;
+
+ return this._valueIsSupportedAdvancedKeyword(value);
+ }
+
+ valueIsSupportedUnit(unit)
+ {
+ if (!this._possibleUnits)
+ return false;
+
+ unit = unit || this.units;
+ if (this._possibleUnits.basic.includes(unit))
+ return true;
+
+ return this._valueIsSupportedAdvancedUnit(unit);
+ }
+
+ // Protected
+
+ get contentElement()
+ {
+ return this._contentElement;
+ }
+
+ get specialPropertyPlaceholderElement()
+ {
+ return this._specialPropertyPlaceholderElement;
+ }
+
+ parseValue(text)
+ {
+ return /^([^;]+)\s*;?$/.exec(text);
+ }
+
+ // Private
+
+ _valueIsSupportedAdvancedKeyword(value)
+ {
+ return this._possibleValues.advanced && Object.keys(this._possibleValues.advanced).includes(value || this.value);
+ }
+
+ _valueIsSupportedAdvancedUnit(unit)
+ {
+ return this._possibleUnits.advanced && this._possibleUnits.advanced.includes(unit || this.units);
+ }
+
+ _canonicalizedKeywordForKey(value)
+ {
+ if (!value || !this._possibleValues)
+ return null;
+
+ return this._possibleValues.basic[value] || (this._possibleValues.advanced && this._possibleValues.advanced[value]) || null;
+ }
+
+ _keyForKeyword(keyword)
+ {
+ if (!keyword || !keyword.length || !this._possibleValues)
+ return null;
+
+ for (let basicKey in this._possibleValues.basic) {
+ if (this._possibleValues.basic[basicKey] === keyword)
+ return basicKey;
+ }
+
+ if (!this._possibleValues.advanced)
+ return null;
+
+ for (let advancedKey in this._possibleValues.advanced) {
+ if (this._possibleValues.advanced[advancedKey] === keyword)
+ return advancedKey;
+ }
+
+ return null;
+ }
+
+ _valueDidChange()
+ {
+ let value = this.synthesizedValue;
+ if (value === this._lastValue)
+ return false;
+
+ if (this._style && !this._suppressStyleTextUpdate) {
+ let newText = this._style.text;
+ newText = this._replaceShorthandPropertyWithLonghandProperties(newText);
+ newText = this.modifyPropertyText(newText, value);
+ this._style.text = newText;
+ if (!newText.length)
+ this._style.update(null, null, this._style.styleSheetTextRange);
+ }
+
+ this._lastValue = value;
+ this._updatedValues.propertyMissing = !value;
+ this._ignoreNextUpdate = true;
+ this._specialPropertyPlaceholderElement.hidden = true;
+
+ this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
+ return true;
+ }
+
+ _replaceShorthandPropertyWithLonghandProperties(text)
+ {
+ if (!this._representedProperty)
+ return text;
+
+ let shorthand = this._representedProperty.relatedShorthandProperty;
+ if (!shorthand)
+ return text;
+
+ let longhandText = "";
+ for (let longhandProperty of shorthand.relatedLonghandProperties) {
+ if (longhandProperty.anonymous)
+ longhandText += longhandProperty.synthesizedText;
+ }
+ return longhandText ? text.replace(shorthand.text, longhandText) : text;
+ }
+
+ _titleElementPrepareForClick(event)
+ {
+ this._titleElement.classList.toggle("property-reference-info", event.type === "keydown" && event.altKey);
+ }
+
+ _titleElementMouseOver(event)
+ {
+ if (!this._hasPropertyReference)
+ return;
+
+ this._titleElement.classList.toggle("property-reference-info", event.altKey);
+ document.addEventListener("keydown", this._boundTitleElementPrepareForClick);
+ document.addEventListener("keyup", this._boundTitleElementPrepareForClick);
+ }
+
+ _titleElementMouseOut()
+ {
+ if (!this._hasPropertyReference)
+ return;
+
+ this._titleElement.classList.remove("property-reference-info");
+ document.removeEventListener("keydown", this._boundTitleElementPrepareForClick);
+ document.removeEventListener("keyup", this._boundTitleElementPrepareForClick);
+ }
+
+ _titleElementClick(event)
+ {
+ if (event.altKey)
+ this._showPropertyInfoPopover();
+ }
+
+ _hasMultipleConflictingValues()
+ {
+ return this._hasMultipleProperties && !this._specialPropertyPlaceholderElement.hidden;
+ }
+
+ _showPropertyInfoPopover()
+ {
+ if (!this._hasPropertyReference)
+ return;
+
+ let propertyInfoElement = document.createElement("p");
+ propertyInfoElement.classList.add("visual-style-property-info-popover");
+
+ let propertyInfoTitleElement = document.createElement("h3");
+ propertyInfoTitleElement.appendChild(document.createTextNode(this._propertyReferenceName));
+ propertyInfoElement.appendChild(propertyInfoTitleElement);
+
+ propertyInfoElement.appendChild(document.createTextNode(this._propertyReferenceText));
+
+ let bounds = WebInspector.Rect.rectFromClientRect(this._titleElement.getBoundingClientRect());
+ let popover = new WebInspector.Popover(this);
+ popover.content = propertyInfoElement;
+ popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_Y]);
+ }
+
+ _toggleTabbingOfSelectableElements(disabled)
+ {
+ // Implemented by subclass.
+ }
+};
+
+WebInspector.VisualStylePropertyEditor.Event = {
+ ValueDidChange: "visual-style-property-editor-value-changed"
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css (0 => 188484)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css 2015-08-14 20:07:15 UTC (rev 188484)
@@ -0,0 +1,51 @@
+/*
+ * 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-tabbed-properties-row ~ :not(.visible) {
+ visibility: hidden;
+ height: 0;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container {
+ margin: 0 auto;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button {
+ margin: 0 2px 2px;
+ border-radius: 3px;
+ border-width: 0 1px;
+ border-color: transparent;
+ background-color: transparent;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button.selected {
+ color: white;
+ background-color: hsl(213, 92%, 55%);
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button:not(.selected):hover {
+ color: white;
+ background-color: hsla(213, 92%, 55%, 0.5);
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js (0 => 188484)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js 2015-08-14 20:07:15 UTC (rev 188484)
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013 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.VisualStyleTabbedPropertiesRow = class VisualStyleTabbedPropertiesRow extends WebInspector.DetailsSectionRow
+{
+ constructor(tabMap)
+ {
+ super();
+
+ this._element.classList.add("visual-style-tabbed-properties-row");
+
+ let containerElement = document.createElement("div");
+ containerElement.classList.add("visual-style-tabbed-properties-row-container");
+
+ this._tabButtons = [];
+ this._tabMap = tabMap;
+ for (let key in this._tabMap) {
+ let button = document.createElement("button");
+ button.id = key;
+ button.textContent = this._tabMap[key].title;
+ button.addEventListener("click", this._handleButtonClicked.bind(this));
+
+ containerElement.appendChild(button);
+ this._tabButtons.push(button);
+ }
+
+ let firstButton = this._tabButtons[0];
+ firstButton.classList.add("selected");
+ this._tabMap[firstButton.id].element.classList.add("visible");
+
+ this._element.appendChild(containerElement);
+ }
+
+ // Private
+
+ _handleButtonClicked(event)
+ {
+ for (let item of this._tabButtons) {
+ let tab = this._tabMap[item.id];
+ let selected = item === event.target;
+ item.classList.toggle("selected", selected);
+ tab.element.classList.toggle("visible", selected);
+ for (let propertyEditor of tab.properties)
+ propertyEditor.update();
+ }
+ }
+};
