[webkit-dev] Can you help me with a problem obtaining the size of content after a WebView has been resized?

Tue Feb 14 15:56:06 PST 2012

Hi. 

I'm trying to use WebKit WebView inside a view-based NSTableView (OSX 10.7.2) and it works fairly well except for one (for me) show-stopper problem.

My table is using a custom NSView (XKMessageView) that contains two subviews. The first is an NSView with a button, the second is a WebKit WebView.

Because the web content can be of variable length (and because I do not want to use scrollbars in the web content) I am using a variable row-height table to show the selected row tall enough to fit the whole of the web content. I do this by implementing the NSTableView delegate method:

- (CGFloat)tableView:(NSTableView *)tableView heightOfRow:(NSInteger)row

To implement this method I need to answer the question "What height is the web content?" Looking around I found that one approach was to use:

webFrame.frameView.documentView.frame.height

and, on the face of it, this seemed to work pretty well. Now the selected row could be expanded to show the full web content for that row.

Now when the table view is resized the web content may end up taller or shorter and depending on the new size of the view. So I had my delegate implement the notification:

- (void)windowResized:(NSNotification *)notification

In response to the window being resized the delegate asks the WebView for it's new desired size and then invalidates the row height for the selected row. I tested making the window very narrow and, just like magic, the WebView grew taller and taller in response.

Then I made my window very wide again and this is where I hit my problem.

The WebView did not get shorter as it had gotten taller. Or, rather, it did but only very slowly and by repeatedly resizing the window. If you want to see what I mean this 30s screen capture highlights the effect:

http://f.cl.ly/items/1h1s2W05133m3d3t2v2J/ScreenFlow.mov

What you can see is several rows in a table, each containing a view with a button and then a WebView. I shrink the width of the window and the WebView for the selected row gets taller in response. But when I drag the window wide again it doesn't immediate shrink back to it's original height. The content shrinks but the view remains large and leaves a big white "gap" behind it.

However if I keep resizing the window by waggling the window edge (forcing repeated calls to frame.height) then the view does, gradually, shrink back to fit the content. In the console I can by logging the value of documentView.frame.height that, in successive notification cycles, it gradually decreases until it stablises at the value that "fits the content".

So, when the view gets narrower the height "snaps" to the right value. When the view gets wider the height "decays" to the right value.

I have also tried, as an alternative to documentView.frame.height, using the DOM API to access clientHeight, scrollHeight and offsetHeight properties of the <body> element of the WebView document. In the case of clientHeight it does not vary at all, and the scrollHeight and offsetHeight show this same curious property of decreasing only over time.

So I am stuck very close to my goal. The WebViews in the table work, they grow taller to accommodate the containing view being made narrower. But they do not grow shorter in the same way leaving a big unsightly gap.

Here is my test code:

https://gist.github.com/7aba5c24046462284c95

If anyone can help me understand how to achieve my goal or offer me any further pointers in how to explore the problem I would be most grateful.

Kind regards,

Matt

-- 
http://mattmower.com/