Introduction to WebKit Girish Ramakrishnan

History

What is WebKit WebKit is a rendering engine for web content WebKit is not a browser, a science project, or the solution to every problem HTML JavaScript CSS WebKit Rendering of a web page Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

WebKit ports WebKit is designed to be highly portable

Bindings (JavaScript API, Objective-C API)Components WebCore (HTML, CSS, DOM, etc, etc) WTF (Data structures, Threading primitives) Platform (Network, Storage, Graphics) JavaScriptCore (JavaScript Virtual Machine) WebKit and WebKit2 (Embedding API) Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

WTF!? The STL of WebKit project o Data structures o String URL parser Compiled as static lib Minimal porting required (ifdef’s) Source/WTF

JavaScriptCore (AKA SFX and Nitro) Primarily developed by Apple Byte Level Interpreter (Llint) Optional DFG JIT Non-trivial to use a stand alone Compiled as static lib Source/JavaScriptCore

WebCore HTML, CSS, XML, SVG ….

WebCore Asks WebKit layer to load resource Resource loading and frame loading are totally separate Network Loader Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

WebCore Fires off pre-load requests on the fly XSS Auditor Network Loader HTML Parser

WebCore Parser generates DOM tree Network Loader HTML Parser DOMScriptCSS

WebCore Create RenderObjects using “Attachment” Network Loader HTML Parser DOMScript Render Tree CSS

WebCore CSS Style Computation Network Loader HTML Parser DOMScript Render Tree CSS RenderStyles Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

WebCore CSS Style Computation Network Loader HTML Parser DOMScript Render Tree CSS RenderStyles Image stolen from Adam Barth’s PresentationAdam Barth’s Presentation

WebCore Network Loader HTML Parser DOMScript Render Tree CSS Layout (RenderLayer, LineBoxes) RenderStyles

WebCore graphics Accelerated Compositing Image stolen from Ariya Hidayat’s blogpostAriya Hidayat’s blogpost

WebCore Graphics Tiled rendering Image stolen from Ariya Hidayat’s blogpostAriya Hidayat’s blogpost

WebCore Directory structure is insightful bindings (and idl files) bridge css Dom editing history html icu Inspector loader Platforms (graphics, network) plugins rendering storage svg xml

WebCore Porting Platforms/ implements port abstraction o Networking & Graphics o Time, DnD, Themes, Clipboard, UA Many features like plugins require port specific enhancements o Sprinkle ifdefs as necessary o Add dir/ /.cpp o E.g history/qt/HistoryItemQt.cpp

WebCore Porting (2) Client interfaces o Abstract interfaces implemented by the port o Used in place of ifdef’s when it’s useful for many ports class GeolocationClient { virtual bool requestAccess() = 0; } void Page::setClient(GeolocationClient *c) { client = c; } bool Page::requestLocationAccess() { return client->requestAccess(); } // Qt class GeolocationClientQt : public GeolocationClient { … } … page->setClient(new GeolocationClientQt);

WebCore Modules (battery, gelocation, indexeddb..) Layout tests Unit tests

WebKit Platform specific code o APIs o WebCoreSupport

WebKit2 New async API that uses split process model Developed by Apple

WebKit2 Image taken from WebKit WikiWebKit Wiki

WebKit2 vs Chrome Image taken from WebKit WikiWebKit Wiki

Trying out WebKit WebKit has no releases Each port is compiled differently git.webkit.org

Thank you Questions?