Use getFaviconForPageURL instead of tab.faviconUrl as favicon

tab.faviconUrl is a base64 stream of image for each tab. It's slow to
generate, heavy to transfer and not reusable. getFaviconForPageURL uses
chrome://favicon2 to get fav url from history, which is much more
efficient but can not work in incognito mode. Since tab search is not
supported in incognito mode, using getFaviconForPageURL is a performance
win.

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

chrome/browser/resources/tab_search_merge/BUILD.gn

@@ -48,6 +48,7 @@ js_library("tab_search_item") {
   deps = [
     "//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/tab_search_item.html

@@ -17,7 +17,8 @@
     --cr-icon-button-fill-color: transparent;
   }
 
-  img {
+  .favicon {
+    flex-shrink: 0;
     height: var(--mwb-icon-size);
     margin-inline-end: var(--mwb-list-item-horizontal-margin);
     width: var(--mwb-icon-size);
@@ -54,7 +55,7 @@
   }
 </style>
 
-<img src="[[data.favIconUrl]]">
+<div class="favicon" style="background-image:[[faviconUrl_(data.isDefaultFavicon, data.url)]]"></div>
 <div class="text-container">
   <div class="primary-text">[[data.title]]</div>
   <div class="secondary-text">[[urlHostname_(data.url)]]</div>

chrome/browser/resources/tab_search_merge/tab_search_item.js

@@ -8,6 +8,7 @@ import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/mwb_shared_vars.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 
+import {getFaviconForPageURL} from 'chrome://resources/js/icon.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 export class TabSearchItem extends PolymerElement {
@@ -43,6 +44,16 @@ export class TabSearchItem extends PolymerElement {
   urlHostname_(url) {
     return new URL(url).hostname;
   }
+
+  /**
+   * @param isDefaultFavicon {boolean}
+   * @param url {string}
+   * @return {string}
+   * @private
+   */
+  faviconUrl_(isDefaultFavicon, url) {
+    return getFaviconForPageURL(isDefaultFavicon ? undefined : url, false);
+  }
 }
 
 customElements.define(TabSearchItem.is, TabSearchItem);