The real blog title should be: experimental live tab (thumbnail) preview in Arora.
The nice thing about hacking on WebKit is, whenever you feel you want to experiment with some whacky web browser features, you can just go ahead and implement it. The code base is clean and easy to understand. For example, I always wonder how difficult it is to have a tab thumbnail preview like in Opera, where you hover the cursor on a tab and it displays the preview of the web page in that tab. This makes it easy for you to work with dozens of tabs (I know someone in Trolltech who opens at least 30 tabs in a browser :-), because often you can have a glance of the tab before really switch to that tab.
Today [1] I decided to give it a try, of course with QtWebKit. The victim is Arora, the famous lightweight QtWebKit-based web browser. Giving it a thought, there are surely million ways to do it, from QPainter redirection, grabWidget() abuse, Widgets-on-Canvas with GraphicsView, scaled painting even to a GLWidget, you name it. As a starting point, I picked the simplest one [2]: ask the web view to render to a pixmap and scale the pixmap. After an hour or so, I got to put Arora on par with Opera, in terms of tab thumbnail preview [3].
However, the fun just starts now. Remember video with CSS reflection and HTML 5 video support? If you open a tab and plays a video there, then you switch to another tab, then hover the cursor on the previous tab, you can see that the preview is live! [4] The video even plays in that tiny little window.
Since it is impossible to show this live preview feature in a completely static screenshot, I made a 133-second screencast and put it on YouTube. See the video or watch it here:
As you can see, basically I opened three tabs: Google (0:04), a web page that plays Transformer trailer video (0:09), and another page that plays the same trailer but with added reflection effect (0:24). Then I switched back to the Google page (0:34) and placed the mouse cursor on the trailer tab (0:38). There you can see the minified trailer running nicely. Whacky? You bet :-)
There is a big room for improvement, though. For starter, I just did a hack and repainted the preview at 10 fps even though nothing has been changed in the web page (e.g. the page contains no video or animation). This needs to be optimized, say by finding out a way to update only when it is absolutely necessary. Also, the preview scaling could be better, maybe using a QGLWidget for the preview viewport so the graphics card does the scaling for use. Once real full-page zoom is landed for QtWebKit, it is also interesting to explore it for painting the preview. I'm open for more ideas, especially tricks that can push the performance.
[1] After few days only focusing on bug fixing and other usual stuff. Yes, even QtWebKit in Qt 4.4.2 will receive some love and a bunch of bug fixes.
[2] The method of course can be improved later on.
[3] The code can be found in my cloned Arora repository, under the live-preview branch.
[4] Quite a coincidence, but the radio just plays I used to roll the dice, ..... But I reckon you assume that already.
3 comments:
Very cool :-)
This reminds me that Arora urgently needs a plug-in architecture. This makes development easier for outside developers and users can choose if they want/need a small speedy browser core or a browser full of features and eye-candy.
I like it. You say Webkit? How difficult would this be for Konqueror (khtml iirc)? One of these small but utterly useful features I would love to see in my favourite webbrowser/filemanager/documentviewer/.../wondermachine. To bad that I'm not a developer.
I hope this thumbnail thingie is an extension, not part of Arora itself. I want to use Arora in the future and leave Firefox because Arora's aim is to be simple and lightweight. Firefox started with similar goals but evolved into a feature-packed beast. If Arora starts to implement every god damn feature so early then I can stick with Firefox.
Post a Comment