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;
}