Slides from the Pivotal Labs Tech Talk

1. Writing Tools
using WebKit
ARIYA HIDAYAT
ENGINEERING DIRECTOR, SENCHA

2. whoami

3. Let’s Start the PARTY

4. Let’s Start the PARTY

5. Unintentional Regression
This is
awesome!

6. forget to run
the tests
REGRESSION
Unintentional Regression
This is
awesome!

7. forget to run
the tests
REGRESSION
Unintentional Regression
This is
awesome!

8. Pre-commit hook to
command line test runner

9. Using WebView
QWebView webView;
webView.show();
webView.setUrl(QUrl("http://www.sencha.com"));

10. Capture to Image
QWebPage page;
QImage image(size, QImage::Format_ARGB32_Premultiplied);
image.fill(Qt::transparent);
QPainter p(&image);
page.mainFrame()->render(&p);
p.end();
image.save(fileName);

11. Test Runner
specrunner SpecRunner.html
5 specs, 0 failures in 0.013s
specrunner SpecRunner.html
FAIL: 5 specs, 1 failure in 0.014s

12. Network Log
28: GET http://www.google.com/m/gp
292: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp
311: GET data:image/gif;base64,R0lGODlhiA...
312: GET data:image/gif;base64,R0lGODlhJA...
312: GET data:image/gif;base64,R0lGODlhGA...
312: Response 0 image/gif 3611 bytes data:image/gif;base64,R0lGODlhiA...
312: Finish fail data:image/gif;base64,R0lGODlhiA...
312: Response 0 image/gif 284 bytes data:image/gif;base64,R0lGODlhJA...
312: Finish fail data:image/gif;base64,R0lGODlhJA...
312: Response 0 image/gif 178 bytes data:image/gif;base64,R0lGODlhGA...
312: Finish fail data:image/gif;base64,R0lGODlhGA...
317: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp
324: Finish fail http://www.google.com/m/gp
328: GET http://www.google.com/m/gn/user?...
329: Finish success http://www.google.com/m/gn/user?...

13. Recorder & Replayer

14. Remote Console for
http://github.com/senchalabs/android-tools

15. Remote Console for
http://github.com/senchalabs/android-tools

16. THANK YOU!

17. QUESTIONS?
ariya @ sencha.com
ariyahidayat
ariya.blogspot.com

18. ADDENDUM

19. Around the Project

20. 0
10000
20000
30000
40000
50000
60000
70000
80000
0 1 2 3 4 5 6 7 8 9 10
Revisions
Years
History

21. 0
10000
20000
30000
40000
50000
60000
70000
80000
0 1 2 3 4 5 6 7 8 9 10
Revisions
Years
History ~2000 commits/month

22. Level of Involvement
Contributor
Committer
≈ 130 Reviewer
≈ 80
accept or reject patches
checks in reviewed patches
after 10-20 patches
after 80 patches

23. WebKit Reviewers
Apple
38
Google
19
Nokia
7
RIM
6
Misc
12

24. WebKit Reviewers
Apple
38
Google
19
Nokia
7
RIM
6
Misc
12
1

25. Components of WebKit
WebKit Library
JavaScriptCore
WebCore
HTML rendering
SVG
DOM CSS

26. Platform Abstractions
Network Unicode Clipboard
Graphics Theme Events
Thread Geolocation Timer

27. Different “Ports”
WebCore
graphics
Mac Chromium Qt Gtk
CoreGraphics
Skia
QPainter
Cairo
graphics stack
GraphicsContext

28. Web Browsers
Safari
WebCore + JavaScriptCore
Eclair
WebCore + V8
Chrome Froyo

29. WebKit Everywhere
Browser
Devices
Runtime

30. How Fresh?
Fall 2010Spring 2010
Chrome 7
534.7
Safari 5
533.18
Android 2.2
533.1
Safari 4
528.16
AIR 2.5
531.9
mid 2009

31. Extensive Tests
the rest
229 MB
tests
904 MB≈ 20,000 tests

32. Workflow
1 Every commit needs to be reviewed
2 Broken commit must be reverted

33. Workflow
1 Every commit needs to be reviewed
2 Broken commit must be reverted
quality control
zero-regression policy

34. Get + Build + Launch

35. Requirements
• Subversion or Git
• C++ compiler
• Perl
• Python
• Various SDK

36. Using Subversion
svn checkout http://svn.webkit.org/repository/
webkit/trunk webkit
cd webkit
≈ 880 MB .svn

37. Using git
git clone git://git.webkit.org/WebKit.git
cd WebKit
≈ 1.2 GB .git

38. Build
WebKitTools/Scripts/build-webkit
--qt for Qt, --gtk for Gtk+
--debug for “Debug” mode

39. Launch
WebKitTools/Scripts/run-launcher
--qt for Qt, --gtk for Gtk+
--debug for “Debug” mode