1. Embedded Software Lab. @ SKKU 28 1 WebKit/EFL

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

3. Embedded Software Lab. @ 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

4. Embedded Software Lab. @ 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

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

6. Embedded Software Lab. @ SKKU 28 6 Parsing

7. Embedded Software Lab. @ 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

8. Embedded Software Lab. @ 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

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

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

11. Embedded Software Lab. @ SKKU 28 11 CSS is a context free grammar Simply parsed by CSS grammar CSS Parser CSS syntax grammar

12. Embedded Software Lab. @ SKKU 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 }

13. Embedded Software Lab. @ SKKU 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 TreeRender Tree

14. Embedded Software Lab. @ SKKU 28 14 Layout and Painting

15. Embedded Software Lab. @ SKKU 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 Text

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

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

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

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

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

21. Embedded Software Lab. @ SKKU 28 21 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

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

23. Embedded Software Lab. @ SKKU 28 23 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"; }

24. Embedded Software Lab. @ SKKU 28 24 Webkit and EFL

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

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

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