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

Nikita Vasilyev

Reported 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.

Attachments
[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
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2016-02-15 22:05:59 PST

<rdar://problem/24670567>

Nikita Vasilyev

Comment 2 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.

Timothy Hatcher

Comment 3 2016-02-16 09:35:48 PST

Another ride would be to use overflow-y: scroll.

Timothy Hatcher

Comment 4 2016-02-16 09:38:14 PST

Another option*

Nikita Vasilyev

Comment 5 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.

Timothy Hatcher

Comment 6 2016-02-17 20:56:19 PST

Alright, let's revert for DataGrid.

Nikita Vasilyev

Comment 7 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.

WebKit Commit Bot

Comment 8 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>

WebKit Commit Bot

Comment 9 2016-02-17 22:03:32 PST

All reviewed patches have been landed. Closing bug.

Note You need to log in before you can comment on or make changes to this bug.