Add empty Chrome Kaleidoscope NTP module

Adds empty Chrome Kaleidoscope NTP module as
a placeholder.

BUG=1114862

Change-Id: Iee00259b9848394ead7d6b80cb1d311f07a5abcd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2347909
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#796969}

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -236,6 +236,7 @@ js_library("modules") {
   deps = [
     ":module_registry",
     "modules/dummy:module",
+    "modules/kaleidoscope:module",
   ]
 }
 
@@ -272,6 +273,7 @@ group("web_components") {
   public_deps = [
     ":web_components_local",
     "modules/dummy:web_components",
+    "modules/kaleidoscope:web_components",
   ]
 }
 

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" ]
+}

chrome/browser/resources/new_tab_page/modules/kaleidoscope/OWNERS

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

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

+// 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 '../../grid.js';
+
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {ModuleDescriptor} from '../module_descriptor.js';
+
+/**
+ * @fileoverview The Kaleidoscope module which will serve Kaleidoscope
+ * recommendations to the user through the NTP.
+ */
+
+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 = {
+  id: 'kaleidoscope',
+  create: () => Promise.resolve(new KaleidoscopeModuleElement()),
+};

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

@@ -6,8 +6,16 @@
  * @fileoverview Registers all NTP modules given their respective descriptors.
  */
 
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {dummyDescriptor} from './dummy/module.js';
+import {kaleidoscopeDescriptor} from './kaleidoscope/module.js';
 import {ModuleRegistry} from './module_registry.js';
 
+const descriptors = [dummyDescriptor];
+
+if (loadTimeData.getBoolean('kaleidoscopeModuleEnabled')) {
+  descriptors.push(kaleidoscopeDescriptor);
+}
+
 /** @type {!ModuleRegistry} */
-export const registry = new ModuleRegistry([dummyDescriptor]);
+export const registry = new ModuleRegistry(descriptors);

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

@@ -3,4 +3,7 @@
   <include name="IDR_NEW_TAB_PAGE_MODULES_DUMMY_MODULE_JS"
       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" />
 </grit-part>

chrome/browser/resources/new_tab_page/new_tab_page.js

@@ -16,6 +16,7 @@ export {BackgroundManager} from './background_manager.js';
 export {BrowserProxy} from './browser_proxy.js';
 export {BackgroundSelectionType} from './customize_dialog.js';
 export {dummyDescriptor} from './modules/dummy/module.js';
+export {kaleidoscopeDescriptor} from './modules/kaleidoscope/module.js';
 export {ModuleRegistry} from './modules/module_registry.js';
 export {PromoBrowserCommandProxy} from './promo_browser_command_proxy.js';
 export {$$, createScrollBorders, decodeString16, hexColorToSkColor, mojoString16, skColorToRgba} from './utils.js';

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

@@ -31,6 +31,7 @@
 #include "content/public/browser/navigation_handle.h"
 #include "content/public/browser/url_data_source.h"
 #include "content/public/browser/web_ui_data_source.h"
+#include "media/base/media_switches.h"
 #include "services/network/public/mojom/content_security_policy.mojom.h"
 #include "ui/base/accelerators/accelerator.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -86,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},

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.
+    const module = await kaleidoscopeDescriptor.create();
+    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

@@ -220,3 +220,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();
+});

media/base/media_switches.cc

@@ -761,6 +761,9 @@ const base::Feature kInternalMediaSession {
 const base::Feature kKaleidoscope{"Kaleidoscope",
                                   base::FEATURE_ENABLED_BY_DEFAULT};
 
+const base::Feature kKaleidoscopeModule{"KaleidoscopeModule",
+                                        base::FEATURE_DISABLED_BY_DEFAULT};
+
 const base::Feature kUseFakeDeviceForMediaStream{
     "use-fake-device-for-media-stream", base::FEATURE_DISABLED_BY_DEFAULT};
 

media/base/media_switches.h

@@ -133,6 +133,7 @@ MEDIA_EXPORT extern const base::Feature kHardwareMediaKeyHandling;
 MEDIA_EXPORT extern const base::Feature kHardwareSecureDecryption;
 MEDIA_EXPORT extern const base::Feature kInternalMediaSession;
 MEDIA_EXPORT extern const base::Feature kKaleidoscope;
+MEDIA_EXPORT extern const base::Feature kKaleidoscopeModule;
 MEDIA_EXPORT extern const base::Feature kLiveCaption;
 MEDIA_EXPORT extern const base::Feature kLowDelayVideoRenderingOnLiveStream;
 MEDIA_EXPORT extern const base::Feature kMediaCapabilitiesQueryGpuFactories;