Fix suppress tab search type checking

Currently type checking of some of the functions using
tabSearch.mojom.Tab is suppressed because we are trying to dynamically
add some fields to it. This CL addresses the issue by wrapping
tabSearch.mojom.Tab with TabData so tabSearch.mojom.Tab can stay
unmodified.

Bug: 1133558,1099917

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

chrome/browser/resources/tab_search_merge/BUILD.gn

@@ -13,6 +13,7 @@ js_type_check("closure_compile") {
   deps = [
     ":app",
     ":fuzzy_search",
+    ":tab_data",
     ":tab_search_api_proxy",
     ":tab_search_item",
     ":tab_search_search_field",
@@ -22,6 +23,7 @@ js_type_check("closure_compile") {
 js_library("app") {
   deps = [
     ":fuzzy_search",
+    ":tab_data",
     ":tab_search_api_proxy",
     ":tab_search_item",
     ":tab_search_search_field",
@@ -36,7 +38,14 @@ js_library("app") {
 }
 
 js_library("fuzzy_search") {
-  deps = [ "//ui/webui/resources/js:util.m" ]
+  deps = [
+    ":tab_data",
+    "//ui/webui/resources/js:util.m",
+  ]
+}
+
+js_library("tab_data") {
+  deps = []
 }
 
 js_library("tab_search_api_proxy") {
@@ -49,6 +58,7 @@ js_library("tab_search_api_proxy") {
 
 js_library("tab_search_item") {
   deps = [
+    ":tab_data",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
     "//ui/webui/resources/js:icon.m",

chrome/browser/resources/tab_search_merge/app.html

@@ -68,7 +68,7 @@
         selected="{{selectedIndex_}}" selected-class="selected" role="listbox">
       <template id="tabsList" is="dom-repeat" items="[[filteredOpenTabs_]]"
           initial-count="[[chunkingItemCount_]]">
-        <tab-search-item id="[[item.tabId]]" aria-label="[[ariaLabel_(item)]]"
+        <tab-search-item id="[[item.tab.tabId]]" aria-label="[[ariaLabel_(item)]]"
             class="mwb-list-item" data="[[item]]"
             on-click="onItemClick_" on-close="onItemClose_"
             on-focus="onItemFocus_" tabindex="0" role="option">

chrome/browser/resources/tab_search_merge/app.js

@@ -21,6 +21,7 @@ import {IronA11yAnnouncer} from 'chrome://resources/polymer/v3_0/iron-a11y-annou
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {fuzzySearch} from './fuzzy_search.js';
+import {TabData} from './tab_data.js';
 import {TabSearchApiProxy, TabSearchApiProxyImpl} from './tab_search_api_proxy.js';
 
 const selectorNavigationKeys = ['ArrowUp', 'ArrowDown', 'Home', 'End'];
@@ -48,7 +49,7 @@ export class TabSearchAppElement extends PolymerElement {
         observer: 'openTabsChanged_',
       },
 
-      /** @private {!Array<!tabSearch.mojom.Tab>} */
+      /** @private {!Array<!TabData>} */
       filteredOpenTabs_: {
         type: Array,
         value: [],
@@ -78,7 +79,7 @@ export class TabSearchAppElement extends PolymerElement {
           distance: 200,
           keys: [
             {
-              name: 'title',
+              name: 'tab.title',
               weight: 2,
             },
             {
@@ -121,7 +122,7 @@ export class TabSearchAppElement extends PolymerElement {
       distance: loadTimeData.getInteger('searchDistance'),
       keys: [
         {
-          name: 'title',
+          name: 'tab.title',
           weight: loadTimeData.getValue('searchTitleToHostnameWeightRatio'),
         },
         {
@@ -342,9 +343,8 @@ export class TabSearchAppElement extends PolymerElement {
       e.stopPropagation();
       e.preventDefault();
     } else if (e.key === 'Enter' || e.key === ' ') {
-      const selectedItem = this.filteredOpenTabs_[this.getSelectedIndex()];
       this.apiProxy_.switchToTab(
-          {tabId: selectedItem.tabId}, !!this.searchText_);
+          {tabId: this.getSelectedTab_().tabId}, !!this.searchText_);
       e.stopPropagation();
     }
   }
@@ -393,12 +393,10 @@ export class TabSearchAppElement extends PolymerElement {
 
       // For some reasons setting combobox/aria-activedescendant on tab-search-search-field
       // has no effect, so manually announce a11y message here.
-      const selectedItem = this.filteredOpenTabs_[this.getSelectedIndex()];
-      this.announceA11y_(this.ariaLabel_(selectedItem));
+      this.announceA11y_(this.ariaLabel_(this.getSelectedTab_()));
     } else if (e.key === 'Enter') {
-      const selectedItem = this.filteredOpenTabs_[this.getSelectedIndex()];
       this.apiProxy_.switchToTab(
-          {tabId: selectedItem.tabId}, !!this.searchText_);
+          {tabId: this.getSelectedTab_().tabId}, !!this.searchText_);
       e.stopPropagation();
     }
   }
@@ -434,13 +432,15 @@ export class TabSearchAppElement extends PolymerElement {
     const result = [];
     windowTabs.forEach(window => {
       window.tabs.forEach(tab => {
-        result.push(
-            Object.assign({}, tab, {hostname: new URL(tab.url).hostname}));
+        const hostname = new URL(tab.url).hostname;
+        result.push({hostname, tab});
       });
     });
-    result.sort((a, b) => (b.lastActiveTimeTicks && a.lastActiveTimeTicks) ?
-        b.lastActiveTimeTicks.internalValue - a.lastActiveTimeTicks.internalValue :
-        0);
+    result.sort(
+        (a, b) => (b.tab.lastActiveTimeTicks && a.tab.lastActiveTimeTicks) ?
+            b.tab.lastActiveTimeTicks.internalValue -
+                a.tab.lastActiveTimeTicks.internalValue :
+            0);
     this.filteredOpenTabs_ =
         fuzzySearch(this.searchText_, result, this.fuzzySearchOptions_);
 
@@ -480,6 +480,11 @@ export class TabSearchAppElement extends PolymerElement {
       }
     }
   }
+
+  /** return {!tabSearch.mojom.Tab} */
+  getSelectedTab_() {
+    return this.filteredOpenTabs_[this.getSelectedIndex()].tab;
+  }
 }
 
 customElements.define(TabSearchAppElement.is, TabSearchAppElement);

chrome/browser/resources/tab_search_merge/fuzzy_search.js

@@ -5,15 +5,13 @@
 import {quoteString} from 'chrome://resources/js/util.m.js';
 
 import Fuse from './fuse.js';
+import {TabData} from './tab_data.js';
 
 /**
- * TODO(tluk): Fix the typing for tabSearch.mojom.Tab here given we are updating
- * the fields on this object ( https://crbug.com/1133558 ).
- * @suppress {checkTypes}
  * @param {string} input
- * @param {!Array<!tabSearch.mojom.Tab>} records
+ * @param {!Array<!TabData>} records
  * @param {!Object} options
- * @return {!Array<!tabSearch.mojom.Tab>}
+ * @return {!Array<!TabData>}
  */
 export function fuzzySearch(input, records, options) {
   if (input.length === 0) {
@@ -32,7 +30,7 @@ export function fuzzySearch(input, records, options) {
     return exactSearch(input, records, options);
   } else {
     return new Fuse(records, options).search(input).map(result => {
-      const titleMatch = result.matches.find(e => e.key === 'title');
+      const titleMatch = result.matches.find(e => e.key === 'tab.title');
       const hostnameMatch = result.matches.find(e => e.key === 'hostname');
       const item = Object.assign({}, result.item);
       if (titleMatch) {
@@ -70,11 +68,10 @@ function convertToRanges(matches) {
  *    beginning of a word in the string.
  * 3. All remaining items with |title| or |hostname| matching the searchText
  *    elsewhere in the string.
- * @suppress {checkTypes}
  * @param {string} searchText
- * @param {!Array<!tabSearch.mojom.Tab>} records
+ * @param {!Array<!TabData>} records
  * @param {!Object} options
- * @return {!Array<!tabSearch.mojom.Tab>}
+ * @return {!Array<!TabData>}
  */
 function exactSearch(searchText, records, options) {
   if (searchText.length === 0) {
@@ -84,7 +81,7 @@ function exactSearch(searchText, records, options) {
   // Controls how heavily weighted the tab's title is relative to the hostname
   // in the scoring function.
   const key =
-      options.keys ? options.keys.find(e => e.name === 'title') : undefined;
+      options.keys ? options.keys.find(e => e.name === 'tab.title') : undefined;
   const titleToHostnameWeightRatio = key ? key.weight : 1;
   // Default distance to calculate score for title/hostname based on match
   // position.
@@ -94,12 +91,12 @@ function exactSearch(searchText, records, options) {
   // Perform an exact match search with range discovery.
   const exactMatches = [];
   for (let tab of records) {
-    const titleHighlightRanges = getRanges(tab.title, searchText);
+    const titleHighlightRanges = getRanges(tab.tab.title, searchText);
     const hostnameHighlightRanges = getRanges(tab.hostname, searchText);
     if (!titleHighlightRanges.length && !hostnameHighlightRanges.length) {
       continue;
     }
-    const matchedTab = Object.assign({}, tab);
+    const matchedTab = /** @type {!TabData} */ (Object.assign({}, tab));
     if (titleHighlightRanges.length) {
       matchedTab.titleHighlightRanges = titleHighlightRanges;
     }
@@ -136,28 +133,28 @@ function exactSearch(searchText, records, options) {
 /**
  * Determines whether the given tab has a title or hostname with identified
  * matches at the beginning of the string.
- * @suppress {checkTypes}
- * @param {!tabSearch.mojom.Tab} tab
+ * @param {!TabData} tab
  * @return {boolean}
  */
 function hasMatchStringStart(tab) {
-  return (tab.titleHighlightRanges &&
+  return (tab.titleHighlightRanges !== undefined &&
           tab.titleHighlightRanges[0].start === 0) ||
-         (tab.hostnameHighlightRanges &&
-          tab.hostnameHighlightRanges[0].start === 0);
+      (tab.hostnameHighlightRanges !== undefined &&
+       tab.hostnameHighlightRanges[0].start === 0);
 }
 
 /**
  * Determines whether the given tab has a match for the given regexp in its
  * title or hostname.
- * @suppress {checkTypes}
- * @param {!tabSearch.mojom.Tab} tab
+ * @param {!TabData} tab
  * @param {RegExp} regexp
  * @return {boolean}
  */
 function hasRegexMatch(tab, regexp) {
-  return (tab.titleHighlightRanges && tab.title.search(regexp) !== -1) ||
-         (tab.hostnameHighlightRanges && tab.hostname.search(regexp) !== -1);
+  return (tab.titleHighlightRanges !== undefined &&
+          tab.tab.title.search(regexp) !== -1) ||
+      (tab.hostnameHighlightRanges !== undefined &&
+       tab.hostname.search(regexp) !== -1);
 }
 
 /**
@@ -186,8 +183,7 @@ function getRanges(target, searchText) {
  * Matches near the beginning of the string will have a higher score than
  * matches near the end of the string. Multiple matches will have a higher score
  * than single matches.
- * @suppress {checkTypes}
- * @param {!tabSearch.mojom.Tab} tab
+ * @param {!TabData} tab
  * @param {number} distance
  * @param {number} titleToHostnameWeightRatio
  */

chrome/browser/resources/tab_search_merge/tab_data.js

+// Copyright 2020 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.
+
+/**
+ * TabData contains tabSearch.mojom.Tab and data derived from it.
+ * It makes tabSearch.mojom.Tab immutable and works well for closure compiler
+ * type checking.
+ */
+export class TabData {
+  constructor() {
+    /** @type {!tabSearch.mojom.Tab} */
+    this.tab;
+
+    /** @type {string} */
+    this.hostname;
+
+    /** @type {!Array<!{start: number, length: number}>|undefined} */
+    this.titleHighlightRanges;
+
+    /** @type {!Array<!{start: number, length: number}>|undefined} */
+    this.hostnameHighlightRanges;
+  }
+}
\ No newline at end of file

chrome/browser/resources/tab_search_merge/tab_search_item.html

@@ -76,13 +76,13 @@
   }
 </style>
 
-<div class="favicon" style="background-image:[[faviconUrl_(data)]]"></div>
+<div class="favicon" style="background-image:[[faviconUrl_(data.tab)]]"></div>
 <div class="text-container">
-  <div id="primaryText" title="[[data.title]]"></div>
+  <div id="primaryText" title="[[data.tab.title]]"></div>
   <div id="secondaryText"></div>
 </div>
 <div class="button-container">
-  <cr-icon-button id="closeButton" aria-label="[[ariaLabel_(data.title)]]"
+  <cr-icon-button id="closeButton" aria-label="[[ariaLabel_(data.tab.title)]]"
       iron-icon="mwb16:close" noink on-click="onItemClose_"
       title="$i18n{closeTab}">
   </cr-icon-button>

chrome/browser/resources/tab_search_merge/tab_search_item.js

@@ -13,6 +13,7 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {highlight} from 'chrome://resources/js/search_highlight_utils.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {TabData} from './tab_data.js';
 import './strings.js';
 
 export class TabSearchItem extends PolymerElement {
@@ -26,7 +27,7 @@ export class TabSearchItem extends PolymerElement {
 
   static get properties() {
     return {
-      /** @type {!tabSearch.mojom.Tab} */
+      /** @type {!TabData} */
       data: {
         type: Object,
         observer: 'dataChanged_',
@@ -44,32 +45,30 @@ export class TabSearchItem extends PolymerElement {
   }
 
   /**
-   * @param {!tabSearch.mojom.Tab} data
+   * @param {!tabSearch.mojom.Tab} tab
    * @return {string}
    * @private
    */
-  faviconUrl_(data) {
-    return data.faviconUrl ? `url("${data.faviconUrl}")` :
-        getFaviconForPageURL(data.isDefaultFavicon ? 'chrome://newtab' : data.url, false);
+  faviconUrl_(tab) {
+    return tab.faviconUrl ?
+        `url("${tab.faviconUrl}")` :
+        getFaviconForPageURL(
+            tab.isDefaultFavicon ? 'chrome://newtab' : tab.url, false);
   }
 
   /**
-   * @suppress {checkTypes}
-   * Suppress checking types because hostname, titleHighlightRanges and
-   * hostnameHighlightRanges are added on the flight and not part of the
-   * original mojom.tabSearch.Tab definition
    * @private
    */
   dataChanged_() {
     this.highlightText_(
-        /** @type {!HTMLElement} */ (this.$.primaryText), this.data.title,
+        /** @type {!HTMLElement} */ (this.$.primaryText), this.data.tab.title,
         this.data.titleHighlightRanges);
     this.highlightText_(
         /** @type {!HTMLElement} */ (this.$.secondaryText), this.data.hostname,
         this.data.hostnameHighlightRanges);
 
     // Show chrome:// if it's a chrome internal url
-    if (new URL(this.data.url).protocol === 'chrome:') {
+    if (new URL(this.data.tab.url).protocol === 'chrome:') {
       /** @type {!HTMLElement} */ (this.$.secondaryText)
           .prepend(document.createTextNode('chrome://'));
     }
@@ -79,7 +78,7 @@ export class TabSearchItem extends PolymerElement {
    *
    * @param {!HTMLElement} container
    * @param {string} text
-   * @param {?Array<!{start:number, length:number}>} ranges
+   * @param {!Array<!{start:number, length:number}>|undefined} ranges
    */
   highlightText_(container, text, ranges) {
     container.textContent = '';

chrome/browser/resources/tab_search_merge/tab_search_resources.grd

@@ -22,6 +22,9 @@
       <include name="IDR_FUZZY_SEARCH_JS"
                file="fuzzy_search.js"
                type="BINDATA"/>
+      <include name="IDR_TAB_DATA_JS"
+               file="tab_data.js"
+               type="BINDATA" />
       <include name="IDR_TAB_SEARCH_API_PROXY_JS"
                file="tab_search_api_proxy.js"
                type="BINDATA" />

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

@@ -2,17 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {fuzzySearch} from 'chrome://tab-search/fuzzy_search.js'
-
+import {fuzzySearch} from 'chrome://tab-search/fuzzy_search.js';
+import {TabData} from 'chrome://tab-search/tab_data.js';
 import {assertDeepEquals, assertEquals} from '../../chai_assert.js';
 
 /**
  * Assert search results return in specific order.
- * TODO(tluk): Fix the typing for tabSearch.mojom.Tab here given we are updating
- * the fields on this object ( https://crbug.com/1133558 ).
- * @suppress {checkTypes}
  * @param {string} input
- * @param {!Array<!tabSearch.mojom.Tab>} items
+ * @param {!Array<!TabData>} items
  * @param {!Object} options
  * @param {!Array<number>} expectedIndices
  */
@@ -20,8 +17,10 @@ function assertSearchOrders(input, items, options, expectedIndices) {
   const results = fuzzySearch(input, items, options);
   assertEquals(results.length, expectedIndices.length);
   for (let i = 0; i < results.length; ++i) {
-    assertEquals(items[expectedIndices[i]].title, results[i].title);
-    assertEquals(items[expectedIndices[i]].hostname, results[i].hostname);
+    const expectedItem = items[expectedIndices[i]];
+    const actualItem = results[i];
+    assertEquals(expectedItem.tab.title, actualItem.tab.title);
+    assertEquals(expectedItem.hostname, actualItem.hostname);
   }
 }
 
@@ -29,24 +28,32 @@ suite('FuzzySearchTest', () => {
   test('fuzzySearch', () => {
     const records = [
       {
-        title: 'OpenGL',
+        tab: {
+          title: 'OpenGL',
+        },
         hostname: 'www.opengl.org',
       },
       {
-        title: 'Google',
+        tab: {
+          title: 'Google',
+        },
         hostname: 'www.google.com',
       },
     ];
 
     const matchedRecords = [
       {
-        title: 'Google',
+        tab: {
+          title: 'Google',
+        },
         hostname: 'www.google.com',
         titleHighlightRanges: [{start: 0, length: 1}, {start: 3, length: 3}],
         hostnameHighlightRanges: [{start: 4, length: 1}, {start: 7, length: 3}]
       },
       {
-        title: 'OpenGL',
+        tab: {
+          title: 'OpenGL',
+        },
         hostname: 'www.opengl.org',
         titleHighlightRanges: [{start: 2, length: 1}, {start: 4, length: 2}],
         hostnameHighlightRanges: [
@@ -61,7 +68,7 @@ suite('FuzzySearchTest', () => {
       includeMatches: true,
       keys: [
         {
-          name: 'title',
+          name: 'tab.title',
           weight: 2,
         },
         {
@@ -85,24 +92,26 @@ suite('FuzzySearchTest', () => {
     // Initial pre-search item list.
     const records = [
       {
-        title: 'Code Search',
+        tab: {
+          title: 'Code Search',
+        },
         hostname: 'search.chromium.search',
       },
-      {title: 'Marching band', hostname: 'en.marching.band.com'},
+      {tab: {title: 'Marching band'}, hostname: 'en.marching.band.com'},
       {
-        title: 'Chrome Desktop Architecture',
+        tab: {title: 'Chrome Desktop Architecture'},
         hostname: 'drive.google.com',
       },
       {
-        title: 'Arch Linux',
+        tab: {title: 'Arch Linux'},
         hostname: 'www.archlinux.org',
       },
       {
-        title: 'Arches National Park',
+        tab: {title: 'Arches National Park'},
         hostname: 'www.nps.gov',
       },
       {
-        title: 'Search Engine Land - Search Engines',
+        tab: {title: 'Search Engine Land - Search Engines'},
         hostname: 'searchengineland.com'
       },
     ];
@@ -110,36 +119,36 @@ suite('FuzzySearchTest', () => {
     // Resuts for 'arch'.
     const archMatchedRecords = [
       {
-        title: 'Arch Linux',
+        tab: {title: 'Arch Linux'},
         hostname: 'www.archlinux.org',
         titleHighlightRanges: [{start: 0, length: 4}],
         hostnameHighlightRanges: [{start: 4, length: 4}],
       },
       {
-        title: 'Arches National Park',
+        tab: {title: 'Arches National Park'},
         hostname: 'www.nps.gov',
         titleHighlightRanges: [{start: 0, length: 4}],
       },
       {
-        title: 'Chrome Desktop Architecture',
+        tab: {title: 'Chrome Desktop Architecture'},
         hostname: 'drive.google.com',
         titleHighlightRanges: [{start: 15, length: 4}],
       },
       {
-        title: 'Code Search',
+        tab: {title: 'Code Search'},
         hostname: 'search.chromium.search',
         titleHighlightRanges: [{start: 7, length: 4}],
         hostnameHighlightRanges:
             [{start: 2, length: 4}, {start: 18, length: 4}],
       },
       {
-        title: 'Search Engine Land - Search Engines',
+        tab: {title: 'Search Engine Land - Search Engines'},
         hostname: 'searchengineland.com',
         titleHighlightRanges: [{start: 2, length: 4}, {start: 23, length: 4}],
         hostnameHighlightRanges: [{start: 2, length: 4}]
       },
       {
-        title: 'Marching band',
+        tab: {title: 'Marching band'},
         hostname: 'en.marching.band.com',
         titleHighlightRanges: [{start: 1, length: 4}],
         hostnameHighlightRanges: [{start: 4, length: 4}]
@@ -149,14 +158,14 @@ suite('FuzzySearchTest', () => {
     // Results for 'search'.
     const searchMatchedRecords = [
       {
-        title: 'Code Search',
+        tab: {title: 'Code Search'},
         hostname: 'search.chromium.search',
         titleHighlightRanges: [{start: 5, length: 6}],
         hostnameHighlightRanges:
             [{start: 0, length: 6}, {start: 16, length: 6}],
       },
       {
-        title: 'Search Engine Land - Search Engines',
+        tab: {title: 'Search Engine Land - Search Engines'},
         hostname: 'searchengineland.com',
         titleHighlightRanges: [{start: 0, length: 6}, {start: 21, length: 6}],
         hostnameHighlightRanges: [{start: 0, length: 6}]
@@ -181,27 +190,27 @@ suite('FuzzySearchTest', () => {
     };
 
     // Initial pre-search item list.
-    const records = [ {
-      title: '\'beginning\\test\\end',
+    const records = [{
+      tab: {title: '\'beginning\\test\\end'},
       hostname: 'beginning\\test\"end',
-    } ];
+    }];
 
     // Expected results for '\test'.
     const backslashMatchedRecords = [
       {
-        title: '\'beginning\\test\\end',
+        tab: {title: '\'beginning\\test\\end'},
         hostname: 'beginning\\test\"end',
-        titleHighlightRanges: [ {start: 10, length: 5} ],
-        hostnameHighlightRanges: [ {start: 9, length: 5} ]
+        titleHighlightRanges: [{start: 10, length: 5}],
+        hostnameHighlightRanges: [{start: 9, length: 5}]
       },
     ];
 
     // Expected results for '"end'.
     const quoteMatchedRecords = [
       {
-        title: '\'beginning\\test\\end',
+        tab: {title: '\'beginning\\test\\end'},
         hostname: 'beginning\\test\"end',
-        hostnameHighlightRanges: [ {start: 14, length: 4} ],
+        hostnameHighlightRanges: [{start: 14, length: 4}],
       },
     ];
 
@@ -218,8 +227,8 @@ suite('FuzzySearchTest', () => {
     assertSearchOrders(
         'two',
         [
-          {title: 'three one two'}, {title: 'three two one'},
-          {title: 'one two three'}
+          {tab: {title: 'three one two'}}, {tab: {title: 'three two one'}},
+          {tab: {title: 'one two three'}}
         ],
         options, [2, 1, 0]);
   });
@@ -233,8 +242,8 @@ suite('FuzzySearchTest', () => {
         assertSearchOrders(
             'one',
             [
-              {title: 'one two three'}, {title: 'one one three'},
-              {title: 'one one one'}
+              {tab: {title: 'one two three'}}, {tab: {title: 'one one three'}},
+              {tab: {title: 'one one one'}}
             ],
             options, [2, 1, 0]);
       });
@@ -246,7 +255,7 @@ suite('FuzzySearchTest', () => {
           threshold: 0.0,
           keys: [
             {
-              name: 'title',
+              name: 'tab.title',
               weight: 2,
             },
             {
@@ -258,10 +267,12 @@ suite('FuzzySearchTest', () => {
         assertSearchOrders(
             'search',
             [
-              {hostname: 'chrome://tab-search'}, {title: 'chrome://tab-search'},
-              {title: 'chrome://tab-search', hostname: 'chrome://tab-search'}
+              {tab: {title: 'New tab'}, hostname: 'chrome://tab-search'},
+              {tab: {title: 'chrome://tab-search'}}, {
+                tab: {title: 'chrome://tab-search'},
+                hostname: 'chrome://tab-search'
+              }
             ],
             options, [2, 1, 0]);
       });
-
 });

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

@@ -211,8 +211,8 @@ suite('TabSearchAppTest', () => {
     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);
+    assertEquals('Google', tabSearchItem.data.tab.title);
+    assertEquals('https://www.google.com', tabSearchItem.data.tab.url);
     const updatedTab = /** @type {!tabSearch.mojom.Tab} */ ({
       index: 0,
       tabId: 1,
@@ -226,8 +226,8 @@ suite('TabSearchAppTest', () => {
     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);
+    assertEquals(updatedTab.title, tabSearchItem.data.tab.title);
+    assertEquals(updatedTab.url, tabSearchItem.data.tab.url);
     assertEquals('example.com', tabSearchItem.data.hostname);
   });
 

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

@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {TabData} from 'chrome://tab-search/tab_data.js';
 import {TabSearchItem} from 'chrome://tab-search/tab_search_item.js';
+
 import {assertDeepEquals} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';
 
@@ -16,20 +18,22 @@ suite('TabSearchItemTest', () => {
       text, highlightRanges, expected) {
     const tabSearchItem = /** @type {!TabSearchItem} */ (
         document.createElement('tab-search-item'));
-    const data = {
-      active: true,
-      index: 0,
-      isDefaultFavicon: true,
-      lastActiveTimeTicks: {internalValue: 0},
-      pinned: false,
-      showIcon: true,
-      tabId: 0,
-      url: 'https://example.com',
-      title: text,
+    const data = /** @type {!TabData} */ ({
       titleHighlightRanges: highlightRanges,
       hostname: text,
       hostnameHighlightRanges: highlightRanges,
-    };
+      tab: {
+        active: true,
+        index: 0,
+        isDefaultFavicon: true,
+        lastActiveTimeTicks: {internalValue: 0},
+        pinned: false,
+        showIcon: true,
+        tabId: 0,
+        url: 'https://example.com',
+        title: text,
+      }
+    });
     tabSearchItem.data = data;
     document.body.innerHTML = '';
     document.body.appendChild(tabSearchItem);