Reland "Setup NTP for Kaleidoscope module"

This is a reland of 0158f88d

TBR=tiborg@chromium.org

Original change's description:
> Setup NTP for Kaleidoscope module
>
> This CL moves the Kaleidoscope NTP module upstream
> into the Kaleidoscope repo.
>
> The public Kaleidoscope module is now responsible for
> loading the resources into the NTP page.
>
> Also adds the KaleidoscopeDataProvider to the NTP.
>
> BUG=1114862
>
> Change-Id: Ibc255ea9d7fd05b10cb151d0f1e86b0f94b192cb
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2354717
> Commit-Queue: Becca Hughes <beccahughes@chromium.org>
> Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#798391}

Bug: 1114862
Change-Id: I46a7d3e5044dc505766ad6fa1e03b9a7ae8f8380
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2359553Reviewed-by: Becca Hughes <beccahughes@chromium.org>
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799204}

chrome/browser/media/kaleidoscope/kaleidoscope_internal_resources.grd

@@ -25,6 +25,7 @@
       <include name="IDR_KALEIDOSCOPE_UTILS_JS" file="internal/resources/utils.js" type="BINDATA" />
       <include name="IDR_GEOMETRY_MOJOM_LITE_JS" file="${root_gen_dir}/ui/gfx/geometry/mojom/geometry.mojom-lite.js" use_base_dir="false" type="BINDATA" />
       <include name="IDR_KALEIDOSCOPE_MOJOM_LITE_JS" file="${root_gen_dir}/chrome/browser/media/kaleidoscope/mojom/kaleidoscope.mojom-lite.js" use_base_dir="false" type="BINDATA" />
+      <include name="IDR_KALEIDOSCOPE_NTP_MODULE_JS" file="${root_gen_dir}/chrome/browser/media/kaleidoscope/internal/resources/module/module.js" use_base_dir="false" type="BINDATA" />
 
       <!-- Strings -->
       <include name="IDR_KALEIDOSCOPE_LOCALE_EN" file="${root_gen_dir}/chrome/browser/media/kaleidoscope/internal/resources/_locales/en/messages.json" use_base_dir="false" type="BINDATA" />

chrome/browser/media/kaleidoscope/kaleidoscope_ui.cc

@@ -277,7 +277,23 @@ content::WebUIDataSource* CreateUntrustedWebUIDataSource() {
   return untrusted_source;
 }
 
