[KOR][E-Kor-Seminar 2014][2/8] Webkit EFL (Ryuan)

ewebkitintro, internal and ewebkit extension

ryuan.choi (최병운)

content

● Introduction of ewebkit● Tutorials● Internals● ewebkit extension● Information, links

ewebkit

webkit based rendering engine for EFL.TIZEN(2.x) uses ewebkit.current version of ewebkit : 1.11WebKit2 multi process architecture.

ewebkit - features

- Many HTML5 features- INDEXED DATABASE(X)

- Accelerated compositing- Viewport meta tag- Fixed Layout- Touch event- UI Side compositing

● Source code○ Latest : git://git.webkit.org/WebKit.git ○ Stable : [email protected]:ewebkit/webkit.git

http://download.enlightenment.org/rel/libs/webkit-efl/● Document : http://ewebkit.github.io/ewebkit-doc● Samples : [email protected]:ewebkit/samples.git● IRC(FreeNode) : #webkit-efl , #webkit-kr● Mailing list : [email protected]

○ https://lists.webkit.org/mailman/listinfo/webkit-efl● Wiki : http://trac.webkit.org/wiki/EFLWebKit

ewebkit

EFL(evas, ecore, …)

ewebkit vs elm_web

Elementary

ewebkit

● elm_web is optional winset of Elementary○ ./autogen.sh --with-elementary-web-backend=ewebkit2

● TIZEN does not use elm_web yet.

elm_web

use

EFL(evas, ecore, …)

Elementary

ewebkit

use

<open source> <TIZEN>

How to build/install ewebkit# Download source codewget http://download.enlightenment.org/rel/libs/webkit-efl/ewebkit-1.11.0.tar.xztar xvJf ewebkit-1.11.0.tar.xz # extract from archievecd ewebkit # move to the root directory of souce code.mkdir build && cd buildcmake .. -DPORT=Efl -DENABLE_BATTERY_STATUS=OFF -DCMAKE_INSTALL_PREFIX=/usr/elocalmake -j8 && sudo make install

Tutorial - first example// gcc simple_load_elm.c `pkg-config --cflags --libs elementary ewebkit2`#include <Elementary.h>#include <EWebKit2.h>

EAPI_MAIN int elm_main(int argc, char *argv[]){ ewk_init(); Evas_Object* win = elm_win_add(NULL, "sample", ELM_WIN_BASIC); elm_win_title_set(win, "sample"); ... Evas_Object* bg = elm_bg_add(win); ...

Evas_Object *ewk = ewk_view_add(evas_object_evas_get(win)); evas_object_smart_callback_add(ewk, "load,progress", progress_cb, NULL); ewk_view_url_set(ewk, "http://bunhere.tistory.com"); evas_object_resize(ewk, 400, 400); evas_object_move(ewk, 0, 0); evas_object_show(ewk);

elm_run();

ewk_shutdown();}ELM_MAIN()

# ps -ef | grep a.outryuan 23281 13874 0 23:01 pts/22 00:00:00 ./a.outryuan 23373 23304 0 23:01 pts/24 00:00:00 grep --color=auto a.out# ps -ef | grep WebPrryuan 23286 23281 0 23:01 pts/22 00:00:00 /usr/elocal/bin/WebProcess 25ryuan 23377 23304 0 23:01 pts/24 00:00:00 grep --color=auto WebPr

https://github.com/ewebkit/samples/blob/master/samples/ewebkit/simple_load_elm.c

Major objects

● ewk_view (evas object)○ view object to load and draw web contents.○ based on smart object.

● Ewk_Context (Ewk_Object)○ Instance to represent and control processes.○ Each context only creates each web process.

● Ewk_Page_Group (Ewk_Object)○ Instance to represent and control session.

● Ewk_Settings

Major objectsApplication

ewk_context #1

ewk_page_group #1

ewk_context #2

ewk_page_group #2 ewk_page_group #3

ewk_view #1

ewk_view #2

