tools/perf/page_sets/text_selection_sites.py

   1 # Copyright 2014 The Chromium Authors. All rights reserved.
   2 # Use of this source code is governed by a BSD-style license that can be
   3 # found in the LICENSE file.
   4 from telemetry import story
   5 from telemetry.page import page as page_module
   6 from telemetry.page import shared_page_state
   7
   8
   9 class SimplePage(page_module.Page):
  10
  11   def __init__(self, url, page_set):
  12     super(SimplePage, self).__init__(
  13         url=url,
  14         page_set=page_set,
  15         shared_page_state_class=shared_page_state.SharedPageState,
  16         credentials_path='data/credentials.json')
  17     self.archive_data_file = 'data/text_selection_sites.json'
  18
  19   def RunNavigateSteps(self, action_runner):
  20     super(SimplePage, self).RunNavigateSteps(action_runner)
  21     action_runner.WaitForJavaScriptCondition(
  22         'document.readyState == "complete"')
  23
  24
  25 class SimpleTextSelectionPage(SimplePage):
  26
  27   def __init__(self, url, page_set):
  28     super(SimpleTextSelectionPage, self).__init__(url=url, page_set=page_set)
  29
  30   def RunPageInteractions(self, action_runner):
  31     # Create a fixed position div in the top left corner of the page, and
  32     # another one in the bottom right corner of the page.
  33     # Select the text within the first div.
  34     action_runner.ExecuteJavaScript('''
  35         (function() {
  36           var text_div = document.createElement('div');
  37           var text_div_2 = document.createElement('div');
  38
  39           text_div.style.fontSize = text_div_2.style.fontSize = "10vh";
  40           text_div.style.lineHeight = text_div_2.style.lineHeight = "normal";
  41           text_div.style.color = text_div_2.style.color = "red";
  42           text_div.style.zIndex = text_div_2.style.zIndex = "1000";
  43           text_div.style.position = text_div_2.style.position = "fixed";
  44           text_div.style.left = "10%";
  45           text_div.style.top = "10%";
  46           text_div_2.style.right="0";
  47           text_div_2.style.bottom="2%";
  48
  49           text_div.id="text-for-perf-test";
  50           text_div_2.id="text-for-perf-test-2";
  51           text_div.innerText="Hello";
  52           text_div_2.innerText="World";
  53
  54           document.body.insertBefore(text_div, document.body.firstChild);
  55           document.body.appendChild(text_div_2);
  56
  57           var selection = window.getSelection();
  58           var textNode = text_div.childNodes[0];
  59           selection.setBaseAndExtent(textNode, 0, textNode, 5);
  60
  61           window.requestAnimationFrame(function() {
  62             text_div.style.color="green";
  63           });
  64         })();''')
  65
  66     # Wait two frames so that the selection information is sent to chromium
  67     # and it is able to process input events interacting with selection.
  68     action_runner.WaitForJavaScriptCondition(
  69         'document.getElementById("text-for-perf-test").style.color == "green"')
  70     action_runner.ExecuteJavaScript('''
  71           window.requestAnimationFrame(function() {
  72             document.getElementById("text-for-perf-test").style.color="red";
  73           });
  74         ''')
  75     action_runner.WaitForJavaScriptCondition(
  76         'document.getElementById("text-for-perf-test").style.color == "red"')
  77
  78     # Confirm that the selection is set correctly.
  79     text = action_runner.EvaluateJavaScript('window.getSelection().toString()')
  80     assert text == "Hello"
  81
  82     # Tap on the selected text to make the handles show up.
  83     with action_runner.CreateGestureInteraction('TapAction'):
  84       action_runner.TapElement('#text-for-perf-test')
  85
  86     text_div_bottom = float(action_runner.EvaluateJavaScript('''
  87         document.getElementById("text-for-perf-test").getClientRects()[0].bottom
  88         '''))
  89     text_div_2_bottom = float(action_runner.EvaluateJavaScript('''
  90         document.getElementById(
  91             "text-for-perf-test-2").getClientRects()[0].bottom
  92         '''))
  93     body_rect_str = action_runner.EvaluateJavaScript('''
  94         var r = window.__GestureCommon_GetBoundingVisibleRect(document.body);
  95         r.left + " " + r.top + " " + r.height + " " + r.width;
  96         ''')
  97     body_rect_left, body_rect_top, body_rect_height, body_rect_width = map(
  98         float, body_rect_str.split())
  99
 100     # Start the drag gesture 5 pixels below the bottom left corner of the
 101     # first div in order to drag the left selection handle.
 102     p1_left_ratio = .1
 103     p1_top_ratio = float((text_div_bottom + 5 - body_rect_top) /
 104                          body_rect_height)
 105
 106     # End the drag gesture below the bottom right corner of the second div,
 107     # so that the selection end is in the second div and we can easily
 108     # determine the position of the corresponding handle.
 109     p2_top_ratio = float((text_div_2_bottom - body_rect_top) /
 110                          body_rect_height)
 111
 112     with action_runner.CreateGestureInteraction('DragAction-1'):
 113       action_runner.DragPage(left_start_ratio=p1_left_ratio,
 114           top_start_ratio=p1_top_ratio, left_end_ratio=.99,
 115           top_end_ratio=p2_top_ratio, speed_in_pixels_per_second=300,
 116           use_touch=1)
 117
 118     # Confirm that the selection has changed.
 119     text = action_runner.EvaluateJavaScript('window.getSelection().toString()')
 120     assert text != "Hello"
 121
 122     # Determine the coordinates of the end of the selection
 123     sel_end_str = action_runner.EvaluateJavaScript('''
 124           var rects = window.getSelection().getRangeAt(0).getClientRects();
 125           var last_rect = rects[rects.length - 1];
 126           last_rect.right + " " + last_rect.bottom;
 127         ''')
 128     sel_end_x, sel_end_y = map(float, sel_end_str.split())
 129
 130     # Start the second drag gesture 5 pixels below the end of the selection
 131     # in order to drag the selection handle.
 132     p2_left_ratio = float((sel_end_x - body_rect_left) / body_rect_width)
 133     p2_top_ratio = float((sel_end_y + 5 - body_rect_top) / body_rect_height)
 134
 135     with action_runner.CreateGestureInteraction('DragAction-2'):
 136       action_runner.DragPage(left_start_ratio=p2_left_ratio,
 137           top_start_ratio=p2_top_ratio, left_end_ratio=p1_left_ratio,
 138           top_end_ratio=p1_top_ratio, speed_in_pixels_per_second=300,
 139           use_touch=1)
 140
 141     # Confirm that the selection is back to the text in the first div.
 142     text = action_runner.EvaluateJavaScript('window.getSelection().toString()')
 143     assert text == "Hello"
 144
 145
 146 class TextSelectionSitesPageSet(story.StorySet):
 147   def __init__(self):
 148     super(TextSelectionSitesPageSet, self).__init__(
 149       archive_data_file='data/top_10_mobile.json',
 150       cloud_storage_bucket=story.PARTNER_BUCKET)
 151
 152     # A subset of top_10_mobile page set
 153     page_urls = [
 154         'https://www.google.com/#hl=en&q=science',
 155         'https://m.facebook.com/rihanna',
 156         'http://search.yahoo.com/search;_ylt=?p=google',
 157         'http://www.baidu.com/s?word=google',
 158         'https://mobile.twitter.com/justinbieber?skip_interstitial=true',
 159         'http://yandex.ru/touchsearch?text=science'
 160     ]
 161
 162     for url in page_urls:
 163       self.AddStory(SimpleTextSelectionPage(url, self))