Changeset 223970 in webkit

Timestamp:

Oct 25, 2017 12:02:28 PM (7 years ago)

Author:

Nikita Vasilyev

Message:

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.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Models/CSSStyleDeclaration.js (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css (modified) (1 diff)
• UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js (modified) (1 diff)
• UserInterface/Views/SpreadsheetStyleProperty.js (modified) (5 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+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>
 

trunk/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js

@@ -362 +362 @@
         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;

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css

@@ -76 +76 @@
 }
 
-.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);
 }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js

@@ -222 +222 @@
     _propertiesChanged(event)
     {
-        if (!this._isFocused())
+        if (this._isFocused()) {
+            for (let propertyView of this._propertyViews)
+                propertyView.updateClassNames();
+        } else
             this.needsLayout();
     }

trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js

@@ -47 +47 @@
         this._update();
         property.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, this._update, this);
+        property.addEventListener(WI.CSSProperty.Event.Changed, this.updateClassNames, this);
     }
 
@@ -71 +72 @@
     }
 
-    // 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.element.className = "";
-
+    updateClassNames()
+    {
         let duplicatePropertyExistsBelow = (cssProperty) => {
             let propertyFound = false;
@@ -114 +100 @@
         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)
@@ -120 +106 @@
 
             if (!propertyNameIsValid || duplicatePropertyExistsBelow(this._property))
-                classNames.push("invalid");
+                classNames.push("invalid-name");
+            else
+                classNames.push("invalid-value");
         }
 
@@ -126 +114 @@
             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) {