Monday, December 05, 2011

Accelerated Composting in WebKitGtk+

During the WebKitGkt+ hackfest 2011, I applied Accelerated Compositing to WebKitGtk+ using Clutter so it started working like the webkit-clutter port. Finally, I was able to run the same demo in GtkLauncher as follows:

This is not upstreamed yet, but Imy patches are getting reviewed. Gustavo and Martin are helping me  write more good patches. Thanks!

I think that this hackfest was done well. You can check more news about the WebKitGtk+ hackfest from other blog posts:

I would like to thank my employer Collabora, Igalia and the GNOME Foundation for helping us attend the hackfest. See you at the next hackfest!

Wednesday, November 30, 2011

WebKitGtk+ Hackfest 2011

(C) Mario 

Gustavo and I are attending the WebKitGtk+ hackfest 2011 which is held at the Igalia office in A Coruña, Spain like the last time. This is an annual event for WebKitGtk+ maintainers to work together at the same place.

We made a list of work items on the blackboard as usual on the first day.  You can find these topics in the wiki. My major work item is to apply Accelerated Compositing implementation of the clutter port to WebKitGtk+. If I finish it a bit earlier, I will try to hack my unresolved patches such as IME support in WebKit2Gtk+ and applying Tiled Backing Store to WebKitGtk+.

Happy Hacking!

Wednesday, November 23, 2011

Talking about GNOME3

I gave a talk about GNOME3 at Daum DevOn conference in Korea. Daum is a popular web portal site in Korea like Yahoo. They invited many developers & user communities to the conference, so the GNOME Korea community had a chance to introduce GNOME3 and the community to the attendees.

I was so glad to introduce GNOME3.2 and the infra technology like GTK+, Clutter, GStreamer, WebKitGtk+, Telepathy and GObject-Introspection. Here are the slides and some photos.

Monday, October 03, 2011

My lovely baby girl

My baby girl
Last Sunday, the 2nd of October, was the most memorable day in my
life. Because I was married on the same day 6 years ago and I became a father for the first time. Actually, the birth was scheduled for the 13th of October, but it seems that she was born 2 weeks earlier to celebrate our wedding anniversary. :-)  She is a little bit smaller than other babies, but healthy and well.

I hope that all goes well with my baby.

Saturday, August 27, 2011

Desktop Summit 2011

It has been a week since I got back home from Cambridge. I had a day trip in London before leaving for Korea, which was very nice because I got the chance to look around the royal places, museums, and parks. In particular, I was so excited to find a TINTIN shop by chance. :-)
Anyway, Desktop Summit 2011 was great: there were many great talks, workshops, BoFs, and parties as usual. It was good to meet my Collabora colleagues, WebKitGtk+ maintainers(Kov, Xan, Martin, Alex, Philippe, Diego), a Korean KDE contributor(peremen), and some new people(AdriánDebarshi,...). I even gave a talk of webkit-clutter. If I was asked to compare this summit to the last one, I can say two things: first, GNOME and KDE talks were not duplicated so I could attend a KDE talk about a WebKit Browser and there were more common sessions GNOME and KDE folks could share together. Therefore, this conference seemed more like a true Desktop Summit. The next difference was that it’s very hard to find mobile related topics in this conference. I think that It was a big loss for the community that Nokia left MeeGo. Although Intel is trying to maintain the MeeGo Project, it seems like it's not easy to delivery MeeGo to the mobile market alone.

