Diving into WebKit

Blog post by stippi on Tue, 2010-02-23 19:11

First of all, I want to thank Haiku, Inc. for giving me the opportunity to concentrate fully for a while on the WebKit port and browser! This is an awesome chance that I intend to make full use of.

At the moment, I have mixed feelings. Not about writing blogs. Not about working on WebKit. But about using the new WebKit browser to write the blog entry, haha! I've seen it crash, although in the last days, it has become pretty stable. After we upgraded to a newer WebKit version as the basis for the port, the frequent random crashes have almost disappeared and I saw only one crash in three days. Compared to one every few minutes before.

But still, I am of course pushing it a bit by eating my own dog food so early on. Lucky for me, I have integration with the system clipboard already working, so I can at least copy & paste my writing into Pe from time to time.

I'll try to give an overview of how I came to work on the WebKit port and what I've done so far. Basically, I woke up one day and thought Haiku really needs a modern, efficient and well integrated browser - now. In the beginning it wasn't clear to me yet, what the best approach for this would be. I started out with NetSurf and looked into that port. Francois has done some solid work there, but the flickering annoyed me and I've looked a bit into how this could be fixed. At the same time, I tried a few websites and it just wasn't convincing to me that NetSurf would be a full featured browser soon. It's certainly an awesome project, but it looked to me like it's not in the same advanced state as other engines. So I've started to consider Firefox and WebKit. For Firefox, I've heard that the problem is the Cairo port for Haiku. So I've downloaded the Cairo source tree and pretty much rewrote the BeOS port under the presumption that the existing Cairo software rendering backend could be used to draw into BBitmaps to get an instantly fully compliant implementation. Then however I failed to get the Makefiles set up correctly for building the testing framework. At the same time, it became clear through talks with Fredrik Holmqvist, that porting a current Firefox would be much more work than just porting Cairo to Haiku.

So WebKit began looking more and more attractive. I've quickly learned that Maxime Simone was keeping the WebKit port updated since his work on it during the Google Summer of Code 2009. I checked out the repo and began working on getting it to compile. Maxime was stuck at some linking problems, but after a while I figured out what those were and then Maxime helped me get the rest of the port into compilable state again. After I finally looked at the HaikuLauncher, which is the testing application to embed a WebKit view into an application, render a website for the first time, I've been working on the port and the browser ever since.

I think the infrastructure for ports in the WebKit source tree has improved a lot since Ryan Leavengood did the initial port in 2007. One of the last things that Maxime did was enabling the pthread threading backend. When I ran the HaikuLauncher for the first few times, I ran into all kinds of asserts, because WebCore code was executed on the wrong thread. My first work was therefor to design a proper threading concept for the WebKit code. Maybe it's a good time to mention that WebCore and JavaScriptCore are the core frameworks, the actual web engine. WebKit is a thin layer on top of WebCore that provides an API for embedding and controlling WebCore on each respective platform. So WebKit is where our BWebView and BWebPage will live, while WebCore is the actual backend. The Haiku port is thus separated into these parts. Three parts actually: There are all the files in WebCore which provide platform native implementations for various aspects of WebCore.There is for example GraphicsContextHaiku, which implements the WebCore rendering backend API via BView drawing functions. In WebKit, there is two sets of files. One part is the actual WebKit public API that the Haiku port provides, the other part are the so called WebCore support classes which bridge between WebCore and WebKit.

Work had and has to be done in all three parts. Some stuff was already finished from when Ryan worked on the port, other things were finished by Maxime, but a lot of the code was still stubbed out. Lucky for me, the port also consist of it's own jam based build system, which I presume Ryan wrote. It's nice not having to deal with that as well. After I fixed and implemented a great deal more code, HaikuLauncher became somewhat usable for surfing, and more people began to be excited about the WebKit browser. Michael Lotz has been crucial in tracking down some hard to fix memory corruption bugs and in extending the CURL network layer backend in WebCore to support htdigest authentication. Rene Gollent has implemented FileChoser support and tabbed browsing in HaikuLauncher. It was of course very encouraging to get support from so many people. Each day, the browser became more usable. And sometimes fixing one little thing, even if it was very hard to track down, can suddenly enable a whole bunch of websites.

So far I think my choice to invest into WebKit was a good one. It's possible to make a very native feeling browser, although some compromises have to be made. While WebCore is essentially single threaded, at least the native drawing happens in one app_server thread per page. And this will of course improve over time, as WebCore itself will make more use of threading. In terms of feeling native, I believe HaikuLauncher has left the Firefox port far behind. It even renders faster in many situations, sometimes drastically faster.

