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}

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

@@ -7,6 +7,9 @@
 #include <memory>
 #include <utility>
 
+#include "chrome/browser/buildflags.h"
+#include "chrome/browser/media/kaleidoscope/constants.h"
+#include "chrome/browser/media/kaleidoscope/kaleidoscope_ui.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/search/instant_service.h"
 #include "chrome/browser/search/instant_service_factory.h"
@@ -87,8 +90,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},
@@ -207,6 +208,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",
@@ -227,15 +235,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;
 }
@@ -267,6 +277,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();
-});