Bug 154280

Summary:

REGRESSION (r196620): Web Inspector: DataGrid headers and resizers are misaligned when the scrollbar is visible

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bburg, commit-queue, graouts, joepeck, mattbaker, nvasilyev, timothy, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
[Animated GIF] Bug	none
[Patch] Failed attempt	nvasilyev: review-, nvasilyev: commit-queue-
[Image] overflow-y: scroll	none
Patch	none

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

<rdar://problem/24670567>

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]
Patch

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]
Patch

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.