Today, I've finally found the problem with frames and iframes not being loaded and you can thank Ingo Weinhold and praise his source level debugger for that. This too made a great deal of sites work suddenly, like maps.google.com, the full version of mail.google.com, www.gmx.net finally works... and I've found the cause of some annoying clipping problems. If you want to give the HaikuLauncher a spin, you need to run a GCC4 or hybrid Haiku system. And it needs to be pretty recent, since we've also fixed bugs and added features in Haiku to support stuff for WebKit and HaikuLauncher. Have fun! But keep in mind it can still crash. Just because I managed to finish this blog doesn't mean you should trust it, yet. :-D

Download WebPositive (SVN revision: 444)

P.S. I've stolen the awesome icon from Meanwhile's great BB icons package.

Comments

Re: Diving into WebKit

Very very good I hope to see it included in the alpha 2 release!

Only problem was when I tried to use Youtube HTML5 version... the player loads correctly, there was a blinking html5 in the center of the black video and nothing happens... the CPU usage was >50% a little high.

Maybe is ask too much to play an HTML5 video for an alpha release my test was a little "bad" :-)

Re: Diving into WebKit

fano wrote:

Only problem was when I tried to use Youtube HTML5 version... the player loads correctly, there was a blinking html5 in the center of the black video and nothing happens... the CPU usage was >50% a little high.

Maybe is ask too much to play an HTML5 video for an alpha release my test was a little "bad" :-)

Our WebKit port does not yet implement the needed platform support for HTML5 audio and video. Though given Stephan's experience with both the Haiku Media Kit and the Haiku MediaPlayer application, I don't think adding this support would be difficult for him. Of course there are other more important features and priorities to take care of first.

But because this also interests me, I'll bring it up on our Haiku WebKit port mailing list.

Re: Diving into WebKit

Yes, I get the same result with the downloadable version. I am not aware of any changes that could have had an influence, but my development version runs through this page. That's why I assumed the downloadable version does as well. The next package should work in any case.

While I type this comment, I notice that my work on the timer just now totally improved stuff. The difference is like night and day. Don't know if you tried writing text, but now it's totally smooth, even for much longer text. With the older version, text editing became painful very soon. Like after three lines of text or so...

Re: Diving into WebKit

Ok, I've uploaded one more update. The rewritten timer implementation brings vast improvements. For something as basic as typing text or something more advanced, like playing Asteroids in WebPositive, hehe. I've also fixed a bunch of other stuff, like crashes with the download window. And obvisouly I split WebPositive and HaikuLauncher code, so now the browser has the real name. Have fun!

Re: Diving into WebKit

Stippi,

Will be possible create a flash plugin to it?

Re: Diving into WebKit

Awesome work!

Are you going to add arrow key page navigation?

This is like NetPositive on steroids!

Re: Diving into WebKit

Hi,
at first WOW, good work and i a happy about the name "WebPositiv".
It works faster then FF :-)
I hope we can see in the next time more good stuffs.

I hope we can see a little Roadmap.

Re: Diving into WebKit

This is my personal roadmap:

  • Implement auto completion for the URL text field.
  • Improve the Go menu (a lot).
  • Add a settings window and allow to specify where downloads go.
  • Make downloads restartable.
  • Monitor downloaded files and indicate when a file has been removed.
  • Add bookmark storage.

More long term goals:

  • Implement persistency across sessions.
  • Implement a search text field with Open Search backend.
  • Implement an ad blocking solution.
  • Implement network resource caching.
  • Implement plug-in support and try to make the Gnash plugin work.

Some of these items are a lot of work. I will work on whatever I feel most motivated on at any given time. The order in which I outlined the items may not be the order in which I will work on them. :-)

Re: Diving into WebKit

This roadmap (plan) looks excellent! Whenever you finish your personal part (first), it will become a pretty much usable browser (it is almost one now).

Thanks for your work, which makes Haiku more usable every day.

crash on facebook login

btw the latest (241?) crashes on login to facebook.com

is it known?

Re: Diving into WebKit

Improve the Go menu (a lot).

I never used the go arrow, could one please explain how/for what to use it!

Add a settings window and allow to specify where downloads go.

