Bug 154280 - REGRESSION (r196620): Web Inspector: DataGrid headers and resizers are misaligned when the scrollbar is visible
Summary: REGRESSION (r196620): Web Inspector: DataGrid headers and resizers are misali...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
Keywords: InRadar
Depends on:
Reported: 2016-02-15 22:05 PST by Nikita Vasilyev
Modified: 2016-02-17 22:03 PST (History)
8 users (show)

See Also:

[Animated GIF] Bug (678.68 KB, image/gif)
2016-02-15 22:05 PST, Nikita Vasilyev
no flags Details
[Patch] Failed attempt (3.64 KB, patch)
2016-02-15 22:20 PST, Nikita Vasilyev
nvasilyev: review-
nvasilyev: commit-queue-
Details | Formatted Diff | Diff
[Image] overflow-y: scroll (44.59 KB, image/png)
2016-02-17 20:53 PST, Nikita Vasilyev
no flags Details
Patch (1.76 KB, patch)
2016-02-17 21:12 PST, Nikita Vasilyev
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 2016-02-15 22:05:25 PST
Created attachment 271414 [details]
[Animated GIF] Bug

I just broke it in Bug 154276.

On the attached animated GIF, resizers have red background.
Comment 1 Radar WebKit Bug Importer 2016-02-15 22:05:59 PST
Comment 2 Nikita Vasilyev 2016-02-15 22:20:18 PST
Created attachment 271418 [details]
[Patch] Failed attempt

There are at least two ways of fixing this:

1. Keep "overflow-y: overlay" for DataGrid.

2. Synchronize the width of DataGrid's header with .data-container,
   which may have a scrollbar.

   This is tricky. I used an obscure WebKit-only overflowchanged event
   to detect scrollbar visibility. It turned out to be unreliable.
   "event.verticalOverflow" was "true" even when the scrollbar
   wasn't visible.
Comment 3 Timothy Hatcher 2016-02-16 09:35:48 PST
Another ride would be to use overflow-y: scroll.
Comment 4 Timothy Hatcher 2016-02-16 09:38:14 PST
Another option*
Comment 5 Nikita Vasilyev 2016-02-17 20:53:04 PST
Created attachment 271624 [details]
[Image] overflow-y: scroll

I experimented with "overflow-y: scroll".

Simply replacing "overflow-y: auto" with "scroll" creates
misaligned headers (on the attached image, at the top).

Adding "overflow-y: auto" to the DataGrid header fixes that,
but it looks odd (on the attached image, at the top).
Two scrollbars visually merge into one and it's misleading.

I think we should revert to "overflow-y: overlay".
"overflow-y: auto" works fine for the console, but for
DataGrids it's more complicated.
Comment 6 Timothy Hatcher 2016-02-17 20:56:19 PST
Alright, let's revert for DataGrid.
Comment 7 Nikita Vasilyev 2016-02-17 21:12:30 PST
Created attachment 271625 [details]

I'll need a light-bulb moment to make "overflow-y: auto" work.
Reverting to "overflow-y: overlay" for now.
Comment 8 WebKit Commit Bot 2016-02-17 22:03:28 PST
Comment on attachment 271625 [details]

Clearing flags on attachment: 271625

Committed r196743: <http://trac.webkit.org/changeset/196743>
Comment 9 WebKit Commit Bot 2016-02-17 22:03:32 PST
All reviewed patches have been landed.  Closing bug.