Bug 129627 – Web Inspector: probe sidebar should use overflow:scroll and split space evenly

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Blaze Burg]

Currently, one probe that receives a lot more data will flood out the others making them hard to see.

[Radar WebKit Bug Importer]

<rdar://problem/16216007>

[Katie Madonna]

Created attachment 225693 [details]
sidebar split between two probe sections

[Timothy Hatcher]

What is up with the scrollbars?

[Blaze Burg]

(In reply to comment #3)
> What is up with the scrollbars?

In the old branch I made them skinnier for the replay drawer's sidebar to save a little space, and apparently copied that idea into the probe sidebar. It can be safely removed.

[Katie Madonna]

Created attachment 225703 [details]
the patch

[Timothy Hatcher]

(In reply to comment #4)
> (In reply to comment #3)
> > What is up with the scrollbars?
> 
> In the old branch I made them skinnier for the replay drawer's sidebar to save a little space, and apparently copied that idea into the probe sidebar. It can be safely removed.

Yes, lets revert the scrollbar change. People still use the scrollbar to drag with the mouse, and this size is non-standard.

Also revert the whitespace changes in the ChangeLog.

[Katie Madonna]

Created attachment 227251 [details]
Patch

[Katie Madonna]

Created attachment 227252 [details]
Probes sidebar with two evenly distributed elements. Minus scrollbar styles.

[Katie Madonna]

Created attachment 227253 [details]
Show collapsed styles for probes sidebar.

[Timothy Hatcher]

Comment on attachment 227251 [details]
Patch

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

Some tweaks and questions remain before this should land. But looking good!

> Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.css:79
> +    min-height: 250px;

What happens if this min-height is triggered? Will that cause double scrollbars? That would be bad.

> Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.css:39
> +.details-section.probe-set .data-grid .data-container {
> +    top: 23px;
> +}

This is a layering violation. details-section is not related and at a higher level than this data grid. This rule should be in ProbeDetailsSidebarPanel.css.

[Katie Madonna]

Created attachment 227314 [details]
Patch

[Katie Madonna]

The min-height did trigger the double scroll bar, so I removed it and moved the CSS rule.

[WebKit Commit Bot]

Comment on attachment 227314 [details]
Patch

Clearing flags on attachment: 227314

Committed r165987: <http://trac.webkit.org/changeset/165987>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.