Update tab with tabUpdated() API

When tabUpdated() API is called, replace tab with the same tabId
and trigger rerender.

Related CL:
https://chromium-review.googlesource.com/c/chromium/src/+/2357958

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

chrome/browser/resources/tab_search_merge/app.js

@@ -74,9 +74,10 @@ export class TabSearchAppElement extends PolymerElement {
 
     // TODO(tluk): The listener should provide the data needed to update the
     // WebUI without having to make another round trip request to the Browser.
+    const callbackRouter = this.apiProxy_.getCallbackRouter();
     this.listenerIds_.push(
-        this.apiProxy_.getCallbackRouter().tabsChanged.addListener(
-            () => { this.updateTabs_(); }));
+        callbackRouter.tabsChanged.addListener(() => this.updateTabs_()),
+        callbackRouter.tabUpdated.addListener(tab => this.onTabUpdated_(tab)));
     this.updateTabs_();
   }
 
@@ -105,6 +106,28 @@ export class TabSearchAppElement extends PolymerElement {
     });
   }
 
+  /**
+   * @param {!tabSearch.mojom.Tab} updatedTab
+   * @private
+   */
+  onTabUpdated_(updatedTab) {
+    const updatedTabId = updatedTab.tabId;
+    const windows = this.openTabs_;
+    if (windows) {
+      for (const window of windows) {
+        const {tabs} = window;
+        for (let i = 0; i < tabs.length; ++i) {
+          // Replace the tab with the same tabId and trigger rerender.
+          if (tabs[i].tabId === updatedTabId) {
+            tabs[i] = updatedTab;
+            this.openTabs_ = windows.concat();
+            return;
+          }
+        }
+      }
+    }
+  }
+
   /** @return {number} */
   getSelectedIndex() {
     return this.selectedIndex_;

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

@@ -221,6 +221,30 @@ suite('TabSearchAppTest', () => {
     verifyTabIds(queryRows(), []);
   });
 
+  test('refresh on tab updated', async () => {
+    await setupTest(sampleData());
+    verifyTabIds(queryRows(), [1, 5, 6, 2, 3, 4]);
+    let tabSearchItem = /** @type {!HTMLElement} */
+        (tabSearchApp.shadowRoot.querySelector('tab-search-item[id="1"]'));
+    assertEquals('Google', tabSearchItem.data.title);
+    assertEquals('https://www.google.com', tabSearchItem.data.url);
+    const updatedTab = /** @type {!tabSearch.mojom.Tab} */ ({
+      index: 0,
+      tabId: 1,
+      favIconUrl: '',
+      title: 'Example',
+      url: 'https://example.com',
+    });
+    testProxy.getCallbackRouterRemote().tabUpdated(updatedTab);
+    await flushTasks();
+    // tabIds are not changed after tab updated.
+    verifyTabIds(queryRows(), [1, 5, 6, 2, 3, 4]);
+    tabSearchItem = /** @type {!HTMLElement} */
+        (tabSearchApp.shadowRoot.querySelector('tab-search-item[id="1"]'));
+    assertEquals(updatedTab.title, tabSearchItem.data.title);
+    assertEquals(updatedTab.url, tabSearchItem.data.url);
+  });
+
   test('Verify initial tab render time is logged correctly.', async () => {
     // |recordTimeCalled| tracks the number of calls to recordTime().
     let recordTimeCalled = 0;