webkit-clutter talk
I gave a talk about webkit-clutter in place of Kov because he had personal business to attend to. This talk was a part of the WebKit talk: first, Martin explained the new features of WebKitGtk+ 1.4.0 and upcoming feature of the next version. Second, Alex introduced the current status of WebKit2Gtk+ and gave a demo of it, which showed us how to restart a flash plug-in without affecting browsing capability. That explains why we need the multiple process model in web browsing.  Finally. I introduced the webkit-clutter port: why the webkit-clutter port is needed, what we have done, and what features are coming. I will introduce more details about the WebKit talk in the next blog post.
Xan showed a demo of installing and running a web application in GNOME3.  He said “80% of the time people use the web so 80% of GNOME effort should go to the web”, I agree with him, we need to focus on web integration with GNOME more. Anyway, Xan seemed like a web evangelist during his talk.
Other interesting talks
  • GTK 4 - the future of your favorite toolkit: Actually, nobody has started working on GTK4+, but the speakers showed a big picture of GTK+4  which will improve in areas of animations, effects, and transformations. For realizing this plan, Clutter will be used as a graphic backend, which allows GTK+ applications to use animation effects easily.
  • GNOME Shell version π: Owen Talyor Introduced GNOME Shell 3.2 with some demos such as Google Account Integration, soft keyboard, and more extensions.
  • GNOME a continent, starting from Asia:  There was a introduction of how the GNOME Asia summit started, what it has done and what it will do. I wish to attend the next GNOME Asia Summit held in Hong Kong.
  • Towards a multitouch gnome-shell: Although it will take more time to see if supports multi-touch officially, Carlos showed a demo of the multi-touch gnome shell. This seemed like the first step to touch based devices.
NateOn connection manager for Telepathy
NateOn is an instant messenger which is very popular in Korea. As you can see the above picture, it supports the Linux version, but the project has not been maintained well. The problem is that NateOn was removed from the Debian archive because it built with KDE3.(ChangWoo’s blog article) As a result, Korean users can’t download NateOn from Debian repositories. Although there was a proposal to develop a NateOn connection manager for Telepathy from the GNOME Korean community, it was just an idea. Fortunately, I met a Telepathy contributor, Debarshi who is interested in this project. I shared all the information about NateOn with him so that he was able to start developing the connection manager. When it starts to work a bit, I will be able to join the project.

I didn’t have a chance to go to any tourist attractions in Berlin this time, but I had Currywurst which is well-known Berlin food. It was good to have it with a beer.

Visiting the Cambridge office
After the Desktop Summit, I moved to Cambridge for visiting the company HQ office. It was very nice to meet people and work at the office. I had brought along some postcards of UNESCO World Heritage of Korea for a small gift as follows:

You can see them from the bulletin board when you visit the office.

There are many tourist attractions near the office, so I went to the Cambridge University Botanic Garden and the Fitzwilliam Museum during my stay. It was very nice, so I have shared some photos here.

On the last evening, we had a team dinner in an Indian restaurant. Although British accent was a bit unfamiliar to me, I enjoyed the talks and the Tandoori chicken. Anyway, I’d like to thank everyone in the office for helping me stay and work well. Thanks!

Finally, I'd also like to thank my employer, Collabora for sponsoring my trip to Berlin for Desktop Summit 2011. I hope to see everyone at the next Guadec in A Coruña, Spain.

Saturday, May 21, 2011

WebKit Mobile Features

Recently, I spent some time implementing the viewport meta tags and tiled backing store for WebKitGtk+, which are the mobile features of the WebKit engine. In this post, I’m going to tell you more about the mobile features of the WebKit engine and how to enable each feature when you build WebKitGtk+.

First of all, the WebKit engine is particularly strong in the mobile area, because it is lighter and faster than other browser engines and has been verified by the success of Safari on the iPhone. Due to this reason, most mobile devices have adopted the WebKit engine to offer their own web browser: Nokia Symbian, Google Android, HP WebOS, and Samsung Bada are all using WebKit based browsers.

Additionally, WebKit is an open source project. Naturally, all source code is open to the public, but there is no obligation for manufacturers to open their browser code, because the WebKit engine uses the LGPL, so it allows a browser executable file to just link with the WebKit engine dynamically. It means that the browser can be a different file independent from the WebKit library. Because of this reason, the mobile features of Safari on the iPhone need not be open to the public and subsequently it has been hard to access the mobile features. Fortunately, other phone manufacturers have participated in the WebKit project and are developing mobile features within the community. Currently, Nokia, RIM, Samsung, Motorola and Erricson have participated in the WebKit project. In addition, the open source companies Collabora and Igalia have worked on WebKit for a long time.

