Bug 82193 – [REGRESSION] Web Inspector: column caption delimiters are misaligned in DataGrid

• Component: Web Inspector (Deprecated)
• Status: RESOLVED FIXED

[Yury Semikhatsky]

Created attachment 133780 [details]
Screenshot 1

Caption delimiters positions don't match those of the column delimiters.

[Yury Semikhatsky]

Created attachment 133781 [details]
Screenshot 2

[Yury Semikhatsky]

This is a regression introduced in http://trac.webkit.org/changeset/111742

[Robert Hogan]

Created attachment 133892 [details]
Reduction

[Robert Hogan]

(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)

[Robert Hogan]

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

[Robert Hogan]

Created attachment 134116 [details]
Patch

[Yury Semikhatsky]

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?

[Timothy Hatcher]

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

[Julien Chaffraix]

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.

[WebKit Review Bot]

Comment on attachment 134116 [details]
Patch

Clearing flags on attachment: 134116

Committed r112419: <http://trac.webkit.org/changeset/112419>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.

[Robert Hogan]

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.

[Darth]

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.

[Darth]

Created attachment 136359 [details]
Another attachment to show the misaligned headers, dom is using fixed table layout too.

[Julien Chaffraix]

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

[Darth]

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.