Adding Maps page to page_sets for telemetry.

This CL adds google maps page to telemetry, and runs a synthetic drag
gesture on the page. This helps testing of maps page in telemetry to
track the performance on desktop chrome.

BUG=457148

Review URL: https://codereview.chromium.org/955653003

Cr-Commit-Position: refs/heads/master@{#319135}

tools/perf/page_sets/data/top_25.json

 {
-    "description": "Describes the Web Page Replay archives for a page set. Don't edit by hand! Use record_wpr for updating.", 
+    "description": "Describes the Web Page Replay archives for a user story set. Don't edit by hand! Use record_wpr for updating.", 
     "archives": {
         "top_25_003.wpr": [
             "Facebook"
@@ -37,4 +37,4 @@
             "http://techcrunch.com"
         ]
     }
-}
\ No newline at end of file
+}

tools/perf/page_sets/data/top_25_004.wpr.sha1

+9e843778b9da00fe08668af3cb6d09c69d705a49
\ No newline at end of file

tools/perf/page_sets/data/top_25_smooth.json

@@ -7,6 +7,9 @@
         "top_25_001.wpr": [
             "https://plus.google.com/110031535020051778989/posts"
         ], 
+        "top_25_004.wpr": [
+            "Maps"
+        ], 
         "top_25_002.wpr": [
             "https://www.google.com/search?q=cats&tbm=isch"
         ], 
@@ -37,4 +40,4 @@
             "http://techcrunch.com"
         ]
     }
-}
\ No newline at end of file
+}

tools/perf/page_sets/top_25_smooth.py

@@ -75,6 +75,25 @@ class GoogleDocSmoothPage(top_pages.GoogleDocPage):
     interaction.End()
 
 
+class GoogleMapsPage(top_pages.GoogleMapsPage):
+
+  """ Why: productivity, top google properties; Supports drag gestures """
+
+  def RunPageInteractions(self, action_runner):
+    interaction = action_runner.BeginGestureInteraction(
+        'DragAction', is_smooth=True)
+    action_runner.DragPage(left_start_ratio=0.5, top_start_ratio=0.75,
+                           left_end_ratio=0.75, top_end_ratio=0.5)
+    interaction.End()
+    action_runner.Wait(2)
+    interaction = action_runner.BeginGestureInteraction(
+        'DragAction', is_smooth=True)
+    action_runner.DragPage(left_start_ratio=0.5, top_start_ratio=0.5,
+                           left_end_ratio=0.35, top_end_ratio=0.75)
+    interaction.End()
+    # TODO(ssid): Add zoom gestures after fixing bug crbug.com/462214.
+
+
 class ESPNSmoothPage(top_pages.ESPNPage):
 
   """ Why: #1 sports """
@@ -126,6 +145,7 @@ class Top25SmoothPageSet(page_set_module.PageSet):
         top_pages.WeatherPage)(self))
     self.AddUserStory(_CreatePageClassWithSmoothInteractions(
         top_pages.YahooGamesPage)(self))