Recently, some mobile features already have been applied to the WebKit engine such as the tiled backing store, touch events, and viewport meta tags. Since these features are a little complicated to understand in terms of the name, I will explain them including the other mobile features supported by WebKit in more details.
  • Fast Mobile Scrolling
  • Tiled Backing Store
  • Viewport Meta Tags
  • Frameset Flattening
  • Touch Events

Fast Mobile Scrolling


You can see a fixed background image(Smile Icon) when you even scroll the web page as you can see in the above picture. This can be possible if a web page has elements which have the CSS background-attachment property. In this case, WebKit carries out a slow repaint in order to avoid rendering artifacts. However, scrolling a web page with a fixed background image causes noticeable delays on mobile devices. It means that WebKit tries not to update fixed elements every time to scroll fast because it is hard to display a fixed element while scrolling fast.

In order to avoid this problem, we can make scrolling faster if we ignore the CSS property "background-attachment: fixed" by enabling the fast mobile scrolling option as you can see in the left picture (i.e. the fixed background can be scrollable on WebKitGtk+ with the fast mobile scrolling build option).

To enable the fast mobile scrolling:

1) Build WebKitGtk+ with the fast mobile scrolling option:
$WebKit/Tools/Scripts/build-webkit --gtk --fast-mobile-scrolling

Tiled Backing Store

When I tried to use Safari on the iPhone, I was impressed by the fact that the scrolling web pages were very fast. This is possible because Safari caches the content of the web page as bitmaps in memory, and the cached bitmaps we've seen are just painted on the screen without sending paint calls to WebCore when we scroll a web page. These bitmaps are created and deleted on-demand as the viewport moves over the web page. We call them the “tiled backing store.”

The tiled backing store was applied to QtWebKit  by Nokia engineers. They applied this feature to WebCore, so it can be shared by other ports. In the case of WebKitGtk, Code Aurora engineers submitted an initial patch, I have updated the patch to use only Cairo API by removing GTK+ dependency. This would allow the WinCairo and Efl port to use the updated patch for enabling the tiled backing store.

To enable the tiled backing store:
1 ) Build WebKitGtk+ with the tiled backing store option as follows:
$ WebKit/Tools/Scripts/build-webkit --gtk --tiled-backing-store

2) Set the tiled backing store setting to TRUE through WebKitWebSettings as follows:
WebKitWebSettings *settings = webkit_web_view_get_settings(webView);
g_object_set(G_OBJECT(settings), "enable-tiled-backing-store", TRUE, NULL); 

Viewport Meta Tags


Apple introduced the full browsing feature for the first time when they released the iPhone. Until then, the mobile phone was not usable to browse web pages made for desktop due to the small screen size. To overcome this limitation, Safari on the iPhone zooms web pages out automatically to fit to the screen like in the above picture(left).

For this, Safari on the iPhone assumes that web pages have 980px width by default. When Safari loads a web page, it scales down the web page by a factor of 0.32 (320/980) to fit to the width of  the screen in the case of iPhone 3G. But, the problem is that all pages are not displayed to fit to 980px width. For example, mobile web pages can be displayed well with 320px or 480px. the Google Search page is displayed on the iPhone like the right picture because the Google search page is required to have the less width compared to 980px.

To solve this problem, Apple defined the viewport meta tags to allow web browsers to support desktop web page and mobile web page effectively. Actually, this is not a web standard, but most mobile web browsers have adopted this feature and WebKit also supports it.

Let’s take a look at the viewport meta tag in more detail. The viewport meta tags can be used to set the width, height and initial scale factor of the viewport. Although most web pages don’t have viewport meta tags, mobile browsers which have 320 px screen width can apply initial values to web pages as follows:

<meta name = "viewport" content = "width = 980" initial-scale = "0.32">

In the case of mobile pages, you need to set the viewport meta tags as follows:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

As you can see each property, web pages can not be scaled up/down; even user scaling is turned off. This is because the mobile web pages are actually written for the small screen.

For more information on the viewport meta tags, refer to the Safari reference library.

Frameset Flattening

There are some web pages that have their own scrollable area with the scroll bars like the above page. We call this "sub frame." On touch devices, the problem is that it is desirable not to have any scrollable sub frame of the web page because the user could confuse with sometimes scrolling sub frames and scrolling the web page itself at other times because it is very hard for the user to understand what “sub frame” is. For this reason, iframes and framesets are hardly usable on touch devices.

