Tab Search: create benchmark story tab_search:scroll_up_and_down:2020

Create this story to track scroll performance when loading.
Also fix change measure frame time by using benchmark_value.

Bug: 1099917
Change-Id: Ic7b53226fdf189171ffb001db5a45ff05501582d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2586517Reviewed-by: John Chen <johnchen@chromium.org>
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Commit-Queue: Yuheng Huang <yuhengh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#836397}

docs/speed/benchmark/harnesses/tab_search.md

@@ -19,6 +19,7 @@ in different stories representing different scenarios
 * tab_search:top50:loading:2020 - Test CUJs with 50 open tabs, before all tabs are loaded
 * tab_search:top100:loading:2020 - Test CUJs with 100 open tabs, before all tabs are loaded
 * tab_search:close_and_open:2020 - Test open, close and reopen Tab Search UI
+* tab_search:scroll_up_and_down:2020 - Test srolling down, up and down 100 tabs, before all tabs are loaded
 
 
 For more information please see this [doc](https://docs.google.com/document/d/1-1ijT7wt05hlBZmSKjX_DaTCzVqpxbfTM1y-j7kYHlc).
@@ -41,7 +42,7 @@ tools/perf/run_benchmark run tab_search --browser-executable=out/Default/chrome
 
 There are 3 ways to add metrics to the benchmarking code
 
-1. Add UMA metrics to your code and include them in the [benchmark definition](../../../../tools/perf/benchmark/tab_search.py). The listed UMA metrics will show up on the result page automatically.
+1. Add UMA metrics to your code and include them in the [benchmark definition](../../../../tools/perf/benchmarks/tab_search.py). The listed UMA metrics will show up on the result page automatically.
 2. Add C++ trace with name starts with "webui_metric:". Make sure your trace has category "browser" or add other categories that you use to the benchmark definition. For example:
    ```c++
    void Foo::DoWork() {
@@ -49,7 +50,7 @@ There are 3 ways to add metrics to the benchmarking code
      ...
    }
    ```
-3. Add Javascript performance.mark() with names end with ":benchmark_begin" and ":benchmark_end". Time between performance.mark('YOUR_METRIC_NAME:benchmark_begin') and performance.mark('YOUR_METRIC_NAME:benchmark') will show up as YOUR_METRIC_NAME on the result page. For example:
+3. Add Javascript performance.mark() with names end with ":benchmark_begin" and ":benchmark_end". Time between performance.mark('<YOUR_METRIC_NAME>:benchmark_begin') and performance.mark('<YOUR_METRIC_NAME>:benchmark') will show up as YOUR_METRIC_NAME on the result page. For example:
    ```javascript
    function calc() {
      performance.mark('calc_time:benchmark_begin');
@@ -57,6 +58,15 @@ There are 3 ways to add metrics to the benchmarking code
      performance.mark('calc_time:benchmark_end');
    }
    ```
+   You can also emit metric value directly using performance.mark('<YOUR_METRIC_NAME>:<YOUR_METRIC_VALUE>:benchmark_value'). In the case multiple values needs to be measured asynchronously it's better to do the following instead:
+   ```javascript
+   const startTime = performance.now();
+   for (const url of urls) {
+     fetch(url).then(() => {
+       performance.mark(`fetch_time:${performance.now() - startTime}:benchmark_value`);
+     });
+   }
+   ```
 
 ## Record new stories
 

tools/perf/page_sets/data/tab_search_desktop.json

@@ -3,6 +3,9 @@
         "tab_search:close_and_open:2020": {
             "DEFAULT": "tab_search_desktop_1b410a96cc.wprgo"
         },
+        "tab_search:scroll_up_and_down:2020": {
+            "DEFAULT": "tab_search_desktop_0c9707c535.wprgo"
+        },
         "tab_search:top100:2020": {
             "DEFAULT": "tab_search_desktop_1b410a96cc.wprgo"
         },

tools/perf/page_sets/data/tab_search_desktop_0c9707c535.wprgo.sha1

+0c9707c535aa91f57ffa4818fb2a90059c4222f2
\ No newline at end of file

tools/perf/page_sets/tab_search/tab_search_stories.py

@@ -15,6 +15,7 @@ class TabSearchStorySet(story.StorySet):
       tab_search_story.TabSearchStoryTop50Loading,
       tab_search_story.TabSearchStoryTop100Loading,
       tab_search_story.TabSearchStoryCloseAndOpen,
+      tab_search_story.TabSearchStoryScrollUpAndDown,
   ]
 
   def __init__(self):

