Web Inspector: Show the computed value in an overlay for numerical Visual Editors
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 04:50:38 +0000 (04:50 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 04:50:38 +0000 (04:50 +0000)
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@188628 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css
Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js

index 6ed4ff7..1d7ff40 100644 (file)
@@ -1,5 +1,32 @@
 2015-08-18  Devin Rousso  <drousso@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  <drousso@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
 
index be0fe09..aee1cee 100644 (file)
@@ -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%);
+}
index f05421f..9deeefe 100644 (file)
@@ -44,6 +44,13 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
         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 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
 
         this._unitsElement = document.createElement("span");
         this._numberUnitsContainer.appendChild(this._unitsElement);
+
         this.contentElement.appendChild(this._numberUnitsContainer);
 
         this._numberInputIsEditable = true;
@@ -81,7 +89,7 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
         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 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
         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 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
 
     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 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
         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 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
 
         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 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
 
     // Private
 
-    _keywordChanged()
+    set _unitsElementTextContent(text)
     {
-        let selectedKeywordIsUnit = this.valueIsSupportedUnit(this._keywordSelectElement.value);
-        if (!this._numberInputIsEditable && selectedKeywordIsUnit)
-            this._valueNumberInputElement.value = null;
+        if (!this._hasUnits)
+            return;
 
-        if (this._hasUnits)
-            this._unitsElement.textContent = this._keywordSelectElement.value;
+        this._unitsElement.textContent = text;
+        this._markUnitsContainerIfInputHasValue();
+    }
+
+    _markUnitsContainerIfInputHasValue()
+    {
+        let numberInputValue = this._valueNumberInputElement.value;
+        this._numberUnitsContainer.classList.toggle("has-value", numberInputValue && numberInputValue.length);
+    }
+
+    _keywordChanged()
+    {
+        let unchangedOptionSelected = this._unchangedOptionElement.selected;
+        if (!unchangedOptionSelected) {
+            let selectedKeywordIsUnit = this.valueIsSupportedUnit(this._keywordSelectElement.value);
+            if (!this._numberInputIsEditable && selectedKeywordIsUnit)
+                this._valueNumberInputElement.value = null;
+
+            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 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
             return;
         }
 
+        this._markUnitsContainerIfInputHasValue();
         this._valueDidChange();
     }
 
@@ -257,6 +304,7 @@ WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends
         if (!this._numberInputIsEditable)
             return;
 
+        this._markUnitsContainerIfInputHasValue();
         this._valueDidChange();
     }