|Summary:||Web Inspector: Canvas Tab: clicking on a canvas card causes details sidebar to show and mess up card arrangement|
|Product:||WebKit||Reporter:||BJ Burg <bburg>|
|Component:||Web Inspector||Assignee:||Devin Rousso <hi>|
|Severity:||Normal||CC:||bburg, commit-queue, hi, inspector-bugzilla-changes, webkit-bug-importer|
|Version:||WebKit Nightly Build|
|Bug Depends on:|
Description BJ Burg 2017-10-25 10:03:16 PDT
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".
Comment 2 BJ Burg 2017-10-25 10:06:36 PDT
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.
Comment 4 Devin Rousso 2017-10-25 13:47:14 PDT
Created attachment 324887 [details] [Image] After Patch is applied
Comment 5 BJ Burg 2017-10-25 14:53:34 PDT
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 6 Devin Rousso 2017-10-25 15:01:25 PDT
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 7 WebKit Commit Bot 2017-10-25 16:13:23 PDT
Comment on attachment 324886 [details] Patch Clearing flags on attachment: 324886 Committed r223991: <https://trac.webkit.org/changeset/223991>
Comment 8 WebKit Commit Bot 2017-10-25 16:13:24 PDT
All reviewed patches have been landed. Closing bug.