Yes I like that. An other possibility would be to store the downloaded files in boot/home/Downloads by default, instead using the Desktop (which on another point of view... is a good choice for anyone who don't know where WebPositiv will store the downloaded files in Haiku.)

Add bookmark storage.

Could be drag and dropable. (Drag the url to the deskbar for bookmarking it or to your bookmark tab/folder/icon.)

By Humdinger:
Tab key jumps from column to column. Alt+Return performs the action in a new tab.

Tab key is working already, thx Stephan. Shouldn't it be Alt+Tab?

Browsing habits I am used to:

  • ...change tab by pressing alt+tab
  • ...use of page up/down and pos1/
  • ...Ctrl+ArrowKey left for go back and vsa.
  • ...Pressing right mouse button together with left mouse button will go one page back (Opera).
  • ...Drag and Drop of text to the Deskbar
  • ...Drag and Drop of images to the Deskbar (right click while dropping will open the context menu for choosing the mime/type png, jpeg... the BeOs/Haiku way.
  • ...the closeing "x" on the tab should be allways on the same position, so you can easily close more Tabs by clicking on the same place (No resizing of tabs likd in firefox).
  • ...support for the new video/audio tag in HTML5 would be better than flash/gnash for the moment.
  • ...double click on empty tab area will open a new tab.

More long term goals:

  • ...firebug for Haiku.

btw. I cannot move the cacert.pem file by drag and drop it on the "Move cacert.pemhere"-folder have to use the context menu instead... maybe it is thought to be like this?

Re: Diving into WebKit

Bruno Brocoli wrote:

btw. I cannot move the cacert.pem file by drag and drop it on the "Move cacert.pemhere"-folder have to use the context menu instead... maybe it is thought to be like this?

That was a particularly slippery one, fixed by Rene in http://dev.haiku-os.org/changeset/35679.

Re: Diving into WebKit

Amazing work, Stippi!

Is it possible to add proxy support to your roadmap or is there a config file I can hack?

Chris

Re: Diving into WebKit

You know what I'd like to see with regard to the auto-completing URL field:
Instead of using it only for entering an URL, combine it with bookmarks and web searching. Instead of normally drop down a list of matching recently visited sites, provide a drop down with 3 columns:

1. The usual visited sites.
2. Matching bookmarks.
3. A list of search engines which are called with the entered string.

Tab key jumps from column to column. Alt+Return performs the action in a new tab.

Unrelated: When does one use the "Go" button? I can't seem to find a usage pattern...

Regards,
Humdinger

Re: Diving into WebKit

I'm probably breathing hot air here, as it's probably a planned feature, but whenever a horizontal scrollbar appears, an ugly grey box appears where the two scrollbars (horizontal and vertical) meet. I propose a solution:


(click to enlarge)

Top pic is what it is now, bottom is what i poropse as a solution. It's also nice on screen real-estate

Re: Diving into WebKit

The split horizontal scroller and status bar could get a little cramped for narrow windows or when there are add-ons which icons/status would fit nicely in the status bar.
Another idea to fill that corner when there are h&v scrollbars is that WonderBrush widget that lets you scroll in both directions at the same time.

Regards,
Humdinger

Re: Diving into WebKit

Stippi!

With rev. 241 the WebPositive seems 98% usable to me.

More some revisions going up to 100%

awesome work!

Need include it into Haiku Build and optional packages already

THANKS!

Re: Diving into WebKit

Just uploaded a newer package. Changes include:

  • Fixed a possible deadlock when resizing the browser window.
  • When asked to open new pages, the browser will first look if there is already a browser window on the current workspace and open the page in a new tab in that window.
  • Fixed a crash with certain websites.
  • Ryan added keyboard shortcuts for switching to tabs 1 to 9 via Cmd-1...9 and 0 for tab 10.
  • Ryan also added preliminary page scrolling via keyboard keys, although I just realize that it disturbs text area editing quite a lot,will probably post a new package with a fix for that soon.
  • Implemented new infra structure for maintaining global and per page settings. This is not exposed in the GUI yet, but was necessary for...
  • favicon support!

Have fun!

Re: Diving into WebKit

And revision 262 swiftly fixes the keyboard event issues I didn't notice before posting the previous comment. :-)

Re: Diving into WebKit

Great work so far Stippi. Just downloaded a new nightly to try it out and it's working quite nicely. Startup time is awesome! Only slight lagginess is in scrolling, but I guess that's the app-server not having hardware blitting..

Keep it up, looking forward to trying out future releases!

Simon

Re: Diving into WebKit

The laggy scrolling comes from redrawing the entire content each time. It's a problem the Haiku port shares with other WebKit ports. I have not investigated this issue yet, since there are a number of other things to take care of first, but I believe it will be possible to copy the contents in part and redraw only exposed areas.

Re: Diving into WebKit

Never mind... you stirred my interest and smooth scrolling is implemented in r272. :-)

Re: Diving into WebKit

stippi wrote:

Never mind... you stirred my interest and smooth scrolling is implemented in r272. :-)

Great stuff, thanks!

btw: the reason for the double full stop in my previous post was some weird bug where the caret in the text area wasn't correctly aligned with the text. I thought it might be a BTextView issue but StyledEdit seems fine. I usually turn off hinting in Appearance prefs which might have something to do with it. I'd also increased the default font size to 13.

Simon

Re: Diving into WebKit

Yes!!! one more nightly build!!!

Re: Diving into WebKit

I know you have a long list of items to do, but is there any chance you can add in an 'About' menu item that version number of the browser. I have mixed up version a few times when moving copies between machines.

This is also a great place to add any copyright info and names of helpers.