ewk_view #3

ewk_view #4

WebProcess #1 WebProcess #2

Ewk_Object

● Almost ewk objects are based on Ewk_Object● Ewk_Object is just simple smart pointer.● There are two APIs to control the life of objects

○ ewk_object_ref○ ewk_object_unref

Tutorial 2 - window.alert()static voidon_javascript_alert(Ewk_View_Smart_Data *smartData, const char *message){ … }

EAPI_MAINint elm_main(int argc, char *argv[]){ … // Evas_Object* ewk = ewk_view_add(evas_object_evas_get(win)); static Ewk_View_Smart_Class ewk_view_class = EWK_VIEW_SMART_CLASS_INIT_NAME_VERSION("SimpleEwkClass"); ewk_view_smart_class_set(&ewk_view_class); ewk_view_class.run_javascript_alert = on_javascript_alert;

Evas_Smart *smart = evas_smart_class_new(&ewk_view_class.sc); Evas_Object *ewk = ewk_view_smart_add(evas_object_evas_get(g_win), smart, ewk_context_default_get(), ewk_page_group_create(NULL));

// theme path should be calculated via “pkg-config --variable=datadir ewebkit2” ewk_view_theme_set(ewk, "/usr/share/ewebkit2-1/themes/default.edj");

// ewk_view_url_set(ewk, "http://bunhere.tistory.com"); ewk_view_html_string_load(ewk, "<!doctype html><body><input type=button onclick=\"window.alert('hello');\"></body>", NULL, NULL); ...}ELM_MAIN()https://github.com/ewebkit/samples/blob/master/samples/ewebkit/simple_popup.c

Methods of Ewk_View_Smart_Class

Internals

Read How browsers work (korean)

webcore

javascript core

EFL, cairo, libsoup, gstreamer, ...

ewebkit

html, css, js

DOM Tree

Render Tree

RenderLayer Tree

GraphicsLayer Tree

Page

Internals - WebKit2

Multi process architectureWebProcess UIProcess

webcoreJSC

WebPage DrawingArea WebPageProxy

DrawingAreaProxy

IPC

IPCWebProcess WebProcess

Proxy

WK Interface

ewk interface

WebContext

WorkQ

ueue Wor

kQue

ue

NetworkProcess ...

Internals - ewk_view

WebView EwkViewWKView

ewk_view(evas_object)

Ewk_View_Smart_Class

Ewk_View_Smart_Data

Evas_Smart_Class

evas_image

Evas_GLWebPageProxy WKPage

Internals - Coordinated Graphics

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

Internals - Coordinated Graphics

● WebProcess draws the render tree.○ Into not one surface but multiple layers.

(Accelerated compositing)○ Each layers also consist of multiple tiles.

(Tiled BackingStore)○ Tile memory and layer states are shared between

UIProcess and WebProcess.● UIProcess composite layers.(UI side compositing)

○ UIProcess ‘can’ scroll/scale the layers.

ewebkit extension

ewebkit-extension is simple interface to inject user’s shared objects to WebProcess for the extension such as javascript binding.

Plan to add it intorelease 1.13

libewebkit2.so

ewebkit extensionWebProcess UIProcess

webcoreJSC

WebPage DrawingArea WebPageProxy

DrawingAreaProxy

IPC

IPCWebProcess WebProcess

Proxy

WK Interface

ewk interface

WebContext

WorkQ

ueue Wor

kQue

ue

InjectedBundle

libewebkit_extension_manager.so

extension.so applicationextension.so

WK Interface

ewk interface

JSC interface

Information, links

● source code○ Development : http://www.webkit.org/building/checkout.

html○ Release : https://github.com/ewebkit/webkit

● doxygen○ http://ewebkit.github.io/ewebkit-doc/ewebkit2/html/

● samples○ https://github.com/ewebkit/samples

● simple browser○ https://github.com/bunhere/elbow

Information, links

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

org/wiki/CoordinatedGraphicsSystem