Tab Search: Notify the backend when the UI is ready

This change updates the Tab Search UI code to call ShowUI() on its
BrowserProxy object when the necessary DOM changes have occurred and
have become visible.

This allows us to show the UI only when ready, preventing the UI from
stuttering as it resizes while the list items load in.

Bug: 1099917
Change-Id: Ia60f5ce1e0e30abd0dc1857344d880eb083356b8
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3245003Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819588}

chrome/browser/resources/tab_search_merge/app.js

@@ -93,9 +93,15 @@ export class TabSearchAppElement extends PolymerElement {
           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(
+
+          // Push showUI() to the event loop to allow reflow to occur following
+          // the DOM update.
+          setTimeout(() => {
+            this.apiProxy_.showUI();
+            chrome.metricsPrivate.recordTime(
               'Tabs.TabSearch.WebUI.InitialTabsRenderTime',
               Math.round(window.performance.now()));
+          }, 0);
         });
       }
       this.openTabs_ = profileTabs.windows;

chrome/browser/resources/tab_search_merge/tab_search_api_proxy.js

@@ -33,6 +33,8 @@ export class TabSearchApiProxy {
 
   /** @return {!tabSearch.mojom.PageCallbackRouter} */
   getCallbackRouter() {}
+
+  showUI() {}
 }
 
 /** @implements {TabSearchApiProxy} */
@@ -74,6 +76,11 @@ export class TabSearchApiProxyImpl {
   getCallbackRouter() {
     return this.callbackRouter;
   }
+
+  /** @override */
+  showUI() {
+    this.handler.showUI();
+  }
 }
 
 addSingletonGetter(TabSearchApiProxyImpl);

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

@@ -352,4 +352,30 @@ suite('TabSearchAppTest', () => {
           assertTrue(withSearch);
         });
   });
+
+  test('Verify showUI() is called correctly.', async () => {
+    assertEquals(0, testProxy.getCallCount('showUI'));
+
+    await setupTest(sampleData());
+    await waitAfterNextRender(tabSearchApp);
+
+    // Make sure that tab data has been received.
+    verifyTabIds(queryRows(), [ 1, 5, 6, 2, 3, 4 ]);
+
+    // Ensure that showUI() has been called once after initial data has been
+    // rendered.
+    assertEquals(1, testProxy.getCallCount('showUI'));
+
+    // 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 ]);
+
+    // |showUI()| should still have only been called once.
+    assertEquals(1, testProxy.getCallCount('showUI'));
+  });
 });

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

@@ -12,6 +12,7 @@ export class TestTabSearchApiProxy extends TestBrowserProxy {
       'closeTab',
       'getProfileTabs',
       'switchToTab',
+      'showUI',
     ]);
 
     /** @type {!tabSearch.mojom.PageCallbackRouter} */
@@ -41,6 +42,11 @@ export class TestTabSearchApiProxy extends TestBrowserProxy {
     this.methodCalled('switchToTab', [ tabInfo, withSearch ]);
   }
 
+  /** @override */
+  showUI() {
+    this.methodCalled('showUI');
+  }
+
   /** @override */
   getCallbackRouter() {
     return this.callbackRouter;