tools/perf/page_sets/tab_search/tab_search_story.py

@@ -145,6 +145,20 @@ class TabSearchStory(page.Page):
     action_runner.tab.browser.ExecuteBrowserCommand('openTabSearch')
     action_runner.Wait(5)
 
+  def ScrollUpAndDown(self, action_runner):
+    action_runner.Wait(1)
+    self.StartMeasuringFrameTime(action_runner,
+                                 'frame_time_on_first_scroll_down')
+    action_runner.ScrollElement(element_function=SCROLL_ELEMENT_FUNCTION)
+    self.StartMeasuringFrameTime(action_runner, 'frame_time_on_first_scroll_up')
+    action_runner.ScrollElement(element_function=SCROLL_ELEMENT_FUNCTION,
+                                direction='up')
+    self.StartMeasuringFrameTime(action_runner,
+                                 'frame_time_on_second_scroll_down')
+    action_runner.ScrollElement(element_function=SCROLL_ELEMENT_FUNCTION)
+    self.StopMeasuringFrameTime(action_runner)
+    action_runner.Wait(1)
+
   def StartMeasuringFrameTime(self, action_runner, name):
     action_runner.ExecuteJavaScript(MEASURE_FRAME_TIME_SCRIPT)
     action_runner.ExecuteJavaScript(START_MEASURING_FRAME_TIME % name)
@@ -205,6 +219,16 @@ class TabSearchStoryCloseAndOpen(TabSearchStory):
     self.CloseAndOpen(action_runner)
 
 
+class TabSearchStoryScrollUpAndDown(TabSearchStory):
+  NAME = 'tab_search:scroll_up_and_down:2020'
+  URL_LIST = TOP_URL[:50] * 2
+  URL = 'https://' + URL_LIST[0]
+  WAIT_FOR_NETWORK_QUIESCENCE = False
+
+  def InteractWithPage(self, action_runner):
+    self.ScrollUpAndDown(action_runner)
+
+
 SCROLL_ELEMENT_FUNCTION = '''
 document.querySelector('tab-search-app').shadowRoot.getElementById('tabsList')
 .shadowRoot.getElementById('container')
@@ -212,21 +236,32 @@ document.querySelector('tab-search-app').shadowRoot.getElementById('tabsList')
 
 MEASURE_FRAME_TIME_SCRIPT = '''
 window.__webui_startMeasuringFrameTime = function(name) {
-  if (!window.__webui_onRequestAnimationFrame) {
-    window.__webui_onRequestAnimationFrame = function() {
-      performance.mark(name + ':benchmark_end');
-      if (window.__webui_onRequestAnimationFrame) {
-        requestAnimationFrame(window.__webui_onRequestAnimationFrame);
-        performance.mark(name + ':benchmark_begin')
-      }
+  if (window.__webui_onRequestAnimationFrame) {
+    window.__webui_stopMeasuringFrameTime();
+  }
+  window.__webui_onRequestAnimationFrame = function() {
+    const now = performance.now();
+    if (window.__webui_lastAnimationFrameTime) {
+      performance.mark(
+          `${name}:${now - window.__webui_lastAnimationFrameTime}:benchmark_value`);
+    }
+    window.__webui_lastAnimationFrameTime = now;
+    if (window.__webui_onRequestAnimationFrame) {
+      window.__webui_lastRequestId = requestAnimationFrame(
+          window.__webui_onRequestAnimationFrame);
     }
-    performance.mark(name + ':benchmark_begin')
-    requestAnimationFrame(window.__webui_onRequestAnimationFrame);
   }
+  window.__webui_lastRequestId = requestAnimationFrame(
+      window.__webui_onRequestAnimationFrame);
 }
 
 window.__webui_stopMeasuringFrameTime = function() {
+  if (window.__webui_lastRequestId) {
+    cancelAnimationFrame(window.__webui_lastRequestId);
+  }
+  window.__webui_lastRequestId = null;
   window.__webui_onRequestAnimationFrame = null;
+  window.__webui_lastAnimationFrameTime = null;
 }
 '''