Web Inspector: Canvas Tab: clicking on a canvas card causes details sidebar to show and mess up card arrangement

• Component: Web Inspector
• Status: RESOLVED FIXED

[BJ Burg]

It's pretty easy to get in a situation where you want to select a canvas to refresh it, realize you clicked on the wrong one, and then everything moves around because the details sidebar has popped out. This is really jarring.

I think we should just force the details sidebar to always show on the canvas overview. If nothing is selected, then simply add a placeholder "No Canvas Selected" text like the left side has "No Recording Data".

[Radar WebKit Bug Importer]

<rdar://problem/35176082>

[BJ Burg]

It seems the inter-row spacing is a result of the detached inspector being very tall. I think we should stick to a constant inter-row spacing rather than letting it flex larger if the window has more space than needed. If we don't fix this, it will look really weird when the window is tall and narrow, as in the screenshot.

[Devin Rousso]

Created attachment 324886 [details]
Patch

[Devin Rousso]

Created attachment 324887 [details]
[Image] After Patch is applied

[BJ Burg]

Comment on attachment 324886 [details]
Patch

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

r=me

> Source/WebInspectorUI/ChangeLog:25
> +        Drive-by: these sidebar panels are now only used by the Canvas tab, so we no longer need to

Nice.

> Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css:45
> +    padding: 5px 15px 6px;

This ain't gonna work with RTL layout. Can you split out padding and make it flip correctly?

> Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js:-103
> -        this.contentView.element.appendChild(identitySection.element);

Nice cleanup.

> Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.js:150
> +        this.contentView.element.append(...this._sections.map(section => section.element));

Slick.

[Devin Rousso]

Comment on attachment 324886 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/CanvasDetailsSidebarPanel.css:45
>> +    padding: 5px 15px 6px;
> 
> This ain't gonna work with RTL layout. Can you split out padding and make it flip correctly?

This should be fine with RTL.  This is shorthand for `top right&left bottom`, so both `padding-right` and `padding-left` will have a value of "15px".  Am I mistaken?

[WebKit Commit Bot]

Comment on attachment 324886 [details]
Patch

Clearing flags on attachment: 324886

Committed r223991: <https://trac.webkit.org/changeset/223991>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.