[KOR][E-Kor-Seminar 2014][2/8] Webkit EFL (Ryuan) at 2nd EFL Korean Seminar 2014 https://phab.enlightenment.org/w/events/efl_korean_seminar_2014/

1. ewebkit
intro, internal and ewebkit extension
ryuan.choi (최병운)

2. content
● Introduction of ewebkit
● Tutorials
● Internals
● ewebkit extension
● Information, links

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

4. ewebkit - features
- Many HTML5 features
- INDEXED DATABASE(X)
- Accelerated compositing
- Viewport meta tag
- Fixed Layout
- Touch event
- UI Side compositing

5. ● Source code
○ Latest : git://git.webkit.org/WebKit.git
○ Stable : git@github.com:ewebkit/webkit.git
http://download.enlightenment.org/rel/libs/webkit-efl/
● Document : http://ewebkit.github.io/ewebkit-doc
● Samples : git@github.com:ewebkit/samples.git
● IRC(FreeNode) : #webkit-efl , #webkit-kr
● Mailing list : webkit-efl@lists.webkit.org
○ https://lists.webkit.org/mailman/listinfo/webkit-efl
● Wiki : http://trac.webkit.org/wiki/EFLWebKit
ewebkit

6. 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>

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

8. 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.out
ryuan 23281 13874 0 23:01 pts/22 00:00:00 ./a.out
ryuan 23373 23304 0 23:01 pts/24 00:00:00 grep --color=auto a.out
# ps -ef | grep WebPr
ryuan 23286 23281 0 23:01 pts/22 00:00:00 /usr/elocal/bin/WebProcess 25
ryuan 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

9. 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

10. Major objects
Application
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

11. 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

12. Tutorial 2 - window.alert()
static void
on_javascript_alert(Ewk_View_Smart_Data *smartData, const char *message)
{ … }
EAPI_MAIN
int 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

13. Methods of Ewk_View_Smart_Class

14. Internals
Read How browsers work (korean)
webcore
javascript core
EFL, cairo, libsoup, gstreamer, ...
ewebkit
html,
css, js
DOM
Tree
Render
Tree
Render
Layer
Tree
Graphics
Layer Tree
Page

15. Internals - WebKit2
Multi process architecture
WebProcess UIProcess
webcoreJSC
WebPage DrawingArea WebPagePr
oxy
DrawingArea
Proxy
IPC
IPC
WebProcess WebProcess
Proxy
WK Interface
ewk interface
WebContext
WorkQueue
WorkQueue
NetworkProcess ...

16. Internals - ewk_view
WebView EwkViewWKView
ewk_view(evas_object)
Ewk_View_Smart_Class
Ewk_View_Smart_Data
Evas_Smart_Class
evas_image
Evas_GL
WebPageProxy WKPage

17. Internals - Coordinated Graphics
http://trac.webkit.
org/wiki/CoordinatedGraphicsSyste
m

18. 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.

19. 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 into
release 1.13

20. libewebkit2.so
ewebkit extension
WebProcess UIProcess
webcoreJSC
WebPage DrawingArea WebPagePr
oxy
DrawingArea
Proxy
IPC
IPC
WebProcess WebProcess
Proxy
WK Interface
ewk interface
WebContext
WorkQueue
WorkQueue
Injected
Bundle
libewebkit_extension_manager.so
extension.so applicationextension.so
WK Interface
ewk
interface
JSC
interface

21. 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

22. Information, links
● http://trac.webkit.org/wiki/EFLWebKit
● http://trac.webkit.
org/wiki/CoordinatedGraphicsSystem