Bug 177461 – Web Inspector: Styles Redesign: Style unused, overridden, and invalid properties differently

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

Style unused, overridden, invalid, and not-inherited properties the same way as in the current styles sidebar.

<rdar://problem/33525629>

[Nikita Vasilyev]

Created attachment 321737 [details]
Patch

[Nikita Vasilyev]

Comment on attachment 321737 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=321737&action=review

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:75
> +.spreadsheet-style-declaration-editor .property:matches(.invalid, .other-vendor, .not-inherited, .overridden) {
> +    text-decoration: line-through;
> +    -webkit-text-decoration-color: hsla(0, 0%, 0%, 0.6);
> +}
> +
> +.spreadsheet-style-declaration-editor .property.invalid {
> +    -webkit-text-decoration-color: hsla(0, 100%, 50%, 0.6);
> +}

This is the same line-through as in https://github.com/WebKit/webkit/blob/bc1e9d2e86be469e2a519c15c8368ca043623f03/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css#L66-L76

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:79
> +}

Same opacity as in https://github.com/WebKit/webkit/blob/bc1e9d2e86be469e2a519c15c8368ca043623f03/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css#L95-L97.

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:141
> +        this._element.classList.add(...classNames);

This is a copy/paste of https://github.com/WebKit/webkit/blob/bc1e9d2e86be469e2a519c15c8368ca043623f03/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js#L1016-L1051

However, I moved propertyNameIsValid inside of the relevant if condition, and replaced `var` with `let`.

[Nikita Vasilyev]

Created attachment 321741 [details]
Patch

[Nikita Vasilyev]

Created attachment 321744 [details]
[Screenshot] With patch applied

Static page for manual testing: http://nv.github.io/webkit-inspector-bugs/styles-redesign/tests/property-types.html

[Nikita Vasilyev]

Created attachment 321892 [details]
Patch

[Nikita Vasilyev]

Created attachment 321895 [details]
Patch

[Nikita Vasilyev]

Created attachment 321896 [details]
[Screenshot] With patch applied

[Matt Baker]

Comment on attachment 321895 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=321895&action=review

r=me

> Source/WebInspectorUI/ChangeLog:10
> +        - Non-inherited properties of inherited rules are no longer strikethrough (but still semi-transparent).

Those strikethroughs were confusing. Looks like we match Chrome now. I noticed both Firefox and Edge hide non-inherited properties completely.

[WebKit Commit Bot]

Comment on attachment 321895 [details]
Patch

Clearing flags on attachment: 321895

Committed r222547: <http://trac.webkit.org/changeset/222547>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.