Post Views: 2,864

WebKit

WebKit is an open source web browser engine

Browser Engines:

WebKit:Safari, Chrome, Adobe AIR, Konqueror

Gecko: Firefox,Thunderbird

Trident: Internet Explorer, Microsoft Outlook

Presto: Opera Desktop/Mobile/Mini

WebKit features:

HTML and XML support
JavaScript support
CSS 2.1, CSS 3 support.
SVG(Scalar vector graphics) support
Support for Plugins (NPAPI, WebKit Plugins)
HTML5 support: multimedia, 3D graphics(WebGL ,WebDatabase) animations and transformations …

Browser's high level structure — Browser’s high level structure

Browser Layers:

1.The user interface – this includes the address bar, back/forward button, bookmarking menu etc. Every part of the browser display except the main window where you see the requested page.

2.The browser engine – the interface for querying and manipulating the rendering engine.

3.The rendering engine – responsible for displaying the requested content. For example if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on screen.

4.Networking – used for network calls, like HTTP requests. It has platform independent interface and underneath implementations for each platform.

5.UI backend – used for drawing basic widgets like combo boxes and windows. It exposes a generic interface that is not platform specific. Underneath it uses the operating system user interface methods.

6.JavaScript interpreter. Used to parse and execute the JavaScript code.

Data storage. This is a persistence layer. The browser needs to save all sorts of data on the hard disk, for examples, cookies. The new HTML specification (HTML5) defines ‘web database’ which is a complete (although light) database in the browser

Flow from User Request to Rendering :

The rendering engine will start getting the contents of the requested document from the networking layer

The rendering engine will start parsing the HTML document and turn the tags to DOM nodes in a tree called the “content tree”

The styling information together with visual instructions in the HTML will be used to create another tree – the render tree

The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen.

After the construction of the render tree it goes through a “layout” process. This means giving each node the exact coordinates where it should appear on the screen.

The next stage is painting – the render tree will be traversed and each node will be painted.

DOM Tree:

<html>
<body>
<p>
Hello World
</p>
<div> <img src=”example.png”/></div>
</body>
</html>

Constructed DOM tree for above HTML would somewhat look like :

CSS Parser Sample:

Render Tree && Layout

While the DOM tree is being constructed, the browser constructs another tree, the render tree
This tree is of visual elements in the order in which they will be displayed
The purpose of this tree is to enable painting the contents in their correct order
Non visual DOM elements will not be inserted in the render tree
Renderers are created through a process on the DOM called attachment. As a document is parsed and DOM nodes are added, a method called attach gets called on the DOM nodes to create the renderers.
When the renderer is created and added to the tree, it does not have a position and size. Calculating these values is called layout or reflow.

Improving User Experience:

For better user experience, the rendering engine will try to display contents on the screen as soon as possible.
It will not wait until all HTML is parsed before starting to build and layout the render tree.
Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
Accelerated compositing :It involves offloading the compositing of the layers to the GPU hardware. Can be enabled/disabled from WebKitWeb Settings which controls behavior of WebkitWebView

Global and incremental layout

Layout can be triggered on the entire render tree – this is “global” layout. This can happen as a result of:

1.A global style change that affects all renderers, like a font size change.

2.As a result of a screen being resized

Incremental layout is triggered (asynchronously) when new renderers are appended to the render tree after extra content came from the network and was added to the DOM tree.

WebKit Architecture:

WebKit:WebKit is not only the name of the entire project, it is also the name of the component that’s used by browsers and other applications.This is Interface between rendering engine and embedding application.

WebCore:The part of the system responsible for layout is WebCore.It contains application logic for loading , parsing,layout,style resolution,painting , event handling etc.

JS Engine: JavaScriptCore is the JavaScript engine that comes with WebKit, but many browsers replace it with their own implementations. (e.g. V8 in Chromium)

platform: platform-specific hooks to implement generic algorithms {font-engine,native widgets}

All of these are built on top of WTF (Web Template Framework), which is a utility library containing things like common data structures and threading primitives.

WebKit ports ??

WebKit is currently available for different platforms:

GTK+ based platforms (GNOME)
Qt based platforms (KDE)
Mac OS X, iOS
Google Chromium / Chrome
Enlightenment Foundation Libraries (EFL)
Symbian devices (S60)
Adobe Integrated Runtime (Adobe AIR)
BlackBerry
WebOS
Brew MP
Win32 (Windows CE)
wxWidgets

QtWebKit

It provides a browser engine that embeds web contents into Qt Applications
QWebView class (widget)is used to render web contents. QWebView contains a QWebPage
HTML documents can be nested using frames in a frameset. An individual frame in HTML is represented using the QWebFrame class.
QWebFrame class represents a bridge to the JavaScript window object and can be painted using QPainter
Each QWebPage has one QWebFrame object as its main frame,and the main frame may contain many child frames.
Individual elements of an HTML document can be accessed via DOM JavaScript interfaces from within a web page. The equivalent of this API in QtWebKit is represented by QWebElement.

Common web browser features, defaults and other settings can be

