Bug 82193

Summary: [REGRESSION] Web Inspector: column caption delimiters are misaligned in DataGrid
Product: WebKit Reporter: Yury Semikhatsky <yurys>
Component: Web Inspector (Deprecated)Assignee: Robert Hogan <robert>
Status: RESOLVED FIXED    
Severity: Normal CC: apavlov, bweinstein, jchaffraix, joepeck, keishi, loislo, pfeldman, pmuellr, priyajeet.hora, rik, robert, timothy, vsevik, webkit.review.bot, yurys
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Screenshot 1
none
Screenshot 2
none
Reduction
none
Patch
none
table column mismatched size
none
Another attachment to show the misaligned headers, dom is using fixed table layout too. none

Description Yury Semikhatsky 2012-03-26 05:22:14 PDT
Created attachment 133780 [details]
Screenshot 1

Caption delimiters positions don't match those of the column delimiters.
Comment 1 Yury Semikhatsky 2012-03-26 05:22:35 PDT
Created attachment 133781 [details]
Screenshot 2
Comment 2 Yury Semikhatsky 2012-03-26 07:10:53 PDT
This is a regression introduced in http://trac.webkit.org/changeset/111742
Comment 3 Robert Hogan 2012-03-26 14:17:24 PDT
Created attachment 133892 [details]
Reduction
Comment 4 Robert Hogan 2012-03-26 14:43:07 PDT
(In reply to comment #3)
> Created an attachment (id=133892) [details]
> Reduction

In the reduction the width specified at:

        th.corner {
            width: 15px;
            border-right: 0 none transparent;
        }

used to result in a total column width of 15px, i.e. cell width of 15px minus borders (border-left:1) and padding (left + right = 2) plus borders (border-left:1) and padding (left + right = 2). 

But now column width is set to the width of the cell plus its left padding plus its right padding plus half its left border plus half its right border in the 
collapsing border model, and the same but using full border widths in 
the separated border model. So 18px in total.

In datagrid.css, we have have:


.data-grid th.corner {
    width: 15px;
    border-right: 0 none transparent;
}

and the padding is 4px on either side. So this is now getting added in to give a column width of 24px or so (15px + 4px left padding + 4px padding + 1px for the borders). Since the width of the column now includes the padding, doing:

.data-grid th.corner {
    width: 6px;
    border-right: 0 none transparent;
}

fixes it. (6px + 4px + 4px + 1px = 15px)
Comment 5 Robert Hogan 2012-03-26 14:44:20 PDT
(In reply to comment #4)
> 
> But now column width is set to the width of the cell plus its left padding plus its right padding plus half its left border plus half its right border in the  collapsing border model, and the same but using full border widths in 
> the separated border model. So 18px in total.

See http://lists.w3.org/Archives/Public/www-style/2011Apr/0743.html for more discussion on this.
Comment 6 Robert Hogan 2012-03-27 12:37:10 PDT
Created attachment 134116 [details]
Patch
Comment 7 Yury Semikhatsky 2012-03-28 06:12:06 PDT
Comment on attachment 134116 [details]
Patch

Do we have any estimation on how many users on the web this change to tables layout may affect?
Comment 8 Timothy Hatcher 2012-03-28 07:34:45 PDT
(In reply to comment #7)
> (From update of attachment 134116 [details])
> Do we have any estimation on how many users on the web this change to tables layout may affect?

I think table-layout: fixed is pretty rare.
Comment 9 Julien Chaffraix 2012-03-28 09:24:37 PDT
Robert asked me to comment here on the change. I agree with his analysis and fix. Another way would be to add border-sizing: border-box to the CSS and not keep the width as-is. I haven't tested that fix though.

> Do we have any estimation on how many users on the web this change to tables layout may affect?

I don't have a good metric on that. We are matching Firefox in our rendering now so this may limit the badness.
Comment 10 WebKit Review Bot 2012-03-28 11:32:46 PDT
Comment on attachment 134116 [details]
Patch

Clearing flags on attachment: 134116

Committed r112419: <http://trac.webkit.org/changeset/112419>
Comment 11 WebKit Review Bot 2012-03-28 11:32:51 PDT
All reviewed patches have been landed.  Closing bug.
Comment 12 Robert Hogan 2012-03-28 13:33:14 PDT
There's still a bit of flakiness in the 'Profiles' panel that depends on the width of the window. The way the datagrid panel is designed it depends on the corner <th> ending up at 15px in all cases. This is how it works out most of the time, but fixed table layout will scale up fixed width columns if the total of the percent width columns is still less than the total logical width of the table.

For some reason, beyond a certain size of window the profiles panel allocates less than 100% width to the 4 columns combined - this triggers fixed table layout to expand the corner column at the end, usually by one pixel.

So this flakiness probably needs to be addressed in dataGrid.js. It looks like a separate bug - and one that has always been there.
Comment 13 Darth 2012-04-09 18:05:47 PDT
Created attachment 136357 [details]
table column mismatched size

I am using dojo toolkit, and the grids in there also use table-layout: fixed. With Chrome 19+ the grid headers are starting to misalign. I am guessing this bug is causing the regression? Latest webkit nightly (at the time of typing this) is also showing the issue.
A file that I tried https://github.com/SitePen/dgrid/blob/master/test/extensions/ColumnResizer.html, see screenshots too.
Comment 14 Darth 2012-04-09 18:06:56 PDT
Created attachment 136359 [details]
Another attachment to show the misaligned headers, dom is using fixed table layout too.
Comment 15 Julien Chaffraix 2012-04-09 18:24:39 PDT
(In reply to comment #14)
> Created an attachment (id=136359) [details]
> Another attachment to show the misaligned headers, dom is using fixed table layout too.

Could you please open a new bug with a standalone test case (CC'ing me and Robert)? We like to keep bugs separated and this bug - about the WebInspector's DataGrid - was already solved.
Comment 16 Darth 2012-04-09 19:29:59 PDT
Sorry for the spam and posting above, I noticed the bug status on top said UNCONFIRMED, so thought it was still open and not fixed and issue seemed very similar to what I was experiencing. In either case I think I jumped the gun due to some border-box box-model changes - http://i.imgur.com/KdWO8.png and it would seem that I got bit by https://bugzilla.mozilla.org/show_bug.cgi?id=338554 where table cells were not getting the border-sizing. So you can just ignore the last two comments, thanks.