Title: [188628] trunk/Source/WebInspectorUI
- Revision
- 188628
- Author
- drou...@apple.com
- Date
- 2015-08-18 21:50:38 -0700 (Tue, 18 Aug 2015)
Log Message
Web Inspector: Show the computed value in an overlay for numerical Visual Editors
https://bugs.webkit.org/show_bug.cgi?id=148161
Reviewed by Timothy Hatcher.
Adds an "Unchanged" option to the number-based Visual editors that shows the
computed value if it is not a number (it would therefore be a keyword).
* UserInterface/Views/VisualStyleNumberInputBox.css:
(.visual-style-property-container > .visual-style-property-value-container > .number-input-container):
(.visual-style-property-container > .visual-style-property-value-container > .number-input-container:not(.has-value) > span):
* UserInterface/Views/VisualStyleNumberInputBox.js:
(WebInspector.VisualStyleNumberInputBox):
(WebInspector.VisualStyleNumberInputBox.prototype.set value):
(WebInspector.VisualStyleNumberInputBox.prototype.get units):
(WebInspector.VisualStyleNumberInputBox.prototype.set units):
(WebInspector.VisualStyleNumberInputBox.prototype.set placeholder):
(WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
(WebInspector.VisualStyleNumberInputBox.prototype.set _unitsElementTextContent):
(WebInspector.VisualStyleNumberInputBox.prototype._markUnitsContainerIfInputHasValue):
(WebInspector.VisualStyleNumberInputBox.prototype._keywordChanged):
(WebInspector.VisualStyleNumberInputBox.prototype._valueNumberInputKeyDown):
(WebInspector.VisualStyleNumberInputBox.prototype._numberInputChanged):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188627 => 188628)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-19 04:50:15 UTC (rev 188627)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-19 04:50:38 UTC (rev 188628)
@@ -1,5 +1,32 @@
2015-08-18 Devin Rousso <drou...@apple.com>
+ Web Inspector: Show the computed value in an overlay for numerical Visual Editors
+ https://bugs.webkit.org/show_bug.cgi?id=148161
+
+ Reviewed by Timothy Hatcher.
+
+ Adds an "Unchanged" option to the number-based Visual editors that shows the
+ computed value if it is not a number (it would therefore be a keyword).
+
+ * UserInterface/Views/VisualStyleNumberInputBox.css:
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container):
+ (.visual-style-property-container > .visual-style-property-value-container > .number-input-container:not(.has-value) > span):
+
+ * UserInterface/Views/VisualStyleNumberInputBox.js:
+ (WebInspector.VisualStyleNumberInputBox):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set value):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get units):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set units):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set placeholder):
+ (WebInspector.VisualStyleNumberInputBox.prototype.get synthesizedValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype.set _unitsElementTextContent):
+ (WebInspector.VisualStyleNumberInputBox.prototype._markUnitsContainerIfInputHasValue):
+ (WebInspector.VisualStyleNumberInputBox.prototype._keywordChanged):
+ (WebInspector.VisualStyleNumberInputBox.prototype._valueNumberInputKeyDown):
+ (WebInspector.VisualStyleNumberInputBox.prototype._numberInputChanged):
+
+2015-08-18 Devin Rousso <drou...@apple.com>
+
Web Inspector: Small Caps variant checkbox should be to the left of the Small Caps label
https://bugs.webkit.org/show_bug.cgi?id=148102
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css (188627 => 188628)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css 2015-08-19 04:50:15 UTC (rev 188627)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css 2015-08-19 04:50:38 UTC (rev 188628)
@@ -47,7 +47,7 @@
line-height: 16px;
text-align: right;
border-radius: 4px;
- background-color: hsl(0, 100%, 100%);
+ background-color: white;
pointer-events: none;
overflow: hidden;
white-space: nowrap;
@@ -72,3 +72,7 @@
.visual-style-property-container > .visual-style-property-value-container > .number-input-container > span {
min-width: -webkit-fit-content;
}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container:not(.has-value) > span {
+ color: hsl(0, 0%, 60%);
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js (188627 => 188628)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2015-08-19 04:50:15 UTC (rev 188627)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js 2015-08-19 04:50:38 UTC (rev 188628)
@@ -44,6 +44,13 @@
if (this._possibleUnits.advanced)
this._keywordSelectElement.title = WebInspector.UIString("Option-click to show all units");
+ 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"));
+
if (this._possibleValues) {
this._createValueOptions(this._possibleValues.basic);
this._keywordSelectElement.appendChild(document.createElement("hr"));
@@ -74,6 +81,7 @@
this._unitsElement = document.createElement("span");
this._numberUnitsContainer.appendChild(this._unitsElement);
+
this.contentElement.appendChild(this._numberUnitsContainer);
this._numberInputIsEditable = true;
@@ -81,7 +89,7 @@
this._valueNumberInputElement.value = null;
this._valueNumberInputElement.setAttribute("placeholder", 0);
if (this._hasUnits && this.valueIsSupportedUnit("px"))
- this._unitsElement.textContent = this._keywordSelectElement.value = "px";
+ this._unitsElementTextContent = this._keywordSelectElement.value = "px";
}
// Public
@@ -102,6 +110,16 @@
if (value && value === this.value)
return;
+ if (this._updatedValues.propertyMissing && isNaN(value)) {
+ this._unchangedOptionElement.selected = true;
+ this._numberInputIsEditable = false;
+ this.contentElement.classList.remove("number-input-editable");
+ this.specialPropertyPlaceholderElement.hidden = false;
+ return;
+ }
+
+ this.specialPropertyPlaceholderElement.hidden = true;
+
if (!isNaN(value)) {
this._numberInputIsEditable = true;
this.contentElement.classList.add("number-input-editable");
@@ -124,15 +142,21 @@
get units()
{
+ if (this._unchangedOptionElement.selected)
+ return null;
+
let keyword = this._keywordSelectElement.value;
if (!this.valueIsSupportedUnit(keyword))
- return;
+ return null;
return keyword;
}
set units(unit)
{
+ if (this._unchangedOptionElement.selected)
+ return;
+
if (!unit || unit === this.units)
return;
@@ -145,9 +169,7 @@
this._numberInputIsEditable = true;
this.contentElement.classList.add("number-input-editable");
this._keywordSelectElement.value = unit;
-
- if (this._hasUnits)
- this._unitsElement.textContent = unit;
+ this._unitsElementTextContent = unit;
}
get placeholder()
@@ -162,10 +184,16 @@
let _onlyNumericalText_ = text && !isNaN(text) && (Math.round(text * 100) / 100);
this._valueNumberInputElement.setAttribute("placeholder", onlyNumericalText || 0);
+
+ if (!onlyNumericalText)
+ this.specialPropertyPlaceholderElement.textContent = this._canonicalizedKeywordForKey(text) || text;
}
get synthesizedValue()
{
+ if (this._unchangedOptionElement.selected)
+ return null;
+
let value = this._valueNumberInputElement.value;
if (this._numberInputIsEditable && !value)
return null;
@@ -191,18 +219,36 @@
// Private
+ set _unitsElementTextContent(text)
+ {
+ if (!this._hasUnits)
+ return;
+
+ this._unitsElement.textContent = text;
+ this._markUnitsContainerIfInputHasValue();
+ }
+
+ _markUnitsContainerIfInputHasValue()
+ {
+ let numberInputValue = this._valueNumberInputElement.value;
+ this._numberUnitsContainer.classList.toggle("has-value", numberInputValue && numberInputValue.length);
+ }
+
_keywordChanged()
{
- let selectedKeywordIsUnit = this.valueIsSupportedUnit(this._keywordSelectElement.value);
- if (!this._numberInputIsEditable && selectedKeywordIsUnit)
- this._valueNumberInputElement.value = null;
+ let unchangedOptionSelected = this._unchangedOptionElement.selected;
+ if (!unchangedOptionSelected) {
+ 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._unitsElementTextContent = this._keywordSelectElement.value;
+ this._numberInputIsEditable = selectedKeywordIsUnit;
+ this.contentElement.classList.toggle("number-input-editable", selectedKeywordIsUnit);
+ }
- this._numberInputIsEditable = selectedKeywordIsUnit;
- this.contentElement.classList.toggle("number-input-editable", selectedKeywordIsUnit);
this._valueDidChange();
+ this.specialPropertyPlaceholderElement.hidden = !unchangedOptionSelected;
}
_valueNumberInputKeyDown(event)
@@ -249,6 +295,7 @@
return;
}
+ this._markUnitsContainerIfInputHasValue();
this._valueDidChange();
}
@@ -257,6 +304,7 @@
if (!this._numberInputIsEditable)
return;
+ this._markUnitsContainerIfInputHasValue();
this._valueDidChange();
}
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
