Web Inspector: Styles Redesign: navigating away from empty value should remove CSS...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 13 Dec 2017 06:19:57 +0000 (06:19 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 13 Dec 2017 06:19:57 +0000 (06:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=180508

Reviewed by Devin Rousso.

Remove a property when navigating away from it (e.g. to the next/previous property,
or outside of the styles panel entirely) and either its name or value is empty:

    color: [ ]->
    <-[ ]: red
    <-[color]:

Don't remove a property when navigating from an empty value to a non-empty name:

    color: <-[ ]

Always remove a property when both name and value are empty.

* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
(WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):
* UserInterface/Views/SpreadsheetTextField.js:
(WI.SpreadsheetTextField.prototype._handleBlur):
(WI.SpreadsheetTextField.prototype.get valueBeforeEditing): Deleted.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetTextField.js

index a5a705f..99dbb40 100644 (file)
@@ -1,3 +1,30 @@
+2017-12-12  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: navigating away from empty value should remove CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=180508
+
+        Reviewed by Devin Rousso.
+
+        Remove a property when navigating away from it (e.g. to the next/previous property,
+        or outside of the styles panel entirely) and either its name or value is empty:
+
+            color: [ ]->
+            <-[ ]: red
+            <-[color]:
+
+        Don't remove a property when navigating from an empty value to a non-empty name:
+
+            color: <-[ ]
+
+        Always remove a property when both name and value are empty.
+
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidCommit):
+        (WI.SpreadsheetStyleProperty.prototype.spreadsheetTextFieldDidBlur):
+        * UserInterface/Views/SpreadsheetTextField.js:
+        (WI.SpreadsheetTextField.prototype._handleBlur):
+        (WI.SpreadsheetTextField.prototype.get valueBeforeEditing): Deleted.
+
 2017-12-12  Brian Burg  <bburg@apple.com>
 
         Web Inspector: support async setup() and async teardown() in AsyncTestSuite
index 66e116c..1f0f90c 100644 (file)
@@ -231,16 +231,11 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         let propertyName = this._nameTextField.value.trim();
         let propertyValue = this._valueTextField.value.trim();
         let willRemoveProperty = false;
-        let newlyAdded = this._valueTextField.valueBeforeEditing === "";
+        let isEditingName = textField === this._nameTextField;
 
-        // Remove a property with an empty name or value. However, a newly added property
-        // has an empty name and value at first. Don't remove it when moving focus from
-        // the name to the value for the first time.
-        if (!propertyName || (!newlyAdded && !propertyValue))
+        if (!propertyName || (!propertyValue && !isEditingName && direction === "forward"))
             willRemoveProperty = true;
 
-        let isEditingName = textField === this._nameTextField;
-
         if (!isEditingName && !willRemoveProperty)
             this._renderValue(propertyValue);
 
@@ -267,11 +262,15 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
             this._remove();
     }
 
-    spreadsheetTextFieldDidBlur(textField)
+    spreadsheetTextFieldDidBlur(textField, event)
     {
-        if (textField.value.trim() === "")
+        let focusedOutsideThisProperty = event.relatedTarget !== this._nameElement && event.relatedTarget !== this._valueElement;
+        if (focusedOutsideThisProperty && (!this._nameTextField.value.trim() || !this._valueTextField.value.trim())) {
             this._remove();
-        else if (textField === this._valueTextField)
+            return;
+        }
+
+        if (textField === this._valueTextField)
             this._renderValue(this._valueElement.textContent);
     }
 
index d84cc42..35ca411 100644 (file)
@@ -58,8 +58,6 @@ WI.SpreadsheetTextField = class SpreadsheetTextField
     get value() { return this._element.textContent; }
     set value(value) { this._element.textContent = value; }
 
-    get valueBeforeEditing() { return this._valueBeforeEditing; }
-
     get suggestionHint()
     {
         return this._suggestionHintElement.textContent;
@@ -212,7 +210,7 @@ WI.SpreadsheetTextField = class SpreadsheetTextField
         this._applyCompletionHint();
         this.discardCompletion();
 
-        this._delegate.spreadsheetTextFieldDidBlur(this);
+        this._delegate.spreadsheetTextFieldDidBlur(this, event);
         this.stopEditing();
     }