Android Webview
Transcript of Android Webview
1Friday, June 29, 2012
Android WebViewNicolas Roard
1Friday, June 29, 2012
2Friday, June 29, 2012
What are we going to talk about?
2Friday, June 29, 2012
WebKit timeline
3
KDEKHTML1998
WebCore+
Safari2003
WebKitopen sourced
2005
Chrome+
Android2008
3Friday, June 29, 2012
ArchitectureArchitecture4Friday, June 29, 2012
5Friday, June 29, 2012
WebKit
5Friday, June 29, 2012
Overview
6
6Friday, June 29, 2012
Overview
6
WebKit
WebCorelayout engine JavaScriptCore
6Friday, June 29, 2012
Overview
7
7Friday, June 29, 2012
Overview
7
WebKit
7Friday, June 29, 2012
Resources(images, html,...)
Overview
7
WebKit
7Friday, June 29, 2012
Resources(images, html,...)
Overview
7
WebKit
7Friday, June 29, 2012
Resources(images, html,...)
Overview
7
WebKit
DOM
7Friday, June 29, 2012
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
7Friday, June 29, 2012
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
Layout
7Friday, June 29, 2012
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
Layout
Platform
7Friday, June 29, 2012
Resources(images, html,...)
Overview
7
WebKit
DOM
Javascript
Layout
Rendering
Platform
7Friday, June 29, 2012
8Friday, June 29, 2012
Platform
8Friday, June 29, 2012
Platform implementation
9
9Friday, June 29, 2012
Platform implementation
9
Network / Disk access
9Friday, June 29, 2012
Platform implementation
9
Network / Disk access System integration
9Friday, June 29, 2012
Platform implementation
9
Network / Disk access System integration
Graphics / Rendering
9Friday, June 29, 2012
Platform implementation
9
Network / Disk access
Javascript engine
System integration
Graphics / Rendering
9Friday, June 29, 2012
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
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
Sunspider benchmark
12
0
600
1200
1800
2400
3000
Nexus S Galaxy Nexus Laptop
268
1521
2743
(lower is better)
12Friday, June 29, 2012
13Friday, June 29, 2012
Rendering
13Friday, June 29, 2012
Resources(images, html,...)
Overview
14
WebKit
DOM
Javascript
Layout
Rendering
Platform
14Friday, June 29, 2012
Rendering Loop
15
15Friday, June 29, 2012
Rendering Loop
15
Event
15Friday, June 29, 2012
Paint
Rendering Loop
15
Event
15Friday, June 29, 2012
Paint
Rendering Loop
15
Event Draw
15Friday, June 29, 2012
Paint
Rendering Loop
15
Event Draw
15Friday, June 29, 2012
Rendering
16
Document
16Friday, June 29, 2012
Rendering
16
Document
Viewport
16Friday, June 29, 2012
Rendering
16
Document
Viewport
16Friday, June 29, 2012
Rendering
16
Document
Viewport
16Friday, June 29, 2012
Rendering
16
Document
Viewport
16Friday, June 29, 2012
17Friday, June 29, 2012
Before Honeycomb
17Friday, June 29, 2012
RenderingPicture
Resources(images, html,...)
Android WebView Software Rendering
18
WebKit
DOM
Javascript
Layout
Platform
18Friday, June 29, 2012
RenderingPicture
Resources(images, html,...)
Android WebView Software Rendering
18
WebKit
DOM
Javascript
Layout
Platform
18Friday, June 29, 2012
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
Multithreading
20
UIThread
WebCoreThread
Picture
20Friday, June 29, 2012
Multithreading
20
UIThread
WebCoreThread
Events
Picture
20Friday, June 29, 2012
Multithreading
20
UIThread
WebCoreThread
Events
PicturePicture
20Friday, June 29, 2012
Multithreading
20
UIThread
WebCoreThread
Events
Picture
20Friday, June 29, 2012
Problems with software rendering
21
21Friday, June 29, 2012
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
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
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
22Friday, June 29, 2012
Honeycomb and beyondAdding Hardware Acceleration
22Friday, June 29, 2012
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
Tiling Content
24Friday, June 29, 2012
Paint
Software Rendering
25
Scroll Draw
25Friday, June 29, 2012
Paint
Software Rendering
25
Scroll Draw
16.66ms
25Friday, June 29, 2012
PaintPaint
Software Rendering
25
Scroll Draw
16.66ms
25Friday, June 29, 2012
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
26
Software Rendering
Viewport
ViewportViewportViewport
26Friday, June 29, 2012
Ideally...
27
Scroll Draw
<16.66ms
27Friday, June 29, 2012
Hardware Rendering
28
Scroll Draw Tiles
28Friday, June 29, 2012
Hardware Rendering
28
Scroll Draw Tiles
Thread 2
Thread 1
28Friday, June 29, 2012
Hardware Rendering
28
Paint
Scroll Draw Tiles
Thread 2
Thread 1
28Friday, June 29, 2012
Hardware Rendering
28
Paint
Scroll Draw
New Tiles
Tiles
Thread 2
Thread 1
28Friday, June 29, 2012
Hardware Rendering
28
Paint
Scroll Draw
New Tiles
Tiles
Paint
Thread 2
Thread 1
28Friday, June 29, 2012
Hardware Rendering
28
Paint
Scroll Draw
New Tiles
Tiles
Paint
Thread 2
Thread 1
28Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
29
Viewport
Tiled Rendering
29Friday, June 29, 2012
Tiles Generation
30
WebCoreThread
UIThread
30Friday, June 29, 2012
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
UIThread
30Friday, June 29, 2012
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
Tiles Generation
30
TextureGeneration
Thread
WebCoreThread
Picture
UIThread
30Friday, June 29, 2012
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
WebKit Layers
32Friday, June 29, 2012
Moving content
33
33Friday, June 29, 2012
Moving content
33
33Friday, June 29, 2012
Moving content
33
33Friday, June 29, 2012
Moving content
34
34Friday, June 29, 2012
Moving content
35
35Friday, June 29, 2012
Moving content
36
36Friday, June 29, 2012
Moving content
37
37Friday, June 29, 2012
Moving content
38
38Friday, June 29, 2012
Moving content - with a layer
39
39Friday, June 29, 2012
Moving content - with a layer
39
39Friday, June 29, 2012
40Friday, June 29, 2012
41Friday, June 29, 2012
42Friday, June 29, 2012
43Friday, June 29, 2012
44Friday, June 29, 2012
45Friday, June 29, 2012
46Friday, June 29, 2012
Base Layer
Video Layer Clip Layer
Scrollable Layer
47Friday, June 29, 2012
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
WebKit CSS 3D
49Friday, June 29, 2012
50Friday, June 29, 2012
51Friday, June 29, 2012
52Friday, June 29, 2012
WebKit Layers...on Android
53Friday, June 29, 2012
Architecture
54
UIThread
WebCoreThread
Events
PicturePicture
54Friday, June 29, 2012
Architecture
55
UIThread
WebCoreThread
Events
LayersLayers
CSS Animations
55Friday, June 29, 2012
CSS Animations
56
56Friday, June 29, 2012
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
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
57Friday, June 29, 2012
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
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
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
61Friday, June 29, 2012
62Friday, June 29, 2012
63Friday, June 29, 2012
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
Using WebView
65Friday, June 29, 2012
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
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
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
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
70Friday, June 29, 2012
Setup
70Friday, June 29, 2012
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
Internet permission
<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... </manifest>
72
72Friday, June 29, 2012
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
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
Using javascript
WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true);
75
75Friday, June 29, 2012
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
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
78Friday, June 29, 2012
Accessibility
78Friday, June 29, 2012
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
80Friday, June 29, 2012
Inline / Fullscreen Video
80Friday, June 29, 2012
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
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
83Friday, June 29, 2012
Binding javascript code to dalvik
83Friday, June 29, 2012
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
Binding javascript code to java
WebView webView = (WebView) findViewById(R.id.webview); webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
85
85Friday, June 29, 2012
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
87Friday, June 29, 2012
Viewport Tag
87Friday, June 29, 2012
Viewport tag
88
<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /></head>
88Friday, June 29, 2012
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
90Friday, June 29, 2012
Layers / Animations
90Friday, June 29, 2012
Use layers!
91
91Friday, June 29, 2012
Use layers!var elem = document.getElementById("myElement");
91
91Friday, June 29, 2012
Use layers!
elem.style.left = x;elem.style.top = y;
var elem = document.getElementById("myElement");
91
91Friday, June 29, 2012
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
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
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
Animation
92
92Friday, June 29, 2012
Animation
92
92Friday, June 29, 2012
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
94Friday, June 29, 2012
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
96Friday, June 29, 2012
Use CSS animations
• Much Faster• V-Synced• Higher level• Allow for complex animations• Trigger the creation of layers
97
97Friday, June 29, 2012
98Friday, June 29, 2012
Layer compositing rules
• Default in WebKit- transform3d- video- canvas (if accelerated)- CSS animations
99
99Friday, June 29, 2012
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
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
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
ICS JB101Friday, June 29, 2012
102Friday, June 29, 2012
Synchronization
102Friday, June 29, 2012
Multithreading
103
UIThread
WebCoreThread
Events
Picture
103Friday, June 29, 2012
Multithreading
103
UIThread
WebCoreThread
Events
PicturePicture
103Friday, June 29, 2012
Multithreading
103
UIThread
WebCoreThread
Events
Picture
103Friday, June 29, 2012
Asynchronous drawing
104
WebKit UI
Rasterization
104Friday, June 29, 2012
Asynchronous drawing
104
WebKit
Picture
UI
Rasterization
104Friday, June 29, 2012
Asynchronous drawing
104
WebKit
Picture
onPictureChanged
UI
Rasterization
104Friday, June 29, 2012
Asynchronous drawing
104
WebKit
PictureRenderedContent
onPictureChanged
UI
Rasterization
104Friday, June 29, 2012
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
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
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
HTML
<body onload="load()">...
<div id="transitionElement"></body>
108
108Friday, June 29, 2012
JavaScript
function load() { document.getElementById('transitionElement').className = 'finish'; document.getElementById('transitionElement').addEventListener( 'webkitTransitionEnd', function(e) { android.finishedRendering() } ); }
109
109Friday, June 29, 2012
110Friday, June 29, 2012
Debug
110Friday, June 29, 2012
Using the Console
111
111Friday, June 29, 2012
Using the Console
console.log("Hello World"); // Javascript
111
111Friday, June 29, 2012
Using the Console
console.log("Hello World"); // Javascript
111
adb logcat
111Friday, June 29, 2012
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
Using the Console
console.log(String) console.info(String) console.warn(String) console.error(String)
112
112Friday, June 29, 2012
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
114Friday, June 29, 2012
Selenium WebDriver
114Friday, June 29, 2012
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
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
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
118Friday, June 29, 2012
Android Browser debug mode
118Friday, June 29, 2012
119Friday, June 29, 2012
120Friday, June 29, 2012
120Friday, June 29, 2012
121Friday, June 29, 2012
121Friday, June 29, 2012
122Friday, June 29, 2012
122Friday, June 29, 2012
123Friday, June 29, 2012
124Friday, June 29, 2012
124Friday, June 29, 2012
125Friday, June 29, 2012
126Friday, June 29, 2012
Anatomy of a Tile
127
127Friday, June 29, 2012
Anatomy of a Tile
127
Coordinates
127Friday, June 29, 2012
Anatomy of a Tile
127
Coordinates
Zoom Factor
127Friday, June 29, 2012
Anatomy of a Tile
127
Coordinates
Zoom Factor
Painting time(CPU)
127Friday, June 29, 2012
128Friday, June 29, 2012
129Friday, June 29, 2012
130Friday, June 29, 2012
about:debug commands
about:debug.renderabout:debug.render.fileabout:debug.domabout:debug.dom.fileabout:debug.display
131
131Friday, June 29, 2012
RenderTree
132
132Friday, June 29, 2012
RenderTree
132
about:debug.render.file
132Friday, June 29, 2012
RenderTree
132
about:debug.render.file /sdcard/renderTree.txt
132Friday, June 29, 2012
RenderTree
132
about:debug.render.file /sdcard/renderTree.txt
adb pull /sdcard/renderTree.txt
132Friday, June 29, 2012
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
LayersTree
134
about:debug.display /sdcard/layersTree.plist
adb pull /sdcard/layersTree.plist
134Friday, June 29, 2012
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
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
136Friday, June 29, 2012
137Friday, June 29, 2012
What’s coming up
137Friday, June 29, 2012
HierarchyViewer
138Friday, June 29, 2012
139Friday, June 29, 2012
Questions?
139Friday, June 29, 2012