Read later: add favicons for menu list items.

Bug: 1156133
Change-Id: Ib2ec4b378efee1a3bed0243654b80c70af65ce63
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2595458Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Caroline Rising <corising@chromium.org>
Cr-Commit-Position: refs/heads/master@{#840044}

chrome/browser/resources/read_later/BUILD.gn

@@ -109,6 +109,7 @@ js_library("read_later_item") {
     "//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:assert.m",
+    "//ui/webui/resources/js:icon.m",
   ]
 }
 

chrome/browser/resources/read_later/read_later_item.html

@@ -18,6 +18,15 @@
     width: auto;
   }
 
+  .favicon {
+    background-repeat: no-repeat;
+    background-size: var(--mwb-icon-size);
+    flex-shrink: 0;
+    height: var(--mwb-icon-size);
+    margin-inline-end: var(--mwb-list-item-horizontal-margin);
+    width: var(--mwb-icon-size);
+  }
+
   .text-container {
     flex-grow: 1;
     overflow: hidden;
@@ -65,6 +74,8 @@
   }
 </style>
 
+<div class="favicon" style="background-image:[[getFaviconUrl_(data.url.url)]]">
+</div>
 <div class="text-container">
   <div class="primary-text">[[data.title]]</div>
   <div class="secondary-text">

chrome/browser/resources/read_later/read_later_item.js

@@ -11,6 +11,7 @@ import './icons.js';
 import './read_later_shared_style.js';
 
 import {assertNotReached} from 'chrome://resources/js/assert.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';
 
 import {ReadLaterApiProxy, ReadLaterApiProxyImpl} from './read_later_api_proxy.js';
@@ -109,6 +110,15 @@ export class ReadLaterItemElement extends PolymerElement {
     this.apiProxy_.removeEntry(this.data.url);
   }
 
+  /**
+   * @param {string} url
+   * @return {string}
+   * @private
+   */
+  getFaviconUrl_(url) {
+    return getFaviconForPageURL(url, false);
+  }
+
   /**
    * @param {string} markAsUnreadIcon
    * @param {string} markAsReadIcon

chrome/browser/ui/webui/read_later/read_later_ui.cc

@@ -7,12 +7,15 @@
 #include <string>
 #include <utility>
 
+#include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/webui/favicon_source.h"
 #include "chrome/browser/ui/webui/read_later/read_later_page_handler.h"
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "chrome/common/webui_url_constants.h"
 #include "chrome/grit/generated_resources.h"
 #include "chrome/grit/read_later_resources.h"
 #include "chrome/grit/read_later_resources_map.h"
+#include "components/favicon_base/favicon_url_parser.h"
 #include "components/strings/grit/components_strings.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
@@ -48,6 +51,11 @@ ReadLaterUI::ReadLaterUI(content::WebUI* web_ui)
   for (const auto& str : kLocalizedStrings)
     AddLocalizedString(source, str.name, str.id);
 
+  Profile* profile = Profile::FromWebUI(web_ui);
+  content::URLDataSource::Add(
+      profile, std::make_unique<FaviconSource>(
+                   profile, chrome::FaviconUrlFormat::kFavicon2));
+
   webui::SetupWebUIDataSource(
       source, base::make_span(kReadLaterResources, kReadLaterResourcesSize),
       IDR_READ_LATER_READ_LATER_HTML);

chrome/test/data/webui/read_later/read_later_app_test.js

@@ -232,4 +232,13 @@ suite('ReadLaterAppTest', () => {
         keyDownOn(firstItem, 0, [], 'ArrowLeft');
         assertEquals(firstItem, readLaterApp.shadowRoot.activeElement);
       });
+
+  test('Favicons present in the dom', async () => {
+    const readLaterItems = /** @type {!NodeList<!Element>} */
+        (readLaterApp.shadowRoot.querySelectorAll('read-later-item'));
+
+    readLaterItems.forEach((readLaterItem) => {
+      assertTrue(!!readLaterItem.shadowRoot.querySelector('.favicon'));
+    });
+  });
 });