configured through the QWebSettings class

QWebElement document = frame->documentElement();
/* Assume the document has the following structure:

<p class=intro>
<span>Intro</span>
<span>Snippets</span>
</p>
<p>
<span>Content</span>
<span>Here</span>
</p>
*/

QtBridge

The QtWebKit bridge is a mechanism that extends WebKit’s JavaScript environment to access native objects that are represented as QObjects

WebKit PlugIns:

Plan your plug-in – What services you want

Registering Plug-ins – Decide the mime(Multipurpose Internet Mail Extensions ) type.

Building Plug-ins – Steps vary for different development environments

Installing Plug-ins – install the plugin in plugin directory for operating system

Using HTML to Display Plug-ins – Create an HTML page and embed the plugin in it.

Understanding Plugin Api

It consists of two groups of functions and a set of shared data structures

Plug-in methods are functions that you implement in the plug-in; Webkit calls these functions. The names of all the plug-in functions in the API begin with NPP_, for example, NPP_New.
Browser methods are functions implemented by Gecko; the plug-in calls these functions. The names of all the browser functions in the API begin with NPN_, for example, NPN_Write.
Data structures are plug-in-specific types defined for use in the Plug-in API. The names of structures begin with NP, for example, NPWindow.

typedef struct _NPWindow{
void*        window;   /* Platform specific handle */
uint32_t     x;        /* Coordinates of top left corner */
uint32_t     y;        /*   relative to a Netscape page */
uint32_t     width;    /* Maximum window size */
uint32_t     height;
…} NPWin

Windowed and Windowless plugins:

A windowed plug-in is drawn into its own native window on a web page. Windowed plug-ins are opaque and always come to the top HTML section of a web page.
A windowless plug-in need not be drawn in a native window; it is drawn in its own drawing target. Windowless plug-ins can be opaque or transparent, and can be invoked in HTML sections.

The way plug-ins are displayed on the web page is determined by the HTML element that invokes them.

Using HTML to display plugins

Using the object Element for Plug-in Display

Using the embed Element for Plug-in Display

Netscape Plugin Support for QtWebKit

Since WebKit supports the Netscape Plugin API, Qt applications can display Web pages that embed common plugins on platforms for which those plugins are available

To enable plugin support, the user must have the appropriate binary files for those plugins installed and the QWebSettings::PluginsEnabled attribute must be enabled for the application.

Specific locations stored in Environment variable $QTWEBKIT_PLUGIN_PATH are searched for plugins

Building WebKit

Getting the source

git clone git://git.webkit.org/WebKit.git WebKit

Dependencies

Install the base WebKitGTK+ dependencies:

$ Tools/gtk/install-dependencies

Download and build all jhbuild modules:

$ Tools/Scripts/update-webkitgtk-libs

Building WebKitGTK+

$ Tools/Scripts/build-webkit –gtk

WebGL

WebGL is based on OpenGL ES 2.0 which is a shader based API.WebGL is built on top of the Canvas Element

WebGL will load, compile and link the shaders, setup vertex buffer objects to hold the shapes, and setup the variables and Uniforms to be passed into the shaders.

Matrix math is applied to animate the shapes(Applying transformation matrix and Model-View Matrix)

Multiprocess Architecture in Chrome

Google Chrome creates three different types of processes: browser, renderers, and plug-ins.

Browser. There’s only one browser process, which manages the tabs, windows. This process also handles all interactions with the disk, network, user input, and display, but it makes no attempt to parse or render any content from the web.

Renderers. The browser process creates many renderer processes, each responsible for rendering web pages. The renderer processes contain all the complex logic for handling HTML, JavaScript, CSS, images, and so on. We achieve this using the open source WebKit rendering engine, which is also used by Apple’s Safari web browser.

Each renderer process is run in a sandbox, which means it has almost no direct access to your disk, network, or display. All interactions with web apps, including user input events and screen painting, must go through the browser process. This lets the browser process monitor the renderers for suspicious activity, killing them if it suspects an exploit has occurred.

Plug-ins. The browser process also creates one process for each type of plug-in that is in use, such as Flash, Quicktime, or Adobe Reader. These processes just contain the plug-ins themselves, along with some glue code to let them interact with the browser and renderers.

HTML5 Video && Canvas tag:

To make HTML video work in your site, the following lines should be sufficient.

It lets you include multiple formats as fallback types in case the user’s browser doesn’t support one of them

Now, all modern browsers support HTML5 video, including IE9

The <canvas> element is used to draw graphics, on the fly, on a web page

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

ctx.fillStyle=”#FF0000″;

ctx.fillRect(0,0,150,75);

</script>

Source code

Location: http://trac.webkit.org/browser/trunk/Source

Source/WebCore/dom : C++ classes creating DOM tree

Source/WebCore/rendering : Renderer classes

Source/JavaScriptCore : JavaScript Engine classes

Nightly builds are available at http://nightly.webkit.org/

Wiki : http://trac.webkit.org/wiki

M	T	W	T	F	S	S
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Technical forum

Category Archives: webkit browser engine

WebKit basics