Bug 178286 - Web Inspector: [PARITY] Styles Redesign: clicking on the go-to arrow in Computed tab should work
Summary: Web Inspector: [PARITY] Styles Redesign: clicking on the go-to arrow in Compu...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-10-13 14:52 PDT by Nikita Vasilyev
Modified: 2017-10-15 20:42 PDT (History)
4 users (show)

See Also:


Attachments
Patch (8.66 KB, patch)
2017-10-14 13:02 PDT, Nikita Vasilyev
joepeck: review+
joepeck: commit-queue-
Details | Formatted Diff | Diff
[Animated GIF] With patch applied (1012.73 KB, image/gif)
2017-10-14 13:02 PDT, Nikita Vasilyev
no flags Details
Patch (8.84 KB, patch)
2017-10-15 19:06 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Nikita Vasilyev 2017-10-13 14:52:10 PDT
Clicking on the go-to arrow in Computed tab should switch to "Styles — Rules" panel and highlight the corresponding property,
similarly to the old styles sidebar.
Comment 1 Radar WebKit Bug Importer 2017-10-13 14:52:31 PDT
<rdar://problem/34986379>
Comment 2 Nikita Vasilyev 2017-10-14 13:02:18 PDT
Created attachment 323818 [details]
Patch
Comment 3 Nikita Vasilyev 2017-10-14 13:02:55 PDT
Created attachment 323819 [details]
[Animated GIF] With patch applied
Comment 4 Joseph Pecoraro 2017-10-15 15:30:58 PDT
Comment on attachment 323818 [details]
Patch

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

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:101
> +@keyframes style-property-highlight {
> +    from { background-color: yellow; }
> +}

Shouldn't this have some kind of `to`?

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:110
> +        if (!this.didInitialLayout)
> +            this.updateLayout();

This seems peculiar. You should have a comment describing why we force a layout here. It seems you could do the same "defer until layout the property to highlight", but given this is a user action this probably isn't too bad.

> Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js:45
> +        this._property.__view = this;

__view is already used elsewhere. Every `Views/*View.js` sets __view. So I suggest using a different name to avoid potential conflicts. Maybe __spreadsheetStyleProperty or __propertyView.
Comment 5 Nikita Vasilyev 2017-10-15 18:59:20 PDT
Comment on attachment 323818 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:101
>> +}
> 
> Shouldn't this have some kind of `to`?

I could add

    to { background-color: transparent; }

but it works just fine without "to"! In the old styles sidebar we omitted "to" as well, see `@keyframes text-editor-highlight-fadeout`.
Comment 6 Nikita Vasilyev 2017-10-15 19:06:00 PDT
Created attachment 323854 [details]
Patch

Joe: you left cq-. Does it mean that I shouldn't cq+ the updated patch myself and wait for you to take another look?
Comment 7 Joseph Pecoraro 2017-10-15 19:52:47 PDT
(In reply to Nikita Vasilyev from comment #6)
> Created attachment 323854 [details]
> Patch
> 
> Joe: you left cq-. Does it mean that I shouldn't cq+ the updated patch
> myself and wait for you to take another look?

cq- just means don't land the previous patch as is. If you have addressed the comments in the new patch you can cq+ or land the new patch given it has addressed the comments.
Comment 8 WebKit Commit Bot 2017-10-15 20:42:09 PDT
Comment on attachment 323854 [details]
Patch

Clearing flags on attachment: 323854

Committed r223333: <https://trac.webkit.org/changeset/223333>
Comment 9 WebKit Commit Bot 2017-10-15 20:42:11 PDT
All reviewed patches have been landed.  Closing bug.