Revert "Setup NTP for Kaleidoscope module"

This reverts commit 0158f88d.

Reason for revert: This CL broke the entire waterfall: https://screenshot.googleplex.com/7be9bb2e-086d-4e02-a655-68373309ec83.png

Example failure: https://ci.chromium.org/p/chrome/builders/ci/linux-chrome/13827

Traceback (most recent call last):
  File "../../tools/grit/grit.py", line 29, in <module>
    sys.exit(grit.grit_runner.Main(sys.argv[1:]))
  File "/b/s/w/ir/cache/builder/src/tools/grit/grit/grit_runner.py", line 314, in Main
    return toolobject.Run(options, args[1:])
  File "/b/s/w/ir/cache/builder/src/tools/grit/grit/tool/build.py", line 274, in Run
    self.Process()
  File "/b/s/w/ir/cache/builder/src/tools/grit/grit/tool/build.py", line 409, in Process
    self.ProcessNode(self.res, output, tmpfile)
  File "/b/s/w/ir/cache/builder/src/tools/grit/grit/tool/build.py", line 333, in ProcessNode
    formatted = formatter(node, output_node.GetLanguage(), output_dir=base_dir)
  File "/b/s/w/ir/cache/builder/src/tools/grit/grit/format/data_pack.py", line 90, in Format
    value = node.GetDataPackValue(lang, util.BINARY)
  File "/b/s/w/ir/cache/builder/src/tools/grit/grit/node/include.py", line 109, in GetDataPackValue
    data = util.ReadFile(filename, util.BINARY)
  File "/b/s/w/ir/cache/builder/src/tools/grit/grit/util.py", line 214, in ReadFile
    with io.open(filename, mode, encoding=encoding) as f:
IOError: [Errno 2] No such file or directory: '../../out/Release/gen/chrome/browser/media/kaleidoscope/internal/resources/module/module.js'



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}

TBR=beccahughes@chromium.org,tiborg@chromium.org

Change-Id: I1ec9b538cdd360d97fea01561b21d5f4d48430e1
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 1114862
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2358694Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Commit-Queue: Ahmed Fakhry <afakhry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#798402}

chrome/browser/media/kaleidoscope/kaleidoscope_internal_resources.grd

@@ -25,7 +25,6 @@
       <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,23 +277,7 @@ content::WebUIDataSource* CreateUntrustedWebUIDataSource() {
   return untrusted_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;
-
-// static
-content::WebUIDataSource* KaleidoscopeUI::CreateWebUIDataSource() {
+content::WebUIDataSource* CreateWebUIDataSource() {
   content::WebUIDataSource* html_source =
       content::WebUIDataSource::Create(kKaleidoscopeUIHost);
 
@@ -328,14 +312,27 @@ content::WebUIDataSource* KaleidoscopeUI::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,10 +9,6 @@
 #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);
@@ -23,8 +19,6 @@ 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,6 +284,7 @@ group("web_components") {
   public_deps = [
     ":web_components_local",
     "modules/dummy:web_components",
+    "modules/kaleidoscope:web_components",
   ]
 }
 
@@ -341,9 +342,7 @@ 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 = [ "//chrome/browser/resources/new_tab_page:module_descriptor" ]
+  deps = [
+    "../..:grid",
+    "../..:module_descriptor",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
+html_to_js("web_components") {
+  js_files = [ "module.js" ]
 }

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,51 +2,48 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
-import 'chrome://resources/mojo/url/mojom/origin.mojom-lite.js';
+import '../../grid.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {ModuleDescriptor} from '../module_descriptor.js';
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.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',
-];
+import {ModuleDescriptor} from '../module_descriptor.js';
 
 /**
- * Loads a script resource and returns a promise that will resolve when the
- * loading is complete.
- * @param {string} resource
- * @returns {Promise}
+ * @fileoverview The Kaleidoscope module which will serve Kaleidoscope
+ * recommendations to the user through the NTP.
  */
-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);
-  });
+
+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'},
+        ]),
+      }
+    };
+  }
 }
 
+customElements.define(KaleidoscopeModuleElement.is, KaleidoscopeModuleElement);
+
 /** @type {!ModuleDescriptor} */
 export const kaleidoscopeDescriptor = new ModuleDescriptor(
-    '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'),
-            };
-          });
-    },
-);
+    'kaleidoscope', loadTimeData.getString('modulesKaleidoscopeName'),
+    () => Promise.resolve({
+      element: new KaleidoscopeModuleElement(),
+      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="modules/kaleidoscope/module.js"
-      type="BINDATA" compress="false" />
+      file="${root_gen_dir}/chrome/browser/resources/new_tab_page/modules/kaleidoscope/module.js"
+      use_base_dir="false" type="BINDATA" compress="false" />
 </grit-part>

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

@@ -7,9 +7,6 @@
 #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"
@@ -90,6 +87,8 @@ 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},
@@ -208,13 +207,6 @@ 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",
@@ -235,17 +227,15 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
   // script-src.
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ScriptSrc,
-      "script-src chrome://resources chrome://test chrome://kaleidoscope "
-      "'self' 'unsafe-inline' https:;");
+      "script-src chrome://resources chrome://test '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
-  // and chrome-untrusted://kaleidoscope for Kaleidoscope.
+  // chrome-untrusted://new-tab-page for other external content and resources.
   source->OverrideContentSecurityPolicy(
       network::mojom::CSPDirectiveName::ChildSrc,
-      base::StringPrintf("child-src https: %s %s %s;",
+      base::StringPrintf("child-src https: %s %s;",
                          google_util::CommandLineGoogleBaseURL().spec().c_str(),
-                         chrome::kChromeUIUntrustedNewTabPageUrl,
-                         kKaleidoscopeUntrustedContentUIURL));
+                         chrome::kChromeUIUntrustedNewTabPageUrl));
 
   return source;
 }
@@ -277,9 +267,6 @@ 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,3 +232,15 @@ 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();
+});