Bug 224774 - REGRESSION (r268691 && r270134): Web Inspector: Clicking on go-to arrow in Computed panel no longer works
Summary: REGRESSION (r268691 && r270134): Web Inspector: Clicking on go-to arrow in Co...
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: Patrick Angle
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-04-19 11:31 PDT by Nikita Vasilyev
Modified: 2021-04-19 17:18 PDT (History)
6 users (show)

See Also:


Attachments
[Video] Doesn't select CSS property (2.15 MB, video/quicktime)
2021-04-19 12:02 PDT, Nikita Vasilyev
no flags Details
Patch v1.0 (3.69 KB, patch)
2021-04-19 14:35 PDT, Patrick Angle
no flags Details | Formatted Diff | Diff
Patch v1.1 - Revised approach (3.50 KB, patch)
2021-04-19 16:14 PDT, Patrick Angle
no flags Details | Formatted Diff | Diff
Patch v1.2 - Fix typos in changelog (3.50 KB, patch)
2021-04-19 16:27 PDT, Patrick Angle
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 2021-04-19 11:31:45 PDT
It supposed to navigate to the corresponding style in the Styles. Now it doesn't do anything.

[Error] Assertion Failed: Styles panel is missing.
	computedStyleDetailsPanelShowProperty (ComputedStyleDetailsSidebarPanel.js:38)
	spreadsheetCSSStyleDeclarationEditorShowProperty (ComputedStyleDetailsPanel.js:85)
	spreadsheetStylePropertyShowProperty (ComputedStyleSection.js:249)
	(anonymous function) (SpreadsheetStyleProperty.js:228)
Comment 1 Radar WebKit Bug Importer 2021-04-19 11:31:55 PDT
<rdar://problem/76854775>
Comment 2 Patrick Angle 2021-04-19 11:48:48 PDT
This issue occurs when the Style panel is shown independently. When the Style panel is collapsed into the Details sidebar due to lack of space, this still works.

Most likely the logic here doesn't know how to find the Style panel when it is part of a different Sidebar.
Comment 3 Nikita Vasilyev 2021-04-19 12:02:56 PDT
Created attachment 426452 [details]
[Video] Doesn't select CSS property

Note that when "Show independent styles sidebar" is unchecked, clicking on the go-to arrow open the Styles sidebar but doesn't focus on the CSS property. I haven't checked if this regressed in r268691 or not (if it did, it could be a separate bug/patch).
Comment 4 Patrick Angle 2021-04-19 12:58:03 PDT
(In reply to Nikita Vasilyev from comment #3)
> Note that when "Show independent styles sidebar" is unchecked, clicking on
> the go-to arrow open the Styles sidebar but doesn't focus on the CSS
> property. I haven't checked if this regressed in r268691 or not (if it did,
> it could be a separate bug/patch).

Just checked, the highlighting regressed somewhere else.
Comment 5 Patrick Angle 2021-04-19 14:14:38 PDT
The second half of this behavior was regressed in r270134 due to a missed occurrence of `this._visible` (which should not have been accessed here at all as it was a private member of the superclass) in `WI.SpreadsheetRulesStyleDetailsPanel`.
Comment 6 Patrick Angle 2021-04-19 14:35:45 PDT
Created attachment 426478 [details]
Patch v1.0
Comment 7 Devin Rousso 2021-04-19 14:39:39 PDT
Comment on attachment 426478 [details]
Patch v1.0

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

> Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:42
> +                styleRulesSidebar = styleRulesSidebar.parentView;

This kinda sorta feels like a layering violation :/

Is the issue here that the `WI.RulesStyleDetailsSidebarPanel` isn't kept inside the `sidebarPanels` of a `WI.MultiSidebar`?  I feel like the `WI.MultiSidebar.prototype.get sidebarPanels` should return the list of _all_ sidebar panels across _all_ of its child/managed `WI.SingleSidebar`.
Comment 8 Patrick Angle 2021-04-19 14:41:46 PDT
Comment on attachment 426478 [details]
Patch v1.0

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

>> Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:42
>> +                styleRulesSidebar = styleRulesSidebar.parentView;
> 
> This kinda sorta feels like a layering violation :/
> 
> Is the issue here that the `WI.RulesStyleDetailsSidebarPanel` isn't kept inside the `sidebarPanels` of a `WI.MultiSidebar`?  I feel like the `WI.MultiSidebar.prototype.get sidebarPanels` should return the list of _all_ sidebar panels across _all_ of its child/managed `WI.SingleSidebar`.

The issue is the `parentSidebar` is a SingleSidebar, which is a child of the MultiSidebar.
Comment 9 Devin Rousso 2021-04-19 14:48:59 PDT
Comment on attachment 426478 [details]
Patch v1.0

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

> Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:43
> +        }

Can we just use `WI.detailsSidebar` then?  Reaching into the `WI.View` hierarchy of a different class seems like a place where issues (likely undiscovered) could arise.  It's also a bit presumptuous IMO to expect the `WI.RulesStyleDetailsSidebarPanel` to be in the same `WI.Sidebar` as this panel (as evidenced by this bug).
Comment 10 Patrick Angle 2021-04-19 14:52:16 PDT
Comment on attachment 426478 [details]
Patch v1.0

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

>> Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:43
>> +        }
> 
> Can we just use `WI.detailsSidebar` then?  Reaching into the `WI.View` hierarchy of a different class seems like a place where issues (likely undiscovered) could arise.  It's also a bit presumptuous IMO to expect the `WI.RulesStyleDetailsSidebarPanel` to be in the same `WI.Sidebar` as this panel (as evidenced by this bug).

That would certainly work. Sounds good to me.
Comment 11 Patrick Angle 2021-04-19 16:14:35 PDT
Created attachment 426488 [details]
Patch v1.1 - Revised approach
Comment 12 Devin Rousso 2021-04-19 16:24:05 PDT
Comment on attachment 426488 [details]
Patch v1.1 - Revised approach

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

r=me, nice fix :)

> Source/WebInspectorUI/ChangeLog:9
> +        The Style panel will not always be part of the same sidebar as the Computed panel as of r268691, so we should
> +        look for the Style panel in WI.detailsSidebar, which will report all of the panels it manages across multiple

NIT: "Styles panel"

> Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsSidebarPanel.js:37
> -        let styleRulesPanel = this.parentSidebar.sidebarPanels.find((panel) => panel instanceof WI.RulesStyleDetailsSidebarPanel);
> +        let styleRulesPanel = WI.detailsSidebar.sidebarPanels.find((panel) => panel instanceof WI.RulesStyleDetailsSidebarPanel);

As a note for future readers, the reason why I don't see this as a layering violation is because this is the `WI.ComputedStyle*DETAILS*SidebarPanel`, so it's reasonable for a panel in the details sidebar to do things to the `WI.detailsSidebar`.

Ideally we'd have a way to get to the related `WI.TabBrowser.prototype.get detailsSidebar` instead of assuming the global singleton (or doing as @Patrick Angle suggested offline and having a `get topLevelParentSidebar`), but in the interest of getting this fixed I think it's fine for now.
Comment 13 Patrick Angle 2021-04-19 16:27:57 PDT
Created attachment 426492 [details]
Patch v1.2 - Fix typos in changelog
Comment 14 EWS 2021-04-19 17:18:08 PDT
Committed r276278 (236760@main): <https://commits.webkit.org/236760@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 426492 [details].