-content::WebUIDataSource* CreateWebUIDataSource() {
+}  // anonymous namespace
+
+// We set |enable_chrome_send| to true since we need it for browser tests.
+KaleidoscopeUI::KaleidoscopeUI(content::WebUI* web_ui)
+    : ui::MojoWebUIController(web_ui, /*enable_chrome_send=*/true) {
+  web_ui->AddRequestableScheme(content::kChromeUIUntrustedScheme);
+
+  auto* browser_context = web_ui->GetWebContents()->GetBrowserContext();
+  content::WebUIDataSource::Add(browser_context, CreateWebUIDataSource());
+  content::WebUIDataSource::Add(browser_context,
+                                CreateUntrustedWebUIDataSource());
+}
+
+KaleidoscopeUI::~KaleidoscopeUI() = default;
+
+// static
+content::WebUIDataSource* KaleidoscopeUI::CreateWebUIDataSource() {
   content::WebUIDataSource* html_source =
       content::WebUIDataSource::Create(kKaleidoscopeUIHost);
 
@@ -312,27 +328,14 @@ content::WebUIDataSource* CreateWebUIDataSource() {
   html_source->AddResourcePath(
       "chrome/browser/media/feeds/media_feeds_store.mojom-lite.js",
       IDR_MEDIA_FEEDS_STORE_MOJOM_LITE_JS);
+  html_source->AddResourcePath("module.js", IDR_KALEIDOSCOPE_NTP_MODULE_JS);
+
   html_source->SetDefaultResource(IDR_KALEIDOSCOPE_HTML);
 #endif  // BUILDFLAG(ENABLE_KALEIDOSCOPE)
 
   return html_source;
 }
 
-}  // anonymous namespace
-
-// We set |enable_chrome_send| to true since we need it for browser tests.
-KaleidoscopeUI::KaleidoscopeUI(content::WebUI* web_ui)
-    : ui::MojoWebUIController(web_ui, /*enable_chrome_send=*/true) {
-  web_ui->AddRequestableScheme(content::kChromeUIUntrustedScheme);
-
-  auto* browser_context = web_ui->GetWebContents()->GetBrowserContext();
-  content::WebUIDataSource::Add(browser_context, CreateWebUIDataSource());
-  content::WebUIDataSource::Add(browser_context,
-                                CreateUntrustedWebUIDataSource());
-}
-
-KaleidoscopeUI::~KaleidoscopeUI() = default;
-
 void KaleidoscopeUI::BindInterface(
     mojo::PendingReceiver<media::mojom::KaleidoscopeDataProvider> provider) {
   provider_ = std::make_unique<KaleidoscopeDataProviderImpl>(

chrome/browser/media/kaleidoscope/kaleidoscope_ui.h

@@ -9,6 +9,10 @@
 #include "mojo/public/cpp/bindings/pending_receiver.h"
 #include "ui/webui/mojo_web_ui_controller.h"
 
+namespace content {
+class WebUIDataSource;
+}  // namespace content
+
 class KaleidoscopeUI : public ui::MojoWebUIController {
  public:
   explicit KaleidoscopeUI(content::WebUI* web_ui);
@@ -19,6 +23,8 @@ class KaleidoscopeUI : public ui::MojoWebUIController {
   void BindInterface(
       mojo::PendingReceiver<media::mojom::KaleidoscopeDataProvider> provider);
 
+  static content::WebUIDataSource* CreateWebUIDataSource();
+
  private:
   std::unique_ptr<media::mojom::KaleidoscopeDataProvider> provider_;
 

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -284,7 +284,6 @@ group("web_components") {
   public_deps = [
     ":web_components_local",
     "modules/dummy:web_components",
-    "modules/kaleidoscope:web_components",
   ]
 }
 
@@ -342,7 +341,9 @@ if (optimize_webui) {
       "chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js",
       "chrome://resources/mojo/mojo/public/mojom/base/text_direction.mojom-lite.js",
       "chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js",
+      "chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js",
       "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js",
+      "chrome://resources/mojo/url/mojom/origin.mojom-lite.js",
       "chrome://resources/mojo/url/mojom/url.mojom-lite.js",
       "new_tab_page.mojom-lite.js",
       "omnibox.mojom-lite.js",

chrome/browser/resources/new_tab_page/modules/kaleidoscope/BUILD.gn

-# 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.
-
 import("//third_party/closure_compiler/compile_js.gni")
-import("//tools/polymer/html_to_js.gni")
 
 js_library("module") {
-  deps = [
-    "../..:grid",
-    "../..:module_descriptor",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
-html_to_js("web_components") {
-  js_files = [ "module.js" ]
+  deps = [ "//chrome/browser/resources/new_tab_page:module_descriptor" ]
 }

chrome/browser/resources/new_tab_page/modules/kaleidoscope/module.html

-<style>
-  .tile-item {
-    background-color: var(--ntp-active-background-color);
-    border-color: var(--ntp-border-color);
-    border-radius: 8px;
-    border-style: solid;
-    border-width: thin;
-    color: var(--cr-primary-text-color);
-    height: 85px;
-    line-height: 85px;
-    margin: 10px;
-    text-align: center;
-    width: 170px;
-  }
-</style>
-<ntp-grid id="tiles" columns="4">
-  <template id="tileList" is="dom-repeat" items="[[tiles]]">
-    <div class="tile-item" title="[[item.label]]">[[item.value]]</div>
-  </template>
-</ntp-grid>

chrome/browser/resources/new_tab_page/modules/kaleidoscope/module.js

@@ -2,48 +2,51 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../grid.js';
+import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
+import 'chrome://resources/mojo/url/mojom/origin.mojom-lite.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
 import {ModuleDescriptor} from '../module_descriptor.js';
 
+// TODO(beccahughes): Use import for these.
+const KALEIDOSCOPE_RESOURCES = [
+  'chrome://kaleidoscope/geometry.mojom-lite.js',
+  'chrome://kaleidoscope/chrome/browser/media/feeds/media_feeds_store.mojom-lite.js',
+  'chrome://kaleidoscope/kaleidoscope.mojom-lite.js',
+  'chrome://kaleidoscope/messages.js',
+  'chrome://kaleidoscope/kaleidoscope.js',
+  'chrome://kaleidoscope/module.js',
+];
+
 /**
- * @fileoverview The Kaleidoscope module which will serve Kaleidoscope
- * recommendations to the user through the NTP.
+ * Loads a script resource and returns a promise that will resolve when the
+ * loading is complete.
+ * @param {string} resource
+ * @returns {Promise}
  */
-
-class KaleidoscopeModuleElement extends PolymerElement {
-  static get is() {
-    return 'ntp-kaleidoscope-module';
-  }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
-
-  static get properties() {
-    return {
-      tiles: {
-        type: Array,
-        value: () => ([
-          {label: 'item1', value: 'foo'},
-          {label: 'item2', value: 'bar'},
-          {label: 'item3', value: 'baz'},
-          {label: 'item4', value: 'boo'},
-        ]),
-      }
-    };
-  }
+function loadResource(resource) {
+  return new Promise((resolve) => {
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = resource;
+    script.addEventListener('load', resolve, {once: true});
+    document.body.appendChild(script);
+  });
 }
 
-customElements.define(KaleidoscopeModuleElement.is, KaleidoscopeModuleElement);
-
 /** @type {!ModuleDescriptor} */
 export const kaleidoscopeDescriptor = new ModuleDescriptor(
-    'kaleidoscope', loadTimeData.getString('modulesKaleidoscopeName'),
-    () => Promise.resolve({
-      element: new KaleidoscopeModuleElement(),
-      title: loadTimeData.getString('modulesKaleidoscopeTitle'),
-    }));
+    'kaleidoscope',
+    loadTimeData.getString('modulesKaleidoscopeName'),
+    () => {
+      // Load all the Kaleidoscope resources into the NTP and return the module
+      // once the loading is complete.
+      return Promise.all(KALEIDOSCOPE_RESOURCES.map((r) => loadResource(r)))
+          .then(() => {
+            return {
+              element: document.createElement('ntp-kaleidoscope-module'),
+              title: loadTimeData.getString('modulesKaleidoscopeTitle'),
+            };
+          });
+    },
+);

chrome/browser/resources/new_tab_page/modules/modules_resources.grdp

@@ -4,6 +4,6 @@
       file="${root_gen_dir}/chrome/browser/resources/new_tab_page/modules/dummy/module.js"
       use_base_dir="false" type="BINDATA" compress="false" />
   <include name="IDR_NEW_TAB_PAGE_MODULES_KALEIDOSCOPE_MODULE_JS"
-      file="${root_gen_dir}/chrome/browser/resources/new_tab_page/modules/kaleidoscope/module.js"
-      use_base_dir="false" type="BINDATA" compress="false" />
+      file="modules/kaleidoscope/module.js"
+      type="BINDATA" compress="false" />
 </grit-part>

chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc

@@ -91,8 +91,6 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       base::FeatureList::IsEnabled(ntp_features::kWebUIThemeModeDoodles));
   source->AddBoolean("modulesEnabled",
                      base::FeatureList::IsEnabled(ntp_features::kModules));
-  source->AddBoolean("kaleidoscopeModuleEnabled",
-                     base::FeatureList::IsEnabled(media::kKaleidoscopeModule));
 
   static constexpr webui::LocalizedString kStrings[] = {
       {"doneButton", IDS_DONE},
@@ -211,6 +209,13 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       {omnibox::kSearchIconResourceName, IDR_WEBUI_IMAGES_ICON_SEARCH}};
   webui::AddResourcePathsBulk(source, kImages);
 
+#if BUILDFLAG(ENABLE_KALEIDOSCOPE)
+  source->AddBoolean("kaleidoscopeModuleEnabled",
+                     base::FeatureList::IsEnabled(media::kKaleidoscopeModule));
+#else
+  source->AddBoolean("kaleidoscopeModuleEnabled", false);
+#endif  // BUILDFLAG(ENABLE_KALEIDOSCOPE)
+
   source->AddResourcePath("new_tab_page.mojom-lite.js",
                           IDR_NEW_TAB_PAGE_MOJO_LITE_JS);
   source->AddResourcePath("omnibox.mojom-lite.js",
@@ -231,15 +236,17 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
   // script-src.
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ScriptSrc,
-      "script-src chrome://resources chrome://test 'self' 'unsafe-inline' "
-      "https:;");
+      "script-src chrome://resources chrome://test chrome://kaleidoscope "
+      "'self' 'unsafe-inline' https:;");
   // Allow embedding of iframes from the One Google Bar and
-  // chrome-untrusted://new-tab-page for other external content and resources.
+  // chrome-untrusted://new-tab-page for other external content and resources
+  // and chrome-untrusted://kaleidoscope for Kaleidoscope.
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ChildSrc,
-      base::StringPrintf("child-src https: %s %s;",
+      base::StringPrintf("child-src https: %s %s %s;",
                          google_util::CommandLineGoogleBaseURL().spec().c_str(),
-                         chrome::kChromeUIUntrustedNewTabPageUrl));
+                         chrome::kChromeUIUntrustedNewTabPageUrl,
+                         kKaleidoscopeUntrustedContentUIURL));
 
   return source;
 }
@@ -271,6 +278,9 @@ NewTabPageUI::NewTabPageUI(content::WebUI* web_ui)
       profile_,
       std::make_unique<ThemeSource>(profile_, /*serve_untrusted=*/true));
 
+  content::WebUIDataSource::Add(profile_,
+                                KaleidoscopeUI::CreateWebUIDataSource());
+
   web_ui->AddRequestableScheme(content::kChromeUIUntrustedScheme);
 
   instant_service_->AddObserver(this);

chrome/test/data/webui/new_tab_page/modules/kaleidoscope/OWNERS

-file://chrome/browser/media/kaleidoscope/OWNERS
-
-# COMPONENT: Internals>Media>UI>Kaleidoscope

chrome/test/data/webui/new_tab_page/modules/kaleidoscope/module_test.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.
-
-import {$$, kaleidoscopeDescriptor} from 'chrome://new-tab-page/new_tab_page.js';
-import {isVisible} from 'chrome://test/test_util.m.js';
-
-suite('NewTabPageModulesKaleidoscopeModuleTest', () => {
-  test('creates module', async () => {
-    // Act.
-    await kaleidoscopeDescriptor.initialize();
-    const module = kaleidoscopeDescriptor.element;
-    document.body.append(module);
-    module.$.tileList.render();
-
-    // Assert.
-    assertTrue(isVisible(module.$.tiles));
-    const tiles = module.shadowRoot.querySelectorAll('#tiles .tile-item');
-    assertEquals(4, tiles.length);
-    assertEquals('item3', tiles[2].getAttribute('title'));
-    assertEquals('baz', tiles[2].textContent);
-  });
-});

chrome/test/data/webui/new_tab_page/new_tab_page_browsertest.js

@@ -232,15 +232,3 @@ var NewTabPageModulesDummyModuleTest = class extends NewTabPageBrowserTest {
 TEST_F('NewTabPageModulesDummyModuleTest', 'All', function() {
   mocha.run();
 });
-
-// eslint-disable-next-line no-var
-var NewTabPageModulesKaleidoscopeModuleTest = class extends NewTabPageBrowserTest {
-  /** @override */
-  get browsePreload() {
-    return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/modules/kaleidoscope/module_test.js';
-  }
-};
-
-TEST_F('NewTabPageModulesKaleidoscopeModuleTest', 'All', function() {
-  mocha.run();
-});