WebUI: Update TabSearch to support logging tab list render time

Related CL: http://crrev.com/c/2339211

Bug: 1099917
Change-Id: Ib209f74c93375f0bb672ec6b09b294589cd18c65
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3186821Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Yuheng Huang <yuhengh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819582}

chrome/browser/resources/tab_search_merge/BUILD.gn

@@ -25,7 +25,9 @@ js_library("app") {
     ":tab_search_search_field",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:util.m",
   ]
+  externs_list = [ "$externs_path/metrics_private.js" ]
 }
 
 js_library("tab_search_api_proxy") {

chrome/browser/resources/tab_search_merge/app.html

@@ -30,7 +30,7 @@
 </tab-search-search-field>
 <div id="tabs">
   <iron-selector id="selector" selected="{{selectedIndex_}}" selected-class="selected">
-    <template id="tabs-list" is="dom-repeat" items="[[filteredOpenTabs_]]">
+    <template id="tabsList" is="dom-repeat" items="[[filteredOpenTabs_]]">
       <tab-search-item id="[[item.tabId]]" data="[[item]]"
           on-click="onItemClick_" on-close="onItemClose_" tabindex="-1" >
       </tab-search-item>

chrome/browser/resources/tab_search_merge/app.js

@@ -12,7 +12,7 @@ import './tab_search_search_field.js'
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {isMac} from 'chrome://resources/js/cr.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
+import {listenOnce} from 'chrome://resources/js/util.m.js';
 import {TabSearchApiProxy, TabSearchApiProxyImpl} from './tab_search_api_proxy.js';
 
 /**
@@ -72,10 +72,12 @@ export class TabSearchAppElement extends PolymerElement {
   ready() {
     super.ready();
 
+    // TODO(tluk): The listener should provide the data needed to update the
+    // WebUI without having to make another round trip request to the Browser.
     this.listenerIds_.push(
         this.apiProxy_.getCallbackRouter().tabsChanged.addListener(
-            this.getTabs.bind(this)));
-    this.getTabs();
+            () => { this.updateTabs_(); }));
+    this.updateTabs_();
   }
 
   /** @override */
@@ -85,11 +87,21 @@ export class TabSearchAppElement extends PolymerElement {
   }
 
   /** @private */
-  getTabs() {
+  updateTabs_() {
     this.apiProxy_.getProfileTabs().then(({profileTabs}) => {
-      if (profileTabs) {
-        this.openTabs_ = profileTabs.windows;
+      // Prior to the first load |this.openTabs_| has not been set. Record the
+      // time it takes for the initial list of tabs to render.
+      if (!this.openTabs_) {
+        listenOnce(this.$.tabsList, 'rendered-item-count-changed', e => {
+          const event = /** @type {!CustomEvent<!{value: number}>} */ (e);
+          // Ensure that the full list of tabs has been rendered.
+          assert(event.detail.value === this.filteredOpenTabs_.length);
+          chrome.metricsPrivate.recordTime(
+              'Tabs.TabSearch.WebUI.InitialTabsRenderTime',
+              Math.round(window.performance.now()));
+        });
       }
+      this.openTabs_ = profileTabs.windows;
     });
   }
 

chrome/browser/resources/tab_search_merge/test/tab_search_app_test.js

@@ -8,7 +8,7 @@ import {TabSearchSearchField} from 'chrome://tab-search/tab_search_search_field.
 import {TabSearchApiProxy, TabSearchApiProxyImpl} from 'chrome://tab-search/tab_search_api_proxy.js'
 
 import {assertEquals, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
+import {flushTasks, waitAfterNextRender} from '../../test_util.m.js';
 
 import {TestTabSearchApiProxy} from './test_tab_search_api_proxy.js';
 
@@ -220,4 +220,39 @@ suite('TabSearchAppTest', () => {
     await flushTasks();
     verifyTabIds(queryRows(), []);
   });
+
+  test('Verify initial tab render time is logged correctly.', async () => {
+    // |recordTimeCalled| tracks the number of calls to recordTime().
+    let recordTimeCalled = 0;
+    // |metricString| tracks the metric name passed to recordTime().
+    let metricName;
+    chrome.metricsPrivate.recordTime = (...args) => {
+      recordTimeCalled += 1;
+      metricName = args[0];
+    };
+
+    await setupTest(sampleData());
+    await waitAfterNextRender(tabSearchApp);
+
+    // Make sure that tab data has been recieved.
+    verifyTabIds(queryRows(), [ 1, 5, 6, 2, 3, 4 ]);
+
+    // Ensure that |chrome.metricsPrivate.recordTime()| has been called
+    // once after initial tab data has been recieved.
+    assertEquals(1, recordTimeCalled);
+    assertEquals('Tabs.TabSearch.WebUI.InitialTabsRenderTime', metricName);
+
+    // Force a change to filtered tab data that would result in a
+    // re-render.
+    const searchField = /** @type {!TabSearchSearchField} */
+        (tabSearchApp.shadowRoot.querySelector('#searchField'));
+    searchField.setValue('bing');
+    await flushTasks();
+    await waitAfterNextRender(tabSearchApp);
+    verifyTabIds(queryRows(), [ 2 ]);
+
+    // |chrome.metricsPrivate.recordTime()| should still have only been
+    // called once.
+    assertEquals(1, recordTimeCalled);
+  });
 });