However, if you enable the frameset flattening features when building Webkit, all the frames can be one scrollable page as you can see the above figure.

To enable the Fameset flattening:
WebKitWebSettings *settings = webkit_web_view_get_settings(webView);
g_object_set(G_OBJECT(settings), "enable-frame-flattening", TRUE, NULL);

Touch events

Supporting multi-touch has become popular since iPhone introduced it. Now, all smart phones support multi-touch. Using multi-touch allows the users to use more than two fingers to interact with applications on their smart phone. For example, you can use a piano or guitar applications using your 5 fingers.

However, using multi-touch is not only possible for native applications, but also for web pages. Since WebKit supports touch events as DOM events, web developers can deal with touch events using JavaScript. There are 4 kinds of touch events: touchstart, touchmove, touchend, and touchcancel. Unfortunately, WebKitGtk+ doesn't support the touch events yet. So if you want to test the touch events , running QtWebKit or mobile Safari would be good. For more information on how to use the touch events, refer to the Safari reference library.

Finally, I’d like to let you know there are more mobile features I didn’t introduce here, such as intelligent zoom, kinetic scrolling, zooming animation, and etc. WebKit doesn’t support them by itself, but the hosting applications can implement these kind of features, because these features are likely to depend on the platform. However, when these features are added to WebKitGtk+, I will talk about them in more detail.


Saturday, April 30, 2011

WebKit Contributors Meeting 2011

I attended the WebKit Contributors meeting which was held by Apple, April 24~25 2011 near Apple Campus in Cupertino, California. This is the annual meeting for WebKit reviewers and committers. They come together to discuss the current issues of WebKit and hack the code in the meeting. In this post, I am going to introduce you to what we talk about in the WebKit meeting.

As you know, WebKit is the hottest open source project these days, because most mobile phones use the WebKit engine and additionally Chrome and Safari also are based on WebKit. In addition, the WebKit engine is used for mobile platforms such as HP WebOS and RIM Playbook. Therefore, Apple and Google as well as other big electronics companies like Nokia, RIM, Samung, Motorola have joined the WebKit project. As you might already know, Collabora, the company I work for, has contributed to WebKitGtk+ with Igalia.

On the first day, we made the tracks and sessions instantly in the morning. Actually, there were many talks and hackathons proposed, but we chose our favorite items by voting. Although I was not able to attend all sessions, I will introduce some of them briefly.

First, I'd like to talk about WebKit2. Actually, Apple announced the WebKit2 project to support a multiple process model in WebKit like Chrome browser in the previous year. Other ports like Qt and Gtk+ are also trying to support the WebKit2 model. In the WebKit2 session, we discussed many issues, but I listed up some of the most important ones which readers might be interested in as follows:

- Using C API, is this a great choice?
- Support for Out-of-process plugin
- Code sharing between WebKit1 and WebKit2
- DRT rewritten
- Support for threaded model
- Low-level communication code is very specific to the platform. It needs an abstract model for communication between the web process and ui process.
- It is difficult to follow accessibility implementation on a Mac.

The next interesting session was about hardware acceleration. We discussed the current issues of hardware acceleration in each port. In particular, Google’s effort on 2D acceleration is quite interesting to me. Actually, 2D acceleration is a very challenging task because I have seen many trials of improving 2D graphics rendering through OpenGL or OpenVG.  However, the performance was not faster than CPU. Interestingly, Google seemed to try to accelerate 2D graphics by 3D graphics in the WebKit itself. But, all 2D drawings are not dependent on GPU, only the specific 2D drawing primitives are rendered by GPU. So they are currently profiling 2D drawing primitives rendered by GPU to see which 2D graphics primitives are really accelerated by GPU. If this hybrid model is successful, we will be able to apply it to other ports.

