embedded software lab. @ skku 28 1 webkit/efl. embedded software lab. @ skku 28 2 webkit parsing...

Embedded Software Lab. @ SKKU

28

1

WebKit/EFL


28

2

• WebKit• Parsing• Layout and Painting• WebKit and EFL

Contents


28

3

• WebKit– A layout engine for rendering web pages

• WebKit is used in Tizen– Web browser– Web applications

WebKit in Tizen v2.3

V8


28

4

• User Interface– Includes address bar,

back/forward button etc.

• Browser Engine– Actions between the UI

and the rendering engine

• Rendering Engine– Display the requested

content– WebKit is a rendering

engine

Web Browser Structure


28

5WebKit Engine Flow

1. Resource Loading & Parsing

2. Making Render Tree

3. Rendering


28

6

Parsing


28

7

• HTML and CSS files are loaded and parsed by WebKit

• HTML/CSS → DOM Tree/Style Rules → Render Tree

Parsing

1. Resource Loading & Parsing


28

8

• HTML Parsing is processed in two stages – Tokenization

• HTML file is broken in HTML tokens

• HTML tokens: start tags, end tags, attribute names and attribute values

– Tree construction• Based on HTML tokens, DOM

(Document Object Model) tree is constructed

• The object presentation of the HTML document and the interface of HTML elements to the outside world like JavaScript.

HTML Parser

script tags containing "document.write" can add extra tokens


28

9HTML Parser: Example

1. Tokenization

2. Tree Construction

HTML Tokens

DOM Tree


28

10

• Never get an "Invalid Syntax" error on an HTML page

• WebKit fixes any invalid content• Example:

– "mytag" is not a standard tag– wrong nesting of the "p" and "div" elements– a lot of the parser code is fixing the HTML

author mistakes

HTML Parser: Error Tolerance


28

11

• CSS is a context free grammar• Simply parsed by CSS grammar

CSS Parser

CSS syntax grammar


28

12

• Render Tree– Visual representation of the document– Composed of render objects (renderer)– WebKit layouts and renders each objects in the

tree

• Render Tree Construction– While the DOM tree is being constructed,

render tree is also being constructed.– DOM elements and stylesheet rules are used

for constructing render tree.

Render Tree

class RenderObject{ virtual void layout(); virtual void paint(PaintInfo); virtual void rect repaintRect(); Node* node; //the DOM node RenderStyle* style; // the computed style RenderLayer* containgLayer; //the containing z-index layer}


28

13

• Only visual DOM elements are inserted into render objects

• Non-visual DOM elements are not inserted in render tree– ex. head element

• "Viewport" is the initial containing block. In Webkit it will be the "RenderView" object

DOM Tree and Render Tree

DOM Tree Render Tree


28

14

Layout and Painting


28

15

• Calculating position and size– Renderer does not have a position and size– All Renderers have layout or reflow method.– Each layout or reflow method calls child’s one.

Layout

Viewport

Scroll

Block

Block

Block

Text Text


28

16

• HTML : Flow-based Layout Model– Layout proceeds on a path left-to-right and top-to-bottom,

excepting tables, etc.– (0, 0) : Root Renderer(RenderObject)– Area : Visible part of browser window

• In general, Layout is repeated from root Renderer

Layout

Viewport

Scroll

Block

Block

Block

Text Text

X-axis

(0,0)

Y-axis


28

17

1. Parent Renderer determines its own width

2. Parent goes over children and:1. Place the child Renderer (sets its x and y)2. Calls child layout if needed – this calculates

the child’s height

3. Parent sets it’s own height using children accumulative heights and the heights of the margins and paddings.

4. Sets its dirty bit to false

Layout: The Layout Process


28

18

• Calculate Renderer’s width by:– Container block’s width

• Specified ‘width’ attribute of the renderer

– Renderer’s borders, margins and paddings

Layout: Width Calculation


28

19

• Makes new Renderer at line breaking

Layout: Line Breaking

<html><p style="background-color:yellow; width:450px">1398년 조선이 유교 건국이념에 따라 숭교방 ( 崇敎坊 ) 에 설립한 국립최고학부 성균관 ( 成均館 ) 의 전통을 계승하였다 . 그 후 1895 년 고종의 칙령에 따라 성균관에 3 년제 경학과 ( 經學科 )를 설치하였으며 , 이 경학과는 성균관의 고전적 대학에서 근대적 대학으로의 변혁을 상징한다 .</p></html>

Renderer 2

Renderer 1


28

20

• Traversing Render Tree with calling paint methods

• All Renderers have paint method• Painting uses the UI infrastructure

component

Painting


28

21

• Specified in CSS2(Cascading Style Sheet 2; May 1998)

1.Background color2.Background image3.Border4.Children5.Outline

Painting: The Order of Painting


28

22

• WebKit Rectangle Storage– Storing existing rectangle into

bitmaps– Repainting only difference

Painting: Optimization

Viewport

Scroll

Block

Block

Block

Text Text


28

23

• Browser tries to do the minimal possible actions in response to dynamic changes.

Layout & Painting in Dynamic Changes

<html><button onclick="myFunction()">Click it</button><br /> <img id="image" src="smiley.gif"><script>function myFunction(){document.getElementById("image").src="landscape.jpg";}</script></html>


28

24

Webkit and EFL


28

25

• WebKit2 based browser and WRT– Since 2.0, tizen is using WebKit2

• Split process model for web content and UI with non-blocking APIs

• UI responsiveness, robustness, security, and better use of multicore CPUs

WebKit1 vs WebKit2

Source: Tizen Overview & Architecture, Alvin Kim, SOSCON 2013


28

26

• About EFL (Enlightenment Foundation Libraries)– A set of graphical libraries – Provide easy-to-use resources for building rich user interface

based applications• About the Port

– WebKit/EFL is a project aiming at porting WebKit to the Enlightenment Foundation Libraries

– The port shares code with the GTK+ one, as it also use Cairo for rendering and LibSoup for HTTP networking

– http://trac.webkit.org/wiki/EFLWebKit

EFL Port of WebKit


28

27

• WebKit2/EFL Based Browser Architecture

Source: Ming Jin , WebKit/EFL & WebKit2/EFL. Tizen Developer Conference 2012.

WebKit2/EFL

SFX (SquirrelFishExtreme) - native code JIT


28

28

• Job distribution across processes– Sensitive touch response in UIprocess– Frequent display update in UIprocess

• 2-stage pipeline of (1)-(5) and (6)

WebKit2/EFL

Source: Ming Jin , WebKit/EFL & WebKit2/EFL. Tizen Developer Conference 2012.

embedded software lab. @ skku 28 1 webkit/efl. embedded software lab. @ skku 28 2 webkit parsing...

Documents