+    self.AddUserStory(GoogleMapsPage(self))
 
     other_urls = [
         # Why: #1 news worldwide (Alexa global)

tools/perf/page_sets/top_pages.py

@@ -98,6 +98,27 @@ class GoogleDocPage(TopPages):
     action_runner.WaitForJavaScriptCondition(
         'document.getElementsByClassName("kix-appview-editor").length')
 
+class GoogleMapsPage(TopPages):
+
+  """ Why: productivity, top google properties; Supports drag gesturee """
+
+  def __init__(self, page_set):
+    super(GoogleMapsPage, self).__init__(
+        url='https://www.google.co.uk/maps/@51.5043968,-0.1526806',
+        page_set=page_set,
+        name='Maps')
+
+  def RunNavigateSteps(self, action_runner):
+    super(GoogleMapsPage, self).RunNavigateSteps(action_runner)
+    action_runner.WaitForElement(selector='.widget-scene-canvas')
+    action_runner.WaitForElement(selector='.widget-zoom-in')
+    action_runner.WaitForElement(selector='.widget-zoom-out')
+
+  # Disabled on android since desktop record of maps doesn't load in android.
+  def CanRunOnBrowser(self, browser_info):
+    return (browser_info._browser._platform_backend.platform.GetOSName() !=
+        'android')
+
 
 class GooglePlusPage(TopPages):
 

tools/telemetry/telemetry/page/actions/action_runner.py

@@ -6,6 +6,7 @@ import time
 import logging
 import urlparse
 
+from telemetry.page.actions.drag import DragAction
 from telemetry.page.actions.javascript_click import ClickElementAction
 from telemetry.page.actions.loop import LoopAction
 from telemetry.page.actions.mouse_click import MouseClickAction
@@ -239,6 +240,35 @@ class ActionRunner(object):
     self._RunAction(ClickElementAction(
         selector=selector, text=text, element_function=element_function))
 
+  def DragPage(self, left_start_ratio, top_start_ratio, left_end_ratio,
+               top_end_ratio, speed_in_pixels_per_second=800, use_touch=False):
+    """Perform a drag gesture on the page.
+
+    You should specify a start and an end point in ratios of page width and
+    height (see drag.js for full implementation).
+
+    Args:
+      left_start_ratio: The horizontal starting coordinate of the
+          gesture, as a ratio of the visible bounding rectangle for
+          document.body.
+      top_start_ratio: The vertical starting coordinate of the
+          gesture, as a ratio of the visible bounding rectangle for
+          document.body.
+      left_end_ratio: The horizontal ending coordinate of the
+          gesture, as a ratio of the visible bounding rectangle for
+          document.body.
+      top_end_ratio: The vertical ending coordinate of the
+          gesture, as a ratio of the visible bounding rectangle for
+          document.body.
+      speed_in_pixels_per_second: The speed of the gesture (in pixels/s).
+      use_touch: Whether dragging should be done with touch input.
+    """
+    self._RunAction(DragAction(
+        left_start_ratio=left_start_ratio, top_start_ratio=top_start_ratio,
+        left_end_ratio=left_end_ratio, top_end_ratio=top_end_ratio,
+        speed_in_pixels_per_second=speed_in_pixels_per_second,
+        use_touch=use_touch))
+
   def PinchPage(self, left_anchor_ratio=0.5, top_anchor_ratio=0.5,
                 scale_factor=None, speed_in_pixels_per_second=800):
     """Perform the pinch gesture on the page.

tools/telemetry/telemetry/page/actions/drag.js

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This file provides the DragAction object, which performs drag on a page
+// using given start and end positions:
+//   1. var action = new __DragAction(callback)
+//   2. action.start(drag_options)
+'use strict';
+
+(function() {
+  function DragGestureOptions(opt_options) {
+      this.element_ = opt_options.element;
+      this.left_start_ratio_ = opt_options.left_start_ratio;
+      this.top_start_ratio_ = opt_options.top_start_ratio;
+      this.left_end_ratio_ = opt_options.left_end_ratio;
+      this.top_end_ratio_ = opt_options.top_end_ratio;
+      this.speed_ = opt_options.speed;
+      this.gesture_source_type_ = opt_options.gesture_source_type;
+  }
+
+  function supportedByBrowser() {
+    return !!(window.chrome &&
+              chrome.gpuBenchmarking &&
+              chrome.gpuBenchmarking.smoothDrag);
+  }
+
+  // This class performs drag action using given start and end positions,
+  // by a single drag gesture.
+  function DragAction(opt_callback) {
+    this.beginMeasuringHook = function() {}
+    this.endMeasuringHook = function() {}
+
+    this.callback_ = opt_callback;
+  }
+
+  DragAction.prototype.start = function(opt_options) {
+    this.options_ = new DragGestureOptions(opt_options);
+    requestAnimationFrame(this.startGesture_.bind(this));
+  };
+
+  DragAction.prototype.startGesture_ = function() {
+    this.beginMeasuringHook();
+
+    var rect = __GestureCommon_GetBoundingVisibleRect(this.options_.element_);
+    var start_left =
+        rect.left + (rect.width * this.options_.left_start_ratio_);
+    var start_top =
+        rect.top + (rect.height * this.options_.top_start_ratio_);
+    var end_left =
+        rect.left + (rect.width * this.options_.left_end_ratio_);
+    var end_top =
+        rect.top + (rect.height * this.options_.top_end_ratio_);
+    chrome.gpuBenchmarking.smoothDrag(
+        start_left, start_top, end_left, end_top,
+        this.onGestureComplete_.bind(this), this.options_.gesture_source_type_,
+        this.options_.speed_);
+  };
+
+  DragAction.prototype.onGestureComplete_ = function() {
+    this.endMeasuringHook();
+
+    // We're done.
+    if (this.callback_)
+      this.callback_();
+  };
+
+  window.__DragAction = DragAction;
+  window.__DragAction_SupportedByBrowser = supportedByBrowser;
+})();

tools/telemetry/telemetry/page/actions/drag.py

+# Copyright 2015 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+"""A Telemetry page_action that performs the "drag" action on pages.
+
+Action parameters are:
+- selector: If no selector is defined then the action attempts to drag the
+            document element on the page.
+- element_function: CSS selector used to evaluate callback when test completes
+- text: The element with exact text is selected.
+- left_start_ratio: ratio of start point's left coordinate to the element
+                    width.
+- top_start_ratio: ratio of start point's top coordinate to the element height.
+- left_end_ratio: ratio of end point's left coordinate to the element width.
+- left_end_ratio: ratio of end point's top coordinate to the element height.
+- speed_in_pixels_per_second: speed of the drag gesture in pixels per second.
+- use_touch: boolean value to specify if gesture should use touch input or not.
+"""
+
+import os
+
+from telemetry.page.actions import page_action
+
+
+class DragAction(page_action.PageAction):
+
+  def __init__(self, selector=None, text=None, element_function=None,
+               left_start_ratio=None, top_start_ratio=None, left_end_ratio=None,
+               top_end_ratio=None, speed_in_pixels_per_second=800,
+               use_touch=False):
+    super(DragAction, self).__init__()
+    self._selector = selector
+    self._text = text
+    self._element_function = element_function
+    self._left_start_ratio = left_start_ratio
+    self._top_start_ratio = top_start_ratio
+    self._left_end_ratio = left_end_ratio
+    self._top_end_ratio = top_end_ratio
+    self._speed = speed_in_pixels_per_second
+    self._use_touch = use_touch
+
+  def WillRunAction(self, tab):
+    for js_file in ['gesture_common.js', 'drag.js']:
+      with open(os.path.join(os.path.dirname(__file__), js_file)) as f:
+        js = f.read()
+        tab.ExecuteJavaScript(js)
+
+    # Fail if browser doesn't support synthetic drag gestures.
+    if not tab.EvaluateJavaScript('window.__DragAction_SupportedByBrowser()'):
+      raise page_action.PageActionNotSupported(
+          'Synthetic drag not supported for this browser')
+
+    # Fail if this action requires touch and we can't send touch events.
+    if self._use_touch:
+      if not page_action.IsGestureSourceTypeSupported(tab, 'touch'):
+        raise page_action.PageActionNotSupported(
+            'Touch drag not supported for this browser')
+
+      if (page_action.GetGestureSourceTypeFromOptions(tab) ==
+          'chrome.gpuBenchmarking.MOUSE_INPUT'):
+        raise page_action.PageActionNotSupported(
+            'Drag requires touch on this page but mouse input was requested')
+
+    done_callback = 'function() { window.__dragActionDone = true; }'
+    tab.ExecuteJavaScript('''
+        window.__dragActionDone = false;
+        window.__dragAction = new __DragAction(%s);'''
+        % done_callback)
+
+  def RunAction(self, tab):
+    if (self._selector is None and self._text is None and
+        self._element_function is None):
+      self._element_function = 'document.body'
+
+    gesture_source_type = 'chrome.gpuBenchmarking.TOUCH_INPUT'
+    if (page_action.IsGestureSourceTypeSupported(tab, 'mouse') and
+        not self._use_touch):
+      gesture_source_type = 'chrome.gpuBenchmarking.MOUSE_INPUT'
+
+    code = '''
+        function(element, info) {
+          if (!element) {
+            throw Error('Cannot find element: ' + info);
+          }
+          window.__dragAction.start({
+            element: element,
+            left_start_ratio: %s,
+            top_start_ratio: %s,
+            left_end_ratio: %s,
+            top_end_ratio: %s,
+            speed: %s,
+            gesture_source_type: %s
+          });
+        }''' % (self._left_start_ratio,
+                self._top_start_ratio,
+                self._left_end_ratio,
+                self._top_end_ratio,
+                self._speed,
+                gesture_source_type)
+    page_action.EvaluateCallbackWithElement(
+        tab, code, selector=self._selector, text=self._text,
+        element_function=self._element_function)
+    tab.WaitForJavaScriptExpression('window.__dragActionDone', 60)

tools/telemetry/telemetry/page/actions/drag_unittest.py

+# Copyright 2015 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+import math
+import os
+
+from telemetry.page.actions import drag
+from telemetry.unittest_util import tab_test_case
+
+
+class DragActionTest(tab_test_case.TabTestCase):
+  def testDragAction(self):
+    self.Navigate('draggable.html')
+
+    with open(os.path.join(os.path.dirname(__file__),
+                           'gesture_common.js')) as f:
+      js = f.read()
+      self._tab.ExecuteJavaScript(js)
+
+    div_width = self._tab.EvaluateJavaScript(
+        '__GestureCommon_GetBoundingVisibleRect(document.body).width')
+    div_height = self._tab.EvaluateJavaScript(
+        '__GestureCommon_GetBoundingVisibleRect(document.body).height')
+
+    i = drag.DragAction(left_start_ratio=0.5, top_start_ratio=0.5,
+            left_end_ratio=0.75, top_end_ratio=0.75)
+    i.WillRunAction(self._tab)
+    self._tab.ExecuteJavaScript('''
+        window.__dragAction.beginMeasuringHook = function() {
+            window.__didBeginMeasuring = true;
+        };
+        window.__dragAction.endMeasuringHook = function() {
+            window.__didEndMeasuring = true;
+        };''')
+    i.RunAction(self._tab)
+
+    self.assertTrue(self._tab.EvaluateJavaScript('window.__didBeginMeasuring'))
+    self.assertTrue(self._tab.EvaluateJavaScript('window.__didEndMeasuring'))
+
+    div_position_x = self._tab.EvaluateJavaScript(
+        'document.getElementById("drag_div").offsetLeft')
+    div_position_y = self._tab.EvaluateJavaScript(
+        'document.getElementById("drag_div").offsetTop')
+
+    # 0.25 is the ratio of displacement to the initial size.
+    expected_x = math.floor(div_width * -0.25)
+    expected_y = math.floor(div_height * -0.25)
+
+    self.assertEquals(div_position_x, expected_x,
+                    msg="Moved element's left coordinate: %d, expected: %d" %
+                    (div_position_x, expected_x))
+    self.assertEquals(div_position_y, expected_y,
+                    msg="Moved element's top coordinate: %d, expected: %d" %
+                    (div_position_y, expected_y))

tools/telemetry/unittest_data/draggable.html

+<html>
+  <head>
+    <style>
+      body { margin: 0; }
+      #drag_div {
+        width: 100%;
+        height: 100%;
+        background: blue;
+        position: relative;
+      }
+    </style>
+    <script>
+    offsetX = 0;
+    offsetY = 0;
+
+    function drag(event) {
+      d = document.getElementById('drag_div');
+      offsetX = event.clientX - d.offsetLeft;
+      offsetY = event.clientY - d.offsetTop;
+    }
+
+    function drop(event) {
+      d = document.getElementById('drag_div');
+      d.style.left = event.clientX - offsetX;
+      d.style.top = event.clientY - offsetY;
+    }
+
+    function touchStart(event) {
+      d = document.getElementById('drag_div');
+      offsetX = event.touches[0].clientX - d.offsetLeft;
+      offsetY = event.touches[0].clientY - d.offsetTop;
+    }
+
+    function touchEnd(event) {
+      d = document.getElementById('drag_div');
+      d.style.left = event.changedTouches[0].clientX - offsetX;
+      d.style.top = event.changedTouches[0].clientY - offsetY;
+    }
+
+    </script>
+  </head>
+
+  <body id ="body">
+    <div id="drag_div"> </div>
+  </body>
+  <script>
+  document.getElementById('body').addEventListener('mouseup', drop);
+  document.getElementById('body').addEventListener('touchend', touchEnd);
+  document.getElementById('drag_div').addEventListener('mousedown', drag);
+  document.getElementById('drag_div').addEventListener('touchstart', touchStart);
+  </script>
+</html>