In other sessions, we talked about reducing the build systems in WebKit. Currently, we have 8 build systems for each WebKit port. So, when we add new source files, sometimes we forget to add the files to all of the build systems, which causes build breaks. Accordingly, CMake and GYP were proposed for unifying the build systems. However, each port just follows its development environment, so it seems like it would be hard to unify each current build system into one. I think that WebKitGtk+ can move to CMake, but I’m not sure if the GNOME guys like it. In addition, one of our core contributors, Eric introduced how his team designed and implemented HTML5 parser.  Actually, the existing parser was so complex as written in one source file which was the longest file in WebKit, so he told us that it took several months to understand the parser code. So he divided the parsing functionality into several classes such as HTMLToken, HTMLTokenizer, HTMLTreeBuilder, HTMLDocumentParser, and others.

Additionally, there was a party on the first day held by the Google Chrome Team. I met the reviewers who have reviewed my patches. I was pleased to meet them directly; it was like meeting old friends. It made me feel more connected to the community.

These days, the companies in which the WebKit contributors are involved are competing with each other, but as I saw at the meeting, the contributors are working together to develop a better web engine. For instance, I learned that Google is trying to overtake Apple with Android and Chrome, but they still work closely to develop the features of the HTML5/CSS3 standard. In addition, Nokia and RIM’s reviewers, like Kenneth and tonikitoo always review Samsung’s patches. I think this is an example of the power of open source.

Anyway, I hope to talk more details about the next meeting. Thanks!

Friday, April 22, 2011

Firefox4 & the future of the Web

Firefox4 was released last month. It has been downloaded more than 57 million times since its release from all over the world. The release has been successful so far, but it seems not to be easy to compete the other browsers as much as before. In this post, I am going to talk about new features of Firefox4 , the reason why using Firefox is important, and the task of remaining competitive as a community supported browser.

New features of Firefox4
First, let’s take a look at the new features of Firefox4[1].

App Tabs & Panorama

How many tabs are you opening when using Firefox? In my case, I open more than 10 tabs, so it is very difficult to find the page I want to see easily. App Tabs & Panorama help you organize so many tabs. In more detail, App tabs are a kind of tab, but these tabs are located in the left side of the tab area, which just display its icon without the title. So it allows users to place more tabs in the tab area. The difference compared to normal tabs is that these tabs can be shown after the browser restarts. If you open Facebook, Twitter, and GMail as App Tabs, you don’t need to open those web pages again. In the case of Panorama, relevant tabs can be group together as you see the above figure. It helps the user find a tab more easily. In addition, you can move tabs among groups by drag & drop.


WebGL brings 3D graphics to Firefox, which allows for developers to create 3D games and 3D UI for the Web. This link introduces several WebGL demos running on Firefox4, so you can imagine how the Web would change in the future.

In addition, Firefox4 introduces a lot of new technologies for Web developer:
  • JägerMonkey JavaScript engine : This is a new JavaScript Engine that replaced TraceMonkey, which allows JavaScript to run faster.
  • WebM Support: WebM is an open source, free royalties video codec open by Google. It allows people to author and distribute their own video without paying any royalties.
  • HTML5 Parser: This allows the browser to parse HTML content in the same way, even if the content has errors.
  • IndexDB: This is the Web standard for database.
  • More File APIs: It allows to upload files more easily.
  • Audio API: It allows to process audio streams for mixing and equalizing.
  • Multi Touch: Multi touch is supported by Windows7.
  • Web Console: This allows developers to check the content loading status from the console window.
For detailed information on the new features, take a look at the following page:

Why Firefox?
Do you remember the dark age of the Web? After the browser war[2] between Internet Explorer and Netscape was over in the 1990s, Internet explorer came to have more than 95% of the market share by 2002. As a result, nobody had cared about innovation in web browsers; until 2006 there was only one new version of Internet Explorer since version 6.0 was released in 2001. IT experts call this period of time the dark age of the Web, because there was no alternative browser for Internet Explorer. As a result, many web sites were dependent on Microsoft’s proprietary technology, like ActiveX control. Firefox was created to give back the Web to people by breaking the dark age like Luke Skywalker in Star Wars.

Now, nobody dominates the Web because Mozilla has been doing well to develop the Web using open technology and in the standard way by HTML5, CSS3, SVG, free codec, etc. This means that there should be no barriers to see Web contents from any browser on any platform. However, there are still threats from big companies. They could control the Web in their own way if they surpass the other browsers. ActiveX control issue in Korea is a well known example. Therefore, we have to be interested in spreading Firefox and keeping the Open Web.[3]

