Style unused, overridden, invalid, and not-inherited properties the same way as in the current styles sidebar. <rdar://problem/33525629>
Created attachment 321737 [details] Patch
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`.
Created attachment 321741 [details] Patch
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
Created attachment 321892 [details] Patch
Created attachment 321895 [details] Patch
Created attachment 321896 [details] [Screenshot] With patch applied
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.
Comment on attachment 321895 [details] Patch Clearing flags on attachment: 321895 Committed r222547: <http://trac.webkit.org/changeset/222547>
All reviewed patches have been landed. Closing bug.