Android Webview
Transcript of Android Webview
![Page 1: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/1.jpg)
1Friday, June 29, 2012
![Page 2: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/2.jpg)
Android WebViewNicolas Roard
1Friday, June 29, 2012
![Page 3: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/3.jpg)
2Friday, June 29, 2012
![Page 4: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/4.jpg)
What are we going to talk about?
2Friday, June 29, 2012
![Page 5: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/5.jpg)
WebKit timeline
3
KDEKHTML1998
WebCore+
Safari2003
WebKitopen sourced
2005
Chrome+
Android2008
3Friday, June 29, 2012
![Page 6: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/6.jpg)
ArchitectureArchitecture4Friday, June 29, 2012
![Page 7: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/7.jpg)
5Friday, June 29, 2012
![Page 8: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/8.jpg)
WebKit
5Friday, June 29, 2012
![Page 9: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/9.jpg)
Overview
6
6Friday, June 29, 2012
![Page 10: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/10.jpg)
Overview
6
WebKit
WebCorelayout engine JavaScriptCore
6Friday, June 29, 2012
![Page 11: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/11.jpg)
Overview
7
7Friday, June 29, 2012
![Page 12: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/12.jpg)
Overview
7
WebKit
7Friday, June 29, 2012
![Page 13: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/13.jpg)
Resources(images, html,...)
Overview
7
WebKit
7Friday, June 29, 2012
![Page 14: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/14.jpg)
Resources(images, html,...)
Overview
7
WebKit
7Friday, June 29, 2012
![Page 15: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/15.jpg)
Resources(images, html,...)
Overview
7
WebKit
DOM
7Friday, June 29, 2012
![Page 16: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/16.jpg)
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
7Friday, June 29, 2012
![Page 17: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/17.jpg)
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
Layout
7Friday, June 29, 2012
![Page 18: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/18.jpg)
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
Layout
Platform
7Friday, June 29, 2012
![Page 19: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/19.jpg)
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
Layout
Rendering
Platform
7Friday, June 29, 2012
![Page 20: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/20.jpg)
8Friday, June 29, 2012
![Page 21: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/21.jpg)
Platform
8Friday, June 29, 2012
![Page 22: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/22.jpg)
Platform implementation
9
9Friday, June 29, 2012
![Page 23: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/23.jpg)
Platform implementation
9
Network / Disk access
9Friday, June 29, 2012
![Page 24: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/24.jpg)
Platform implementation
9
Network / Disk access System integration
9Friday, June 29, 2012
![Page 25: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/25.jpg)
Platform implementation
9
Network / Disk access System integration
Graphics / Rendering
9Friday, June 29, 2012
![Page 26: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/26.jpg)
Platform implementation
9
Network / Disk access
Javascript engine
System integration
Graphics / Rendering
9Friday, June 29, 2012
![Page 27: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/27.jpg)
System integration
• Eclair- Database API support- Application cache support (offline webapps)- Geolocation API- HTML5 video (fullscreen)
• Honeycomb- Media capture (camera)- Device Orientation
10
10Friday, June 29, 2012
![Page 28: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/28.jpg)
Sunspider benchmark, Nexus S
11
0
1400
2800
4200
5600
7000
Android 2.3 (Gingerbread - API 9) Android 4.0 (ICS - API 14) Android 4.1 (JellyBean - API 16)
2743
4069
6223
(lower is better)
11Friday, June 29, 2012
![Page 29: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/29.jpg)
Sunspider benchmark
12
0
600
1200
1800
2400
3000
Nexus S Galaxy Nexus Laptop
268
1521
2743
(lower is better)
12Friday, June 29, 2012
![Page 30: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/30.jpg)
13Friday, June 29, 2012
![Page 31: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/31.jpg)
Rendering
13Friday, June 29, 2012
![Page 32: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/32.jpg)
Resources(images, html,...)
Overview
14
WebKit
DOM
Javascript
Layout
Rendering
Platform
14Friday, June 29, 2012
![Page 33: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/33.jpg)
Rendering Loop
15
15Friday, June 29, 2012
![Page 34: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/34.jpg)
Rendering Loop
15
Event
15Friday, June 29, 2012
![Page 35: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/35.jpg)
Paint
Rendering Loop
15
Event
15Friday, June 29, 2012
![Page 36: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/36.jpg)
Paint
Rendering Loop
15
Event Draw
15Friday, June 29, 2012
![Page 37: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/37.jpg)
Paint
Rendering Loop
15
Event Draw
15Friday, June 29, 2012
![Page 38: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/38.jpg)
Rendering
16
Document
16Friday, June 29, 2012
![Page 39: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/39.jpg)
Rendering
16
Document
Viewport
16Friday, June 29, 2012
![Page 40: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/40.jpg)
Rendering
16
Document
Viewport
16Friday, June 29, 2012
![Page 41: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/41.jpg)
Rendering
16
Document
Viewport
16Friday, June 29, 2012
![Page 42: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/42.jpg)
Rendering
16
Document
Viewport
16Friday, June 29, 2012
![Page 43: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/43.jpg)
17Friday, June 29, 2012
![Page 44: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/44.jpg)
Before Honeycomb
17Friday, June 29, 2012
![Page 45: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/45.jpg)
RenderingPicture
Resources(images, html,...)
Android WebView Software Rendering
18
WebKit
DOM
Javascript
Layout
Platform
18Friday, June 29, 2012
![Page 46: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/46.jpg)
RenderingPicture
Resources(images, html,...)
Android WebView Software Rendering
18
WebKit
DOM
Javascript
Layout
Platform
18Friday, June 29, 2012
![Page 47: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/47.jpg)
Picture
• Vector representation of the entire page (not just the visible area)• No need to go back to webkit when:
- Scrolling- Zooming
19
19Friday, June 29, 2012
![Page 48: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/48.jpg)
Multithreading
20
UIThread
WebCoreThread
Picture
20Friday, June 29, 2012
![Page 49: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/49.jpg)
Multithreading
20
UIThread
WebCoreThread
Events
Picture
20Friday, June 29, 2012
![Page 50: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/50.jpg)
Multithreading
20
UIThread
WebCoreThread
Events
PicturePicture
20Friday, June 29, 2012
![Page 51: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/51.jpg)
Multithreading
20
UIThread
WebCoreThread
Events
Picture
20Friday, June 29, 2012
![Page 52: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/52.jpg)
Problems with software rendering
21
21Friday, June 29, 2012
![Page 53: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/53.jpg)
Problems with software rendering
• Speed is highly dependent on the time spent traversing and rasterizing the PictureSet- Scroll and Zoom smoothness can vary depending on the website
21
21Friday, June 29, 2012
![Page 54: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/54.jpg)
Problems with software rendering
• Speed is highly dependent on the time spent traversing and rasterizing the PictureSet- Scroll and Zoom smoothness can vary depending on the website
• Doesn’t support 3D operations (i.e. for CSS3D)
21
21Friday, June 29, 2012
![Page 55: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/55.jpg)
Problems with software rendering
• Speed is highly dependent on the time spent traversing and rasterizing the PictureSet- Scroll and Zoom smoothness can vary depending on the website
• Doesn’t support 3D operations (i.e. for CSS3D)• Poor support of inline plugins or video (cannot have HTML content above a plugin/video;
position not in sync when scrolling/zooming)
21
21Friday, June 29, 2012
![Page 56: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/56.jpg)
22Friday, June 29, 2012
![Page 57: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/57.jpg)
Honeycomb and beyondAdding Hardware Acceleration
22Friday, June 29, 2012
![Page 58: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/58.jpg)
Software won’t keep up
0
220
440
660
880
1100
G1 Droid N1 NS XOOM
memcpy (MiB/s)Pixel count
23
23Friday, June 29, 2012
![Page 59: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/59.jpg)
Tiling Content
24Friday, June 29, 2012
![Page 60: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/60.jpg)
Paint
Software Rendering
25
Scroll Draw
25Friday, June 29, 2012
![Page 61: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/61.jpg)
Paint
Software Rendering
25
Scroll Draw
16.66ms
25Friday, June 29, 2012
![Page 62: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/62.jpg)
PaintPaint
Software Rendering
25
Scroll Draw
16.66ms
25Friday, June 29, 2012
![Page 63: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/63.jpg)
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
![Page 64: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/64.jpg)
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
![Page 65: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/65.jpg)
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
![Page 66: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/66.jpg)
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
![Page 67: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/67.jpg)
Ideally...
27
Scroll Draw
<16.66ms
27Friday, June 29, 2012
![Page 68: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/68.jpg)
Hardware Rendering
28
Scroll Draw Tiles
28Friday, June 29, 2012
![Page 69: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/69.jpg)
Hardware Rendering
28
Scroll Draw Tiles
Thread 2
Thread 1
28Friday, June 29, 2012
![Page 70: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/70.jpg)
Hardware Rendering
28
Paint
Scroll Draw Tiles
Thread 2
Thread 1
28Friday, June 29, 2012
![Page 71: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/71.jpg)
Hardware Rendering
28
Paint
Scroll Draw
New Tiles
Tiles
Thread 2
Thread 1
28Friday, June 29, 2012
![Page 72: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/72.jpg)
Hardware Rendering
28
Paint
Scroll Draw
New Tiles
Tiles
Paint
Thread 2
Thread 1
28Friday, June 29, 2012
![Page 73: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/73.jpg)
Hardware Rendering
28
Paint
Scroll Draw
New Tiles
Tiles
Paint
Thread 2
Thread 1
28Friday, June 29, 2012
![Page 74: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/74.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 75: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/75.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 76: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/76.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 77: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/77.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 78: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/78.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 79: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/79.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 80: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/80.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 81: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/81.jpg)
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
![Page 82: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/82.jpg)
Tiles Generation
30
WebCoreThread
UIThread
30Friday, June 29, 2012
![Page 83: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/83.jpg)
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
UIThread
30Friday, June 29, 2012
![Page 84: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/84.jpg)
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
![Page 85: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/85.jpg)
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
![Page 86: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/86.jpg)
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
![Page 87: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/87.jpg)
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
![Page 88: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/88.jpg)
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
![Page 89: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/89.jpg)
A few additional things...
• Slower at Painting, Faster at Drawing - Software Rendering still useful
• Precaching of tiles- Prefetch of surrounding tiles- Direction dependent
• Content visibility- Schedule low-res tiles (ICS -- API 14)
• Memory usage- Use a limited number of tiles (device dependent)- Tiles are 256x256 (...so far!)- Check if plain colors (JB -- API 16)
31
31Friday, June 29, 2012
![Page 90: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/90.jpg)
WebKit Layers
32Friday, June 29, 2012
![Page 91: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/91.jpg)
Moving content
33
33Friday, June 29, 2012
![Page 92: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/92.jpg)
Moving content
33
33Friday, June 29, 2012
![Page 93: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/93.jpg)
Moving content
33
33Friday, June 29, 2012
![Page 94: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/94.jpg)
Moving content
34
34Friday, June 29, 2012
![Page 95: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/95.jpg)
Moving content
35
35Friday, June 29, 2012
![Page 96: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/96.jpg)
Moving content
36
36Friday, June 29, 2012
![Page 97: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/97.jpg)
Moving content
37
37Friday, June 29, 2012
![Page 98: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/98.jpg)
Moving content
38
38Friday, June 29, 2012
![Page 99: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/99.jpg)
Moving content - with a layer
39
39Friday, June 29, 2012
![Page 100: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/100.jpg)
Moving content - with a layer
39
39Friday, June 29, 2012
![Page 101: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/101.jpg)
40Friday, June 29, 2012
![Page 102: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/102.jpg)
41Friday, June 29, 2012
![Page 103: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/103.jpg)
42Friday, June 29, 2012
![Page 104: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/104.jpg)
43Friday, June 29, 2012
![Page 105: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/105.jpg)
44Friday, June 29, 2012
![Page 106: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/106.jpg)
45Friday, June 29, 2012
![Page 107: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/107.jpg)
46Friday, June 29, 2012
![Page 108: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/108.jpg)
Base Layer
Video Layer Clip Layer
Scrollable Layer
47Friday, June 29, 2012
![Page 109: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/109.jpg)
Layers
• Allow to composite elements of the page on their own surfaces• Faster to move things around (no need to invalidate/repaint)• Allow support for scrollable areas• Nice way of integrating “foreign” content (e.g. video, plugins) into a render tree
48
48Friday, June 29, 2012
![Page 110: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/110.jpg)
WebKit CSS 3D
49Friday, June 29, 2012
![Page 111: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/111.jpg)
50Friday, June 29, 2012
![Page 112: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/112.jpg)
51Friday, June 29, 2012
![Page 113: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/113.jpg)
52Friday, June 29, 2012
![Page 114: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/114.jpg)
WebKit Layers...on Android
53Friday, June 29, 2012
![Page 115: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/115.jpg)
Architecture
54
UIThread
WebCoreThread
Events
PicturePicture
54Friday, June 29, 2012
![Page 116: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/116.jpg)
Architecture
55
UIThread
WebCoreThread
Events
LayersLayers
CSS Animations
55Friday, June 29, 2012
![Page 117: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/117.jpg)
CSS Animations
56
56Friday, June 29, 2012
![Page 118: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/118.jpg)
CSS Animations
• CSS property to animate HTML elements• Supported on WebKit-based browsers, Firefox• High-level specification of an animation• Allow complex animations
56
56Friday, June 29, 2012
![Page 119: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/119.jpg)
CSS Animations
• CSS property to animate HTML elements• Supported on WebKit-based browsers, Firefox• High-level specification of an animation• Allow complex animations
56
on Android
• Hardware accelerated- runs in parallel to webkit, on the UI thread- V-Synced
• Much faster than JavaScript...- No need to execute webkit or javascript code- No repaint -- elements are put onto layers
56Friday, June 29, 2012
![Page 120: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/120.jpg)
57Friday, June 29, 2012
![Page 121: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/121.jpg)
Keyframes animations / transform
@-webkit-keyframes x-spin {0% { -webkit-transform: rotateX(0deg); }50% { -webkit-transform: rotateX(180deg); }100% { -webkit-transform: rotateX(360deg); }
}
58
58Friday, June 29, 2012
![Page 122: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/122.jpg)
Taking advantages of Layers
• On mobile, our main problem is to go talk to WebKit and do the repaint/inval cycle• Moving elements to layers allow us to do things without having to go to WebKit
- Fixed Positioned elements• Asynchronously update webkit, no need to wait for WebKit to paint things
- Smooth interaction and immediate reactivity
59
59Friday, June 29, 2012
![Page 123: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/123.jpg)
Brought to you by Layers• Seamless integration of inline HTML5 video• Fixed positioned elements• IFrames support• Overflow-scroll elements• CSS 3D• Fixed background elements
60
60Friday, June 29, 2012
![Page 124: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/124.jpg)
61Friday, June 29, 2012
![Page 125: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/125.jpg)
62Friday, June 29, 2012
![Page 126: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/126.jpg)
63Friday, June 29, 2012
![Page 127: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/127.jpg)
Some additional things...
• Same code path as base surface• Memory usage
- Limited number of tiles• Drawing
- We merge layers- Content check
• Painting- Fast invals
64
64Friday, June 29, 2012
![Page 128: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/128.jpg)
Using WebView
65Friday, June 29, 2012
![Page 129: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/129.jpg)
What can it do
• Desktop-class HTML support• Viewport metatag support• IFrames, Scrollable elements• Fixed positioned elements• CSS Fixed background• CSS3D / CSS animations / Layers• HTML5 Video / Audio• Embedded fonts• Complex text: Japanese / Arabic text / etc
66
66Friday, June 29, 2012
![Page 130: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/130.jpg)
When...
67
Eclair• Database API support, for client-side databases using SQL.• Application cache support, for offline applications.• Geolocation API support, to provide location information about
the device.• <video> tag support in fullscreen mode.! viewport tag support
Froyo•! Layers•! Fixed position elements• Accelerated CSS animations (2 frames)
67Friday, June 29, 2012
![Page 131: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/131.jpg)
When...
68
Honeycomb•! Media capture (camera)•! Device Orientation•! CSS3D transforms•! IFrames•! Overflow-scroll elements•! Inline video•! Fixed position elements (full support)• Accelerated CSS animations (full support)
68Friday, June 29, 2012
![Page 132: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/132.jpg)
When...
69
ICS•! Accessibility•! Support for Indic fonts (Devanagari, Bengali, and Tamil)• Support for Ethiopic, Georgian, and Armenian fonts • Support for WebDriver
JellyBean• Layers performance improvement• Fixed background element• Vertical text support
69Friday, June 29, 2012
![Page 133: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/133.jpg)
70Friday, June 29, 2012
![Page 134: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/134.jpg)
Setup
70Friday, June 29, 2012
![Page 135: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/135.jpg)
Use a webview
<?xml version="1.0" encoding="utf-8"?> <WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" />
71
71Friday, June 29, 2012
![Page 136: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/136.jpg)
Internet permission
<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... </manifest>
72
72Friday, June 29, 2012
![Page 137: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/137.jpg)
WebViewClient -- URL loading
private class myWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { return false; } }
(...)
myWebView.setWebViewClient(new myWebViewClient());
73
73Friday, June 29, 2012
![Page 138: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/138.jpg)
Load content
WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("http://www.example.com");
(...)
String summary = "<html><body>Hello World</body></html>"; myWebView.loadData(summary, "text/html", null);
74
74Friday, June 29, 2012
![Page 139: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/139.jpg)
Using javascript
WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true);
75
75Friday, June 29, 2012
![Page 140: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/140.jpg)
Advantage and Disadvantages
• (may) use less memory• faster repaints• slower draw• UI responsiveness content-
dependent • content always there• no CSS3D support• no inline video support
76
• use more memory• slower repaints• faster draw• UI responsiveness constant• can miss content temporarily• CSS3D support• inline video support
Software Rendering mode Hardware Rendering mode
76Friday, June 29, 2012
![Page 141: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/141.jpg)
Are you Accelerated?• If Activity or Application accelerated
- android:hardwareAccelerated=”true”- API level 11 (Android 3.0 Honeycomb)
• Forcing 2D rendering- setLayerType with LAYER_TYPE_SOFTWARE
77
WebView automaticallyaccelerated
77Friday, June 29, 2012
![Page 142: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/142.jpg)
78Friday, June 29, 2012
![Page 143: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/143.jpg)
Accessibility
78Friday, June 29, 2012
![Page 144: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/144.jpg)
Accessibility in WebView
• Same solution as Chrome / ChromeOS• Enable JavaScript
- Explore by Touch (ICS)- Gesture Navigation (JB)
• Settings => Accessibility => Enhance web accessibility
79
79Friday, June 29, 2012
![Page 145: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/145.jpg)
80Friday, June 29, 2012
![Page 146: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/146.jpg)
Inline / Fullscreen Video
80Friday, June 29, 2012
![Page 147: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/147.jpg)
WebChromeClient
public void onShowCustomView(View view,
WebChromeClient.CustomViewCallback callback) {
mOriginalOrientation = getRequestedOrientation();
FrameLayout decor = (FrameLayout) getWindow().getDecorView();
mFullscreenContainer = new FrameLayout(getBaseContext());
mFullscreenContainer.addView(view, ViewGroup.LayoutParams.MATCH_PARENT);
decor.addView(mFullscreenContainer, ViewGroup.LayoutParams.MATCH_PARENT);
mCustomView = view;
mCustomViewCallback = callback;
setRequestedOrientation(getRequestedOrientation());
}
81
81Friday, June 29, 2012
![Page 148: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/148.jpg)
WebChromeClient
@Override
public void onHideCustomView() {
FrameLayout decor = (FrameLayout) getWindow().getDecorView();
decor.removeView(mFullscreenContainer);
mFullscreenContainer = null;
mCustomView = null;
mCustomViewCallback.onCustomViewHidden();
// Show the content view.
setRequestedOrientation(mOriginalOrientation);
}
82
82Friday, June 29, 2012
![Page 149: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/149.jpg)
83Friday, June 29, 2012
![Page 150: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/150.jpg)
Binding javascript code to dalvik
83Friday, June 29, 2012
![Page 151: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/151.jpg)
Binding javascript code to javapublic class JavaScriptInterface {
Context mContext;
/** Instantiate the interface and set the context */ JavaScriptInterface(Context c) { mContext = c; }
/** Show a toast from the web page */ public void showToast(String toast) { Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); }}
84
84Friday, June 29, 2012
![Page 152: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/152.jpg)
Binding javascript code to java
WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
85
85Friday, June 29, 2012
![Page 153: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/153.jpg)
HTML side
<input type="button" value="Say hello" " onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript"> function showAndroidToast(toast) { Android.showToast(toast); }</script>
86
86Friday, June 29, 2012
![Page 154: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/154.jpg)
87Friday, June 29, 2012
![Page 155: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/155.jpg)
Viewport Tag
87Friday, June 29, 2012
![Page 156: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/156.jpg)
Viewport tag
88
<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /></head>
88Friday, June 29, 2012
![Page 157: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/157.jpg)
Viewport tag
89
<meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] " />
89Friday, June 29, 2012
![Page 158: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/158.jpg)
90Friday, June 29, 2012
![Page 159: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/159.jpg)
Layers / Animations
90Friday, June 29, 2012
![Page 160: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/160.jpg)
Use layers!
91
91Friday, June 29, 2012
![Page 161: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/161.jpg)
Use layers!var elem = document.getElementById("myElement");
91
91Friday, June 29, 2012
![Page 162: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/162.jpg)
Use layers!
elem.style.left = x;elem.style.top = y;
var elem = document.getElementById("myElement");
91
91Friday, June 29, 2012
![Page 163: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/163.jpg)
Use layers!
elem.style.left = x;elem.style.top = y;
#myElement { -webkit-transform: transform3d(0, 0, 0);}
var elem = document.getElementById("myElement");
91
91Friday, June 29, 2012
![Page 164: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/164.jpg)
Use layers!
elem.style.left = x;elem.style.top = y;
#myElement { -webkit-transform: transform3d(0, 0, 0);}
var elem = document.getElementById("myElement");
91
91Friday, June 29, 2012
![Page 165: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/165.jpg)
Use layers!
elem.style.left = x;elem.style.top = y;
elem.style.webkitTransform = ”translate3d(x, y, 0)”;
#myElement { -webkit-transform: transform3d(0, 0, 0);}
var elem = document.getElementById("myElement");
91
91Friday, June 29, 2012
![Page 166: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/166.jpg)
Animation
92
92Friday, June 29, 2012
![Page 167: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/167.jpg)
Animation
92
92Friday, June 29, 2012
![Page 168: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/168.jpg)
93
1 · untitled 2 · 2012-06-28 20:42 · Nicolas Roard
var animTime = 2500; // msvar animDist = 730; // pxvar dx = (animDist / animTime);var x = 0;var startTime = Date.now();
function run() { var delta = Date.now() - startTime; startTime = Date.now(); x += dx * delta; if (x > animDist) { x = 0; } var elem = document.getElementById("droid"); elem.style.left = x + "px"; setTimeout("run()", 0);}
Animation with JavaScript
93Friday, June 29, 2012
![Page 169: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/169.jpg)
94Friday, June 29, 2012
![Page 170: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/170.jpg)
Animation with CSS
95
1 · untitled · 2012-06-28 20:37 · Nicolas Roard
@-webkit-keyframes droid-anim-horiz { 0% { -webkit-transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(750px, 0, 0); }}
#droid { position: absolute; -webkit-animation: droid-anim-horiz 2.5s;}
95Friday, June 29, 2012
![Page 171: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/171.jpg)
96Friday, June 29, 2012
![Page 172: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/172.jpg)
Use CSS animations
• Much Faster• V-Synced• Higher level• Allow for complex animations• Trigger the creation of layers
97
97Friday, June 29, 2012
![Page 173: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/173.jpg)
98Friday, June 29, 2012
![Page 174: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/174.jpg)
Layer compositing rules
• Default in WebKit- transform3d- video- canvas (if accelerated)- CSS animations
99
99Friday, June 29, 2012
![Page 175: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/175.jpg)
Layer compositing rules
• Default in WebKit- transform3d- video- canvas (if accelerated)- CSS animations
• Additional rules on Android– fixed positioned– overflow-scroll– iframes– canvas– fixed background
99
99Friday, June 29, 2012
![Page 176: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/176.jpg)
Layer compositing rules
• Default in WebKit- transform3d- video- canvas (if accelerated)- CSS animations
• Additional rules on Android– fixed positioned– overflow-scroll– iframes– canvas– fixed background
99
Layers are an implementation detail: the final rendering is the same
99Friday, June 29, 2012
![Page 177: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/177.jpg)
Tips
• Put animated / appearing content on layers• Creating a layer is expensive• If something is on layer, leave it if you can• Pay attention to the size (256x256 tiles)• Prepare offscreen content (via translate3d(100%, 0, 0)) • If animating images, create a layer for them
- e.g. apply translate3d(0, 0, 0) on the <img> element directly• Try software rendering!
100
100Friday, June 29, 2012
![Page 178: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/178.jpg)
ICS JB101Friday, June 29, 2012
![Page 179: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/179.jpg)
102Friday, June 29, 2012
![Page 180: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/180.jpg)
Synchronization
102Friday, June 29, 2012
![Page 181: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/181.jpg)
Multithreading
103
UIThread
WebCoreThread
Events
Picture
103Friday, June 29, 2012
![Page 182: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/182.jpg)
Multithreading
103
UIThread
WebCoreThread
Events
PicturePicture
103Friday, June 29, 2012
![Page 183: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/183.jpg)
Multithreading
103
UIThread
WebCoreThread
Events
Picture
103Friday, June 29, 2012
![Page 184: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/184.jpg)
Asynchronous drawing
104
WebKit UI
Rasterization
104Friday, June 29, 2012
![Page 185: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/185.jpg)
Asynchronous drawing
104
WebKit
Picture
UI
Rasterization
104Friday, June 29, 2012
![Page 186: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/186.jpg)
Asynchronous drawing
104
WebKit
Picture
onPictureChanged
UI
Rasterization
104Friday, June 29, 2012
![Page 187: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/187.jpg)
Asynchronous drawing
104
WebKit
PictureRenderedContent
onPictureChanged
UI
Rasterization
104Friday, June 29, 2012
![Page 188: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/188.jpg)
Synchronizing rendering, example
• We want to know when some content has finished rendering- show some text message in the meantime
• Use the fact that CSS animations are synchronized• Solution in 4 parts:
- bridge object- CSS- HTML- JavaScript
105
105Friday, June 29, 2012
![Page 189: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/189.jpg)
Bridge public class JavaScriptInterface {
View mView;
JavaScriptInterface(View v) { mView = v; }
public void finishedRendering() { mView.setVisibility(View.INVISIBLE); } }
...
mWebView.addJavascriptInterface( new JavaScriptInterface(mTextView), "android");
106
106Friday, June 29, 2012
![Page 190: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/190.jpg)
CSS Magic
#transitionElement { -webkit-transform: translate3d(0, 0, 0);}
#transitionElement.finish { -webkit-transform: translate3d(0, 0, 1px); -webkit-transition-duration: 1ms;}
107
107Friday, June 29, 2012
![Page 191: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/191.jpg)
HTML
<body onload="load()">...
<div id="transitionElement"></body>
108
108Friday, June 29, 2012
![Page 192: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/192.jpg)
JavaScript
function load() { document.getElementById('transitionElement').className = 'finish'; document.getElementById('transitionElement').addEventListener( 'webkitTransitionEnd', function(e) { android.finishedRendering() } ); }
109
109Friday, June 29, 2012
![Page 193: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/193.jpg)
110Friday, June 29, 2012
![Page 194: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/194.jpg)
Debug
110Friday, June 29, 2012
![Page 195: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/195.jpg)
Using the Console
111
111Friday, June 29, 2012
![Page 196: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/196.jpg)
Using the Console
console.log("Hello World"); // Javascript
111
111Friday, June 29, 2012
![Page 197: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/197.jpg)
Using the Console
console.log("Hello World"); // Javascript
111
adb logcat
111Friday, June 29, 2012
![Page 198: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/198.jpg)
Using the Console
console.log("Hello World"); // Javascript
111
Console: Hello World http://www.example.com/hello.html :82
adb logcat
111Friday, June 29, 2012
![Page 199: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/199.jpg)
Using the Console
console.log(String) console.info(String) console.warn(String) console.error(String)
112
112Friday, June 29, 2012
![Page 200: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/200.jpg)
Using Console in WebView
WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.setWebChromeClient(new WebChromeClient() { public boolean onConsoleMessage(ConsoleMessage cm) { Log.d("MyApplication", cm.message() + " -- From line " + cm.lineNumber() + " of " + cm.sourceId() ); return true; } });
113
113Friday, June 29, 2012
![Page 201: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/201.jpg)
114Friday, June 29, 2012
![Page 202: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/202.jpg)
Selenium WebDriver
114Friday, June 29, 2012
![Page 203: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/203.jpg)
Selenium WebDriver
• Supports touch, gestures, screenshot captures• Can be started from Eclipse
• http://seleniumhq.wordpress.com/• http://code.google.com/p/selenium/wiki/AndroidDriver• http://selenium.googlecode.com/svn/trunk/docs/api/java/index.html
115
115Friday, June 29, 2012
![Page 204: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/204.jpg)
Example
public void testGoogleShouldWork() {
// Create a WebDriver instance with the activity in // which we want the test to run WebDriver driver = new AndroidDriver(getActivity());
// Let’s open a web page driver.get("http://www.google.com");
// Lookup for the search box by its name WebElement searchBox = driver.findElement(By.name("q"));
// Enter a search query and submit searchBox.sendKeys("weather in san francisco"); searchBox.submit();
116
116Friday, June 29, 2012
![Page 205: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/205.jpg)
Example
// Making sure that Google shows 11 results WebElement resultSection = driver.findElement(By.id("ires")); List<WebElement> searchResults = resultSection.findElements(By.tagName("li")); assertEquals(11, searchResults.size());
// Let’s ensure that the first result shown is the weather widget WebElement weatherWidget = searchResults.get(0); assertTrue(weatherWidget.getText().contains( "Weather for San Francisco, CA")); }
117
117Friday, June 29, 2012
![Page 206: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/206.jpg)
118Friday, June 29, 2012
![Page 207: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/207.jpg)
Android Browser debug mode
118Friday, June 29, 2012
![Page 208: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/208.jpg)
119Friday, June 29, 2012
![Page 209: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/209.jpg)
120Friday, June 29, 2012
![Page 210: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/210.jpg)
120Friday, June 29, 2012
![Page 211: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/211.jpg)
121Friday, June 29, 2012
![Page 212: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/212.jpg)
121Friday, June 29, 2012
![Page 213: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/213.jpg)
122Friday, June 29, 2012
![Page 214: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/214.jpg)
122Friday, June 29, 2012
![Page 215: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/215.jpg)
123Friday, June 29, 2012
![Page 216: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/216.jpg)
124Friday, June 29, 2012
![Page 217: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/217.jpg)
124Friday, June 29, 2012
![Page 218: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/218.jpg)
125Friday, June 29, 2012
![Page 219: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/219.jpg)
126Friday, June 29, 2012
![Page 220: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/220.jpg)
Anatomy of a Tile
127
127Friday, June 29, 2012
![Page 221: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/221.jpg)
Anatomy of a Tile
127
Coordinates
127Friday, June 29, 2012
![Page 222: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/222.jpg)
Anatomy of a Tile
127
Coordinates
Zoom Factor
127Friday, June 29, 2012
![Page 223: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/223.jpg)
Anatomy of a Tile
127
Coordinates
Zoom Factor
Painting time(CPU)
127Friday, June 29, 2012
![Page 224: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/224.jpg)
128Friday, June 29, 2012
![Page 225: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/225.jpg)
129Friday, June 29, 2012
![Page 226: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/226.jpg)
130Friday, June 29, 2012
![Page 227: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/227.jpg)
about:debug commands
about:debug.renderabout:debug.render.fileabout:debug.domabout:debug.dom.fileabout:debug.display
131
131Friday, June 29, 2012
![Page 228: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/228.jpg)
RenderTree
132
132Friday, June 29, 2012
![Page 229: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/229.jpg)
RenderTree
132
about:debug.render.file
132Friday, June 29, 2012
![Page 230: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/230.jpg)
RenderTree
132
about:debug.render.file /sdcard/renderTree.txt
132Friday, June 29, 2012
![Page 231: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/231.jpg)
RenderTree
132
about:debug.render.file /sdcard/renderTree.txt
adb pull /sdcard/renderTree.txt
132Friday, June 29, 2012
![Page 232: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/232.jpg)
RenderTree
layer at (0,0) size 962x520 RenderView at (0,0) size 962x50 layer at (0,0) size 962x520 RenderBlock {HTML} at (0,0) size 962x520 RenderBody {BODY} at (0,0) size 962x520 [color=#222222] [bgcolor=#FFFFFF] RenderBlock {DIV} at (0,0) size 962x30 RenderBlock {DIV} at (0,0) size 962x30 RenderBlock {DIV} at (0,0) size 962x0 RenderBlock {DIV} at (0,30) size 962x0 RenderBlock {DIV} at (0,69) size 962x451 RenderBlock {SPAN} at (0,0) size 962x402 RenderBlock {CENTER} at (0,0) size 962x402 RenderBlock {DIV} at (0,0) size 962x231 RenderImage {IMG} at (299,0) size 364x207 RenderBlock {DIV} at (0,231) size 962x102 RenderBlock {DIV} at (0,333) size 962x69
133
133Friday, June 29, 2012
![Page 233: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/233.jpg)
LayersTree
134
about:debug.display /sdcard/layersTree.plist
adb pull /sdcard/layersTree.plist
134Friday, June 29, 2012
![Page 234: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/234.jpg)
about:debug.display layer = 616fe7e8; layerId = 370; haveClip = 0; isFixed = 1; opacity = 1.000; size = { w = 1000.000; h = 57.000; }; position = { x = 0.000; y = 3991.406; }; anchor = { x = 0.500; y = 0.500; }; drawMatrix = { (1.00,0.00,0.00,0.00),(0.00,1.00,0.00,0.00), (0.00,0.00,1.00,0.00),(0.00,3991.41,0.00,1.00) }; transformMatrix = { (1.00,0.00,0.00,0.00),(0.00,1.00,0.00,0.00), (0.00,0.00,1.00,0.00),(0.00,0.00,0.00,1.00) }; clippingRect = { x = 0.000; y = 332.000; w = 1000.000; h = 5347.000; }; m_content.width = 1000; m_content.height = 57; fixedLeft = { type = 4; value = 0.00; }; fixedTop = { type = 4; value = 0.00; }; fixedRight = { type = 4; value = 0.00; }; fixedMarginLeft = { type = 4; value = 0.00; };
135
135Friday, June 29, 2012
![Page 235: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/235.jpg)
about:debug.display layer = 616fe7e8; layerId = 370; haveClip = 0; isFixed = 1; opacity = 1.000; size = { w = 1000.000; h = 57.000; }; position = { x = 0.000; y = 3991.406; }; anchor = { x = 0.500; y = 0.500; }; drawMatrix = { (1.00,0.00,0.00,0.00),(0.00,1.00,0.00,0.00), (0.00,0.00,1.00,0.00),(0.00,3991.41,0.00,1.00) }; transformMatrix = { (1.00,0.00,0.00,0.00),(0.00,1.00,0.00,0.00), (0.00,0.00,1.00,0.00),(0.00,0.00,0.00,1.00) }; clippingRect = { x = 0.000; y = 332.000; w = 1000.000; h = 5347.000; }; m_content.width = 1000; m_content.height = 57; fixedLeft = { type = 4; value = 0.00; }; fixedTop = { type = 4; value = 0.00; }; fixedRight = { type = 4; value = 0.00; }; fixedMarginLeft = { type = 4; value = 0.00; };
135
135Friday, June 29, 2012
![Page 236: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/236.jpg)
136Friday, June 29, 2012
![Page 237: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/237.jpg)
137Friday, June 29, 2012
![Page 238: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/238.jpg)
What’s coming up
137Friday, June 29, 2012
![Page 239: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/239.jpg)
HierarchyViewer
138Friday, June 29, 2012
![Page 240: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/240.jpg)
139Friday, June 29, 2012
![Page 241: Android Webview](https://reader036.fdocuments.in/reader036/viewer/2022081506/55cf969f550346d0338cbc52/html5/thumbnails/241.jpg)
Questions?
139Friday, June 29, 2012