distinguish between invalid property and property values by line-through

When the property is valid but the property value is invalid, add
line-through only to the property value.

Until then, we could not quickly distinguish visually whether a property was invalid or a value was invalid.

Screenshot Comparison: https://imgur.com/Af0nHEZ

Bug: None
Change-Id: I3bdce53a92e981872044f02b6249f9af7b56668c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4345353
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
diff --git a/front_end/panels/elements/StylePropertyTreeElement.ts b/front_end/panels/elements/StylePropertyTreeElement.ts
index d18bad1..628efd0 100644
--- a/front_end/panels/elements/StylePropertyTreeElement.ts
+++ b/front_end/panels/elements/StylePropertyTreeElement.ts
@@ -927,6 +927,13 @@
       // Add a separate exclamation mark IMG element with a tooltip.
       this.listItemElement.insertBefore(
           StylesSidebarPane.createExclamationMark(this.property, null), this.listItemElement.firstChild);
+
+      // When the property is valid but the property value is invalid,
+      // add line-through only to the property value.
+      const invalidPropertyValue = SDK.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name);
+      if (invalidPropertyValue) {
+        this.listItemElement.classList.add('invalid-property-value');
+      }
     }
 
     if (!this.property.activeInStyle()) {
diff --git a/front_end/panels/elements/stylesSectionTree.css b/front_end/panels/elements/stylesSectionTree.css
index 7652e28..d35a080 100644
--- a/front_end/panels/elements/stylesSectionTree.css
+++ b/front_end/panels/elements/stylesSectionTree.css
@@ -112,10 +112,14 @@
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.overloaded:not(.has-ignorable-error),
-.inactive,
+.overloaded:not(.has-ignorable-error, .invalid-property-value),
+.inactive:not(.invalid-property-value),
 .disabled,
-.not-parsed-ok:not(.has-ignorable-error) {
+.not-parsed-ok:not(.has-ignorable-error, .invalid-property-value) {
+  text-decoration: line-through;
+}
+
+.not-parsed-ok.invalid-property-value .value {
   text-decoration: line-through;
 }