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".
<rdar://problem/35176082>
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.
Created attachment 324886 [details] Patch
Created attachment 324887 [details] [Image] After Patch is applied
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.
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?
Comment on attachment 324886 [details] Patch Clearing flags on attachment: 324886 Committed r223991: <https://trac.webkit.org/changeset/223991>
All reviewed patches have been landed. Closing bug.