Future of Firefox
Open competition makes the Web innovate faster than before. Actually, Firefox has a unique position in the browser market. It is an open source project and has lead to innovate the Web technology. However, Google Chrome also strongly has lead the Web innovation, which supports the multiple process model and the Web technology based add-ons. Additionally, it is an open source project and their development process is open like Firefox, so anyone can be involved the development. In the mobile market, the situation is worse. Apple doesn’t allow users to run Firefox on the iOS because Firefox can be an application platform itself. Another problem is that Firefox for Android is not popular yet.

Well, how does Mozilla overcome this situation? Mozilla is trying to move the development focus from platform to product. In addition, they are preparing the Mozilla2 project which is a future platform for Firefox. It allows us to open each web page and add-on using a separate process. In my opinion, Mozilla should release Firefox for iPhone based on WebKit, because offering the same experience is more important than being addicted to the Mozilla platform.

Firefox is not just a web browser but provides a way to see the world and meet people. If we access the Web through decentralized tools like Firefox, nobody can control the Web, allowing everyone to use the Web equally without any restrictions.


Wednesday, March 02, 2011

The age of the web browser is coming

When did you start using a PC? In my case, I started to use computers when I was in university. At that time, it was very difficult for general users to use a computer, because we had to memorize the commands and the directory path, which an executable file is located in. Even using a mouse was optional to use PCs. However, the computing environment has changed rapidly since Windows and the Web were introduced in the 1990s. These days, even a 2 years old baby is able to use a smart device like the iPad.

Our PC usage has also changed rapidly. For example, installing softwares was always required to run them a few years ago, but these days, you may deal with most things on a web browser. If you close the browser, it may mean you are not using your PC anymore. As the Web technologies develop, the Web provides more services that we didn’t expect before. For example, we watch movies, music videos, and even TV on our browsers. In addition, we send and read emails using the web browser on any PC. Even if you use Google Docs, you can edit documents, slides, and spread sheets. Although it is missing many features such as animation effects, clip arts, etc, compared to MS Office, it is simple to use, and offers unique features such as collaborative editing in real-time. We may be living in the middle of the change from the desktop to the Web, similar to move from the text-based user interfaces like DOS to the GUIs like Mac OS and Windows.

Interestingly, there is a hidden side to this change. Actually, Microsoft has dominated the desktop through Windows and Office. However, Google has been trying to encourage people to use the Web more. Search & Ads are their main business, but they have been offering various web services such as GMail, Google Docs, Calendar, and Youtube to lure people away from the desktop. Now, nobody stops this change because even Microsoft has also adopted this trend. As Microsoft opened the desktop age instead of IBM, Google is also trying to open an era of the web desktop.

If this is true, how does Google lead the change? As you know, Google is a web service company, but they launched the Chrome browser and Chrome OS in 2009. Actually, Google has sponsored the Firefox project for a long time. But now, they are developing their own browser and operating system like Windows. Moreover, they are investing a lot of engineering resources in order to innovate the Web technology. As a result, the Web seems to work more like the desktop in terms of introducing more desktop features such as dealing with multimedia, accessing hardware like GPS and cameras, working offline, etc. However, Google can be evil if they want to be, because they are gathering all information, even your private data, so we should keep our eyes on Google not to be evil, although the informal corporate motto of Google is “Don’t be evil”[1].

You are in the middle of the switch to a new desktop environment. I expect that many people will get benefits through this change because it makes people use PCs more easily and helps people get out of the pain of maintaining their PC. Also, it would give more business opportunities to new companies and developers.

What should we do in this change? Just use the Web using the latest version of the web browser such as Firefox4 or Internet Explorer 9, which will come out this year. In addition, you need to acquaint yourself with famous web services such as Facebook, Flickr, Twitter, Youtube, Google Docs, etc. Because, if we have to follow the change, it would be better to lead it. If so, you may also have the opportunity to change your surroundings at your position through this exciting transition.