Embedded Software SKKU 28 1 WebKit/EFL

Embedded Software SKKU 28 2 WebKit Parsing Layout and Painting WebKit and EFL Contents

Embedded Software SKKU 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

Embedded Software SKKU 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

Embedded Software SKKU 28 5 WebKit Engine Flow 1. Resource Loading & Parsing 2. Making Render Tree 3. Rendering

Embedded Software SKKU 28 6 Parsing

Embedded Software SKKU 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

Embedded Software SKKU 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

Embedded Software SKKU 28 9 HTML Parser: Example 1. Tokenization 2. Tree Construction HTML Tokens DOM Tree

Embedded Software SKKU 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

Embedded Software SKKU CSS is a context free grammar Simply parsed by CSS grammar CSS Parser CSS syntax grammar

Embedded Software SKKU 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 }

Embedded Software SKKU 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 TreeRender Tree

Embedded Software SKKU Layout and Painting

Embedded Software SKKU 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 Text

Embedded Software SKKU 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 Text X-axis (0,0) Y-axis

Embedded Software SKKU 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

Embedded Software SKKU Calculate Renderer’s width by: – Container block’s width Specified ‘width’ attribute of the renderer – Renderer’s borders, margins and paddings Layout: Width Calculation

Embedded Software SKKU Makes new Renderer at line breaking Layout: Line Breaking 1398년 조선이 유교 건국이념에 따라 숭교방( 崇敎坊 )에 설립한 국립최고학부 성균관( 成均館 )의 전통을 계승하였다. 그 후 1895년 고종의 칙령에 따라 성균관에 3년제 경학과( 經學科 )를 설치하였으며, 이 경학과는 성균관의 고전적 대학에서 근대적 대학으로의 변혁을 상징한다. Renderer 2Renderer 1

Embedded Software SKKU Traversing Render Tree with calling paint methods All Renderers have paint method Painting uses the UI infrastructure component Painting

Embedded Software SKKU Specified in CSS2(Cascading Style Sheet 2; May 1998) 1.Background color 2.Background image 3.Border 4.Children 5.Outline Painting: The Order of Painting

Embedded Software SKKU WebKit Rectangle Storage – Storing existing rectangle into bitmaps – Repainting only difference Painting: Optimization Viewport Scroll Block Text

Embedded Software SKKU Browser tries to do the minimal possible actions in response to dynamic changes. Layout & Painting in Dynamic Changes Click it function myFunction() { document.getElementById("image").src="landscape.jpg"; }

Embedded Software SKKU Webkit and EFL

Embedded Software SKKU 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

Embedded Software SKKU 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 – EFL Port of WebKit

Embedded Software SKKU WebKit2/EFL Based Browser Architecture Source: Ming Jin, WebKit/EFL & WebKit2/EFL. Tizen Developer Conference WebKit2/EFL SFX (SquirrelFishExtreme) - native code JIT

Embedded Software SKKU 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.