Web Inspector: Styles Redesign: Style unused, overridden, and invalid properties...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Sep 2017 02:54:36 +0000 (02:54 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 27 Sep 2017 02:54:36 +0000 (02:54 +0000)
https://bugs.webkit.org/show_bug.cgi?id=177461

Reviewed by Matt Baker.

Style properties the same way as in the current styles sidebar with two minor changes:
- Commented out properties are never strikethrough.
- Non-inherited properties of inherited rules are no longer strikethrough (but still semi-transparent).

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .overridden):not(.disabled)):
Use the same styles as in the old sidebar, with exception of `-webkit-text-stroke-width: 0.000000000000001px`
hack, which was replaced by -webkit-text-decoration-color.

(.spreadsheet-style-declaration-editor .property.invalid:not(.disabled)):
(.spreadsheet-style-declaration-editor .property.not-inherited):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype._update):

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

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

index 3464220..8fc6728 100644 (file)
@@ -1,3 +1,25 @@
+2017-09-26  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: Style unused, overridden, and invalid properties differently
+        https://bugs.webkit.org/show_bug.cgi?id=177461
+
+        Reviewed by Matt Baker.
+
+        Style properties the same way as in the current styles sidebar with two minor changes:
+        - Commented out properties are never strikethrough.
+        - Non-inherited properties of inherited rules are no longer strikethrough (but still semi-transparent).
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .overridden):not(.disabled)):
+        Use the same styles as in the old sidebar, with exception of `-webkit-text-stroke-width: 0.000000000000001px`
+        hack, which was replaced by -webkit-text-decoration-color.
+
+        (.spreadsheet-style-declaration-editor .property.invalid:not(.disabled)):
+        (.spreadsheet-style-declaration-editor .property.not-inherited):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
+        (WI.SpreadsheetStyleProperty):
+        (WI.SpreadsheetStyleProperty.prototype._update):
+
 2017-09-26  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Improve Table scrolling performance
index a20e305..827814d 100644 (file)
 .spreadsheet-style-declaration-editor .property.disabled > * {
     color: var(--syntax-highlight-comment-color) !important;
 }
+
+.spreadsheet-style-declaration-editor .property:matches(.invalid, .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.not-inherited {
+    opacity: 0.5;
+}
index 01582b3..b60a692 100644 (file)
@@ -85,7 +85,6 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
 
         this._property = property;
         this._element = document.createElement("div");
-        this._element.classList.add("property");
 
         this._update();
     }
@@ -99,7 +98,47 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
     _update()
     {
         this.element.removeChildren();
-        this.element.classList.toggle("disabled", !this._property.enabled);
+        this.element.className = "";
+
+        let duplicatePropertyExistsBelow = (cssProperty) => {
+            let propertyFound = false;
+
+            for (let property of this._property.ownerStyle.properties) {
+                if (property === cssProperty)
+                    propertyFound = true;
+                else if (property.name === cssProperty.name && propertyFound)
+                    return true;
+            }
+
+            return false;
+        };
+
+        let classNames = ["property"];
+
+        if (this._property.overridden)
+            classNames.push("overridden");
+
+        if (this._property.implicit)
+            classNames.push("implicit");
+
+        if (this._property.ownerStyle.inherited && !this._property.inherited)
+            classNames.push("not-inherited");
+
+        if (!this._property.valid && this._property.hasOtherVendorNameOrKeyword())
+            classNames.push("other-vendor");
+        else if (!this._property.valid) {
+            let propertyNameIsValid = false;
+            if (WI.CSSCompletions.cssNameCompletions)
+                propertyNameIsValid = WI.CSSCompletions.cssNameCompletions.isValidPropertyName(this._property.name);
+
+            if (!propertyNameIsValid || duplicatePropertyExistsBelow(this._property))
+                classNames.push("invalid");
+        }
+
+        if (!this._property.enabled)
+            classNames.push("disabled");
+
+        this._element.classList.add(...classNames);
 
         if (this._property.editable) {
             this._checkboxElement = this.element.appendChild(document.createElement("input"));