Tab Strip WebUI: Add favicons to each tab

https://imgur.com/a/MfVqsey

Bug: 989131
Change-Id: If40b94d6ceecbdf46ee336e765f65df2efb19673
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1762835Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#689114}

chrome/browser/resources/tab_strip/BUILD.gn

@@ -25,6 +25,9 @@ js_library("tabs_api_proxy") {
 }
 
 js_library("tab") {
+  deps = [
+    "//ui/webui/resources/js:icon.m",
+  ]
   externs_list = [ "$externs_path/chrome.js" ]
 }
 

chrome/browser/resources/tab_strip/tab.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {getFavicon, getFaviconForPageURL} from 'chrome://resources/js/icon.m.js';
+
 import {CustomElement} from './custom_element.js';
 import {TabsApiProxy} from './tabs_api_proxy.js';
 
@@ -17,6 +19,10 @@ export class TabElement extends CustomElement {
     this.closeButtonEl_ =
         /** @type {!HTMLElement} */ (this.shadowRoot.querySelector('#close'));
 
+    /** @private {!HTMLElement} */
+    this.faviconEl_ =
+        /** @type {!HTMLElement} */ (this.shadowRoot.querySelector('#favicon'));
+
     /** @private {!Tab} */
     this.tab_;
 
@@ -44,6 +50,14 @@ export class TabElement extends CustomElement {
       this.titleTextEl_.textContent = tab.title;
     }
 
+    if (tab.favIconUrl &&
+        (!this.tab_ || this.tab_.favIconUrl !== tab.favIconUrl)) {
+      this.faviconEl_.style.backgroundImage = getFavicon(tab.favIconUrl);
+    } else if (!this.tab_ || this.tab_.url !== tab.url) {
+      this.faviconEl_.style.backgroundImage =
+          getFaviconForPageURL(tab.url, false);
+    }
+
     // Expose the ID to an attribute to allow easy querySelector use
     this.setAttribute('data-tab-id', tab.id);
 

chrome/browser/ui/webui/tab_strip/tab_strip_ui.cc

@@ -5,9 +5,12 @@
 #include "chrome/browser/ui/webui/tab_strip/tab_strip_ui.h"
 
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/webui/favicon_source.h"
 #include "chrome/common/webui_url_constants.h"
 #include "chrome/grit/tab_strip_resources.h"
 #include "chrome/grit/tab_strip_resources_map.h"
+#include "components/favicon_base/favicon_url_parser.h"
+#include "content/public/browser/url_data_source.h"
 #include "content/public/browser/web_ui_data_source.h"
 
 TabStripUI::TabStripUI(content::WebUI* web_ui)
@@ -30,6 +33,10 @@ TabStripUI::TabStripUI(content::WebUI* web_ui)
   html_source->SetDefaultResource(IDR_TAB_STRIP_HTML);
 
   content::WebUIDataSource::Add(profile, html_source);
+
+  content::URLDataSource::Add(
+      profile, std::make_unique<FaviconSource>(
+                   profile, chrome::FaviconUrlFormat::kFavicon2));
 }
 
 TabStripUI::~TabStripUI() {}

chrome/test/data/webui/tab_strip/tab_test.js

@@ -3,7 +3,10 @@
 // found in the LICENSE file.
 
 import 'chrome://tab-strip/tab.js';
+
+import {getFavicon, getFaviconForPageURL} from 'chrome://resources/js/icon.m.js';
 import {TabsApiProxy} from 'chrome://tab-strip/tabs_api_proxy.js';
+
 import {TestTabsApiProxy} from './test_tabs_api_proxy.js';
 
 suite('Tab', function() {
@@ -56,4 +59,21 @@ suite('Tab', function() {
       assertEquals(tabId, tab.id);
     });
   });
+
+  test('sets the favicon to the favicon URL', () => {
+    const expectedFaviconUrl = 'http://google.com/favicon.ico';
+    tabElement.tab = Object.assign({}, tab, {favIconUrl: expectedFaviconUrl});
+    const faviconElement = tabElement.shadowRoot.querySelector('#favicon');
+    assertEquals(
+        faviconElement.style.backgroundImage, getFavicon(expectedFaviconUrl));
+  });
+
+  test('sets the favicon to the page URL if favicon URL does not exist', () => {
+    const expectedPageUrl = 'http://google.com';
+    tabElement.tab = Object.assign({}, tab, {url: expectedPageUrl});
+    const faviconElement = tabElement.shadowRoot.querySelector('#favicon');
+    assertEquals(
+        faviconElement.style.backgroundImage,
+        getFaviconForPageURL(expectedPageUrl, false));
+  });
 });