Web Inspector: Styles Redesign: Newly added invalid property isn't immediately shown...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Oct 2017 19:02:28 +0000 (19:02 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 25 Oct 2017 19:02:28 +0000 (19:02 +0000)
https://bugs.webkit.org/show_bug.cgi?id=178488

Reviewed by Brian Burg.

* UserInterface/Models/CSSStyleDeclaration.js:
(WI.CSSStyleDeclaration.prototype.newBlankProperty):
Call this.update to update _properties, _allProperties, _visibleProperties, and _allVisibleProperties.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled)):
(.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled)):
(.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value):
When the property name is valid, but the value isn't, display red line-through only for the value.
This is how it works in the old styles sidebar as well.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
(WI.SpreadsheetCSSStyleDeclarationEditor):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.updateClassNames):
(WI.SpreadsheetStyleProperty.prototype._update):
Introduce updateClassNames method. Unlike _update, it doesn't change text selection or focus and
can be safely called on a property while it's being edited.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

index d3d1719..456f7b3 100644 (file)
@@ -1,3 +1,31 @@
+2017-10-25  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: Newly added invalid property isn't immediately shown as invalid
+        https://bugs.webkit.org/show_bug.cgi?id=178488
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Models/CSSStyleDeclaration.js:
+        (WI.CSSStyleDeclaration.prototype.newBlankProperty):
+        Call this.update to update _properties, _allProperties, _visibleProperties, and _allVisibleProperties.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled)):
+        (.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled)):
+        (.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value):
+        When the property name is valid, but the value isn't, display red line-through only for the value.
+        This is how it works in the old styles sidebar as well.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetCSSStyleDeclarationEditor.prototype._propertiesChanged):
+        (WI.SpreadsheetCSSStyleDeclarationEditor):
+        * UserInterface/Views/SpreadsheetStyleProperty.js:
+        (WI.SpreadsheetStyleProperty):
+        (WI.SpreadsheetStyleProperty.prototype.updateClassNames):
+        (WI.SpreadsheetStyleProperty.prototype._update):
+        Introduce updateClassNames method. Unlike _update, it doesn't change text selection or focus and
+        can be safely called on a property while it's being edited.
+
 2017-10-25  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: preserve Recordings for each Canvas after closing the Canvas tab
index 07a37d3..3787415 100644 (file)
@@ -361,10 +361,15 @@ WI.CSSStyleDeclaration = class CSSStyleDeclaration extends WI.Object
     {
         let text, name, value, priority, overridden, implicit, anonymous;
         let enabled = true;
-        let valid = true;
+        let valid = false;
         let styleSheetTextRange = this._rangeAfterPropertyAtIndex(insertAfterIndex);
-        let property = new WI.CSSProperty(insertAfterIndex + 1, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
-        property.ownerStyle = this;
+
+        let propertyIndex = insertAfterIndex + 1;
+        let property = new WI.CSSProperty(propertyIndex, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
+
+        this._allProperties.insertAtIndex(property, propertyIndex);
+        const suppressEvents = true;
+        this.update(this._text, this._allProperties, this._styleSheetTextRange, suppressEvents);
 
         return property;
     }
index dd36773..e552ae9 100644 (file)
     color: var(--syntax-highlight-comment-color) !important;
 }
 
-.spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .overridden):not(.disabled) {
+.spreadsheet-style-declaration-editor .property:matches(.invalid-name, .other-vendor, .overridden):not(.disabled) {
     text-decoration: line-through;
     -webkit-text-decoration-color: hsla(0, 0%, 0%, 0.6);
 }
 
-.spreadsheet-style-declaration-editor .property.invalid:not(.disabled) {
-    -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.6);
+.spreadsheet-style-declaration-editor .property.invalid-name:not(.disabled) {
+    -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
+}
+
+.spreadsheet-style-declaration-editor .property.invalid-value:not(.disabled) .value {
+    text-decoration: line-through;
+    -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.5);
 }
 
 .spreadsheet-style-declaration-editor .property.not-inherited {
index 5e1703f..6333b8f 100644 (file)
@@ -221,7 +221,10 @@ WI.SpreadsheetCSSStyleDeclarationEditor = class SpreadsheetCSSStyleDeclarationEd
 
     _propertiesChanged(event)
     {
-        if (!this._isFocused())
+        if (this._isFocused()) {
+            for (let propertyView of this._propertyViews)
+                propertyView.updateClassNames();
+        } else
             this.needsLayout();
     }
 };
index 931059a..fc1a446 100644 (file)
@@ -46,6 +46,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 
         this._update();
         property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this._update, this);
+        property.addEventListener(WI.CSSProperty.Event.Changed, this.updateClassNames, this);
     }
 
     // Public
@@ -70,23 +71,8 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
         this._element.classList.add("highlighted");
     }
 
-    // Private
-
-    _remove()
+    updateClassNames()
     {
-        this.element.remove();
-        this._property.remove();
-        this.detached();
-
-        if (this._delegate && typeof this._delegate.spreadsheetStylePropertyRemoved === "function")
-            this._delegate.spreadsheetStylePropertyRemoved(this);
-    }
-
-    _update()
-    {
-        this.element.removeChildren();
-        this.element.className = "";
-
         let duplicatePropertyExistsBelow = (cssProperty) => {
             let propertyFound = false;
 
@@ -113,19 +99,39 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 
         if (!this._property.valid && this._property.hasOtherVendorNameOrKeyword())
             classNames.push("other-vendor");
-        else if (!this._property.valid) {
+        else if (!this._property.valid && this._property.value !== "") {
             let propertyNameIsValid = false;
             if (WI.CSSCompletions.cssNameCompletions)
                 propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
 
             if (!propertyNameIsValid || duplicatePropertyExistsBelow(this._property))
-                classNames.push("invalid");
+                classNames.push("invalid-name");
+            else
+                classNames.push("invalid-value");
         }
 
         if (!this._property.enabled)
             classNames.push("disabled");
 
-        this._element.classList.add(...classNames);
+        this._element.className = classNames.join(" ");
+    }
+
+    // Private
+
+    _remove()
+    {
+        this.element.remove();
+        this._property.remove();
+        this.detached();
+
+        if (this._delegate && typeof this._delegate.spreadsheetStylePropertyRemoved === "function")
+            this._delegate.spreadsheetStylePropertyRemoved(this);
+    }
+
+    _update()
+    {
+        this.element.removeChildren();
+        this.updateClassNames();
 
         if (this._property.editable) {
             this._checkboxElement = this.element.appendChild(document.createElement("input"));