Thursday, January 18, 2007

More on WebKit Qt

Two days ago Lars and I sat down and did the initial implementation of classes which will represent the public API for the Qt/KDE version of WebKit. In KHTML almost everything has been handled by KHTMLPart. We'd like to avoid having one huge object that does everything this time so we went with similar abstraction to the one present in WebCore - meaning Page/Frame distinction. The top level classes are now: QWebPage which represents (surprise - a web page) and QWebFrame which is (another shocking discovery) a frame (remember that a page can have multiple frames).

It's pretty interesting what one can do with it. Me being me (aka. weird) had to try to do something visually funky so I made our test browser have a transparent overlay progress loader that is hidden when nothing is being loaded and made the pages render in grayscale until they are fully loaded, so a loading page looks like:And before someone complains - no this won't be a default and won't even be included in WebKit by default, it's just to give people a rough idea what one can do with this framework (and yes, the filter that I did for it messes up fonts but I just didn't even bother to make it flawless) Or more precisely I wanted to make sure one can do anything. Here's another example with webpage rotated a little bit (this time without grayscale filter on it) :
So, yeah, I think you'll be able to do a lot of new and pretty exciting things with WebKit once KDE 4 hits the streets.

25 comments:

Jessica said...

A real informative blog indeed. Thanks for the info

[Knuckles] said...

The font rendering is pretty strange on the second image.

Is it because it was just a "quick hack" or it's really a qt bug?

Will said...

Excuse me, but for me this is maybe one of the more interesting idea about web navigation usability.

The transparent overlay progress loader give a better overview of what is being done and you don't need to move your eyes from the top to the bottom.

The greyscale to show that the page is not fully loaded is also very interesting as a visual feedback for the user. It could be also in color but with a lower luminosity, etc ...

IMHO 2 ideas which should seriously consider for inclusion in kde4 for konqueror ... The ideas are innovative and visualy usefull.

Nicolas said...

Same as will.

I find this 2 ideas really interesting, why not test them ?

Maybe it needs to be discussed with usability people.

Anonymous said...

Zack, thanks for the update.

Ironically enough your posts are a little painful to read in Konqueror 3.5.5 because scrolling down past large images is very slow - although I very much appreciate you posting them.

Firefox used to suffer from this as well, although it seems better in 2.0.

The KDE 4 build of Konqueror seems somewhat better in this respect as well.

Anonymous said...

Nice to see this fancy visualisation.
But what's more interesting for me:
Does this mean WebKit is going to be KDE4's HTML rendering engine? Or are you doing a "simple" Qt binding of WebKit (for Trolltech customers?)

Anonymous said...

Are WebKit and Qt bindings going to be available on M$ Bimbows too?

Thanx

S. said...

Zack,

+1 on the visual feedback provided by your desaturating overlay and the progress loader. So long as the effect doesn't put too much of a strain on system ressources, and that it's been usability-approved (for instance, the progress loader might move to the other side of the page when the mouse comes close to it, lest it hides something the user might wish to click), I'm very much all for it.

Also, I'd really like to know how you can come up with so many awesome examples at such a quick pace. :)

Thanks for this fascinating post Zack!

Anonymous said...

Besides the fact that your examples are just proof of concept I really like them. Rotating a web page? Why not? Certainly of use. And a grey scale thingy instead (or in addtion) of a progress bar? Yes sure, excellent idea. You can see whats going but in the same time you know "My site is not yet completely there". Why not use if it basically working? Give it a try.
Konqueror is not a simple (usual) browser that does everything the same way as other browsers do. It's THE KONQUEROR so conquer the web with new concepts (and these are certainly new and unique!).

sAra said...

the trasparent progress loader is something I woul like to hav eon my browser. You always do this coll stuff that are just amazing

Paul said...

In response to everyone who says "yeah, cool concept, lets have that black+white loading thing in Konqueror!":
Sure, it's pretty, but there are monumental problems with doing that. Large pages can take ages to load (on broadband, let alone on dial-up). While the page is loading, you will be sitting there forced to view a page in black and white. For the (many) pages that use colour to convey some kind of meaning or experience, things will suck. And what about those pages that -- due to some server-side issue -- fail to ever fully load? That'll be great fun.

So yes, fun demonstration. Don't fall off your seats, kids ;)

Anonymous said...

The place where I see most potential is incremental search. Many times I fail to see search results. With all page grayed out except search results, it'll be a lot easier, I guess.

shamaz said...

This is exciting!
But for the fancy feature, I have to agree with Paul. In this state, this is not usable for looong web pages that take ages to load.

More importantly... Zack you're talking about a test browser. Where can we download it ? I don't know of any way to test WebKit on linux or Windows (excepting an out of date version of Swift).
Mac users have http://nightly.webkit.org/, is it possible to make nightly builds for linux with your test browser ? Even if it is a very basic browser, that would let us *see* why everybody is saying Webkit is better than KHTML ;).

Thank you !

Anonymous said...

About hte fancy stuff: I love it. If you would modify it to slowly colour in depending on the percentage already finished, *and* if you can also click on the half loaded stuff, than it is an almost perfect solution for a real understandable feedback of page loading!

With the colour-in you would avoid problems of people who need similar colours to distinguish (if you have colours you cannot distinguish in grayscale, than it is more a design problem I guess), and with pages loaded only 95% - well, you wouldn´t really see it because most of the colours are already there.
But, as I said, you should be able to press buttons all the time!

Zack: you are a really creative guy, I would like to have your creativity!

Anonymous said...

About my idea :
I always dreamed to be able to hide some frames on some web page, because they take more space on my litle screen than the content I whant to see.
And I have to scroll horisontaly too often.

The thing is you said that frames were separated in the begining, so may be easy to do ?

For the desaturating, I personaly never care of the actual state of loading, no feedback at all would be just nice, but a load state spy, warning if the page have stoped loading since a certain amount of time, may be interesting to me.

Finaly, your blog is very nice.

thom said...

Hi !
Very interesting post as usual and really impressive.

Could it be useful for animating html-javascript widgets (plasmoids) for dashboard like effects ?

I can also feel some nice tabs transition effects on the horizon !
And maybe a search bar for konqui that loads some results links and animate those with smooth zoom effects...

Also would it make things possible to create a light crossplatform qt/webkit webbrowser ?

thx,
thom

Anonymous said...

Could you please provide some build instructions for building webkit on linux?

Anonymous said...

Maybe the colours can be a configuration option. Visualy impaired people can benefit from this by setting it to default on black/wit or any other colour combination.

TunaTom said...

Being a developer, I'm regularly stunned by the fast pace you not only come up with new ideas but even implement them "on the fly".

Anonymous said...

and what exactly is the use case for rotated html?

Anonymous said...

QtLauncher did not show HTML embedded SVG graphics, when can we expect that?

Thnx

Zack said...

As to what's the point of rotating a webpage - the point is to show that as far as rendering of the contents goes one can do pretty much everything, I said that in the blog. Reading isn't hard - utilize the skill.
As to other comments, I really appreciate them but we're working on this thing so just bare with us for now. When we'll feel it's usable by the public and we'll feel confident enough to start accepting reports/requests from the public, I will let you know :) Then we can start discussing things we can do with it, new visual metaphors and usability related enhacements.

Timmmm said...

It looks to me like rotated Qt text isn't grid-fitted/hinted properly or something. The baseline is really wiggly. Does it use FT_Set_Transform to do the text, or does it render it horizontal and then rotate it?

fabrizio said...

This is one of the most interesting projects I saw in the last months, IMHO ;)
As far as I could understand, the project will allow us to embed a "real " browser engine in Qt applications, am I right? This means it should work on both Win32, Linux and Mac OS X, shouldn't it?
this would be great, as I will soon need to embed a *good *browser (this means no QTextBrowser) in a cross platform (this means no KHTML) open source project.

sunshine_uyl said...

Could I use your open source OpenVG on Android system?

Thanks!