Web Inspector: [PARITY] Styles Redesign: clicking on the go-to arrow in Computed...
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 16 Oct 2017 03:42:06 +0000 (03:42 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 16 Oct 2017 03:42:06 +0000 (03:42 +0000)
commite82ad59e1e330f0748e8312a22f0af59c2b83cfb
tree0c2f8e4f556f487d058e32ed16a899797949a00c
parent8622bfcbb9bcb57d67334c04027ecaf43a49d3db
Web Inspector: [PARITY] Styles Redesign: clicking on the go-to arrow in Computed tab should work
https://bugs.webkit.org/show_bug.cgi?id=178286
<rdar://problem/34986379>

Reviewed by Joseph Pecoraro.

Highlight the matching property using a yellow background and focus on the property value
if the property is editable (e.g., not a User Agent style).

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor):
(.spreadsheet-style-declaration-editor .property):
Move left padding to the property element so there's no awkward gap on the left side
when the property is highlighted.

(.spreadsheet-style-declaration-editor .property.highlighted):
(@keyframes style-property-highlight):
Use the same animation duration as we used in `.text-editor > .CodeMirror .highlighted`.
The highlight color was changed from light blue to yellow.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js:
(WI.SpreadsheetCSSStyleDeclarationEditor.prototype.highlightProperty):
Use the same logic as in WI.CSSStyleDeclarationTextEditor.prototype.highlightProperty
to find matching style property to highlight.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.highlightProperty):
Use the same logic as in WI.CSSStyleDeclarationSection.prototype.highlightProperty.

* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.scrollToSectionAndHighlightProperty):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.nodeStylesRefreshed):
Copied from WI.RulesStyleDetailsPanel.

* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty):
(WI.SpreadsheetStyleProperty.prototype.detached):
(WI.SpreadsheetStyleProperty.prototype.highlight):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@223333 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js