[ntp][modules] Add setting to hide modules

Offers a toggle in the customize dialog that hides modules on the NTP.
Screenshot (shown): https://screenshot.googleplex.com/BKvcrirTE6quvdi
Screenshot (hidden): https://screenshot.googleplex.com/AxMQ6DZa3MrHopf

Upon closing the customize dialog the visibility will be applied to the
current NTP and saved to prefs.

Bug: 1135393
Change-Id: I1dde6109ab3b8acccee5a4c57681a42302fbec76
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2454329
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Alex Gough <ajgo@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Lei Zhang <thestig@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814816}

chrome/browser/prefs/browser_prefs.cc

@@ -241,6 +241,7 @@
 #include "chrome/browser/ui/startup/startup_browser_creator.h"
 #include "chrome/browser/ui/webui/history/foreign_session_handler.h"
 #include "chrome/browser/ui/webui/history/history_ui.h"
+#include "chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.h"
 #include "chrome/browser/ui/webui/settings/settings_ui.h"
 #include "chrome/browser/upgrade_detector/upgrade_detector.h"
 #include "components/ntp_tiles/custom_links_manager_impl.h"
@@ -889,6 +890,7 @@ void RegisterProfilePrefs(user_prefs::PrefRegistrySyncable* registry,
   HistoryUI::RegisterProfilePrefs(registry);
   InstantService::RegisterProfilePrefs(registry);
   media_router::RegisterProfilePrefs(registry);
+  NewTabPageHandler::RegisterProfilePrefs(registry);
   NewTabUI::RegisterProfilePrefs(registry);
   ntp_tiles::CustomLinksManagerImpl::RegisterProfilePrefs(registry);
   PinnedTabCodec::RegisterProfilePrefs(registry);

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -253,6 +253,7 @@ html_to_js("web_components_local") {
     "realbox.js",
     "iframe.js",
     "voice_search_overlay.js",
+    "customize_modules.js",
   ]
 }
 
@@ -293,6 +294,7 @@ if (optimize_webui) {
       "customize_dialog.js",
       "voice_search_overlay.js",
       "customize_backgrounds.js",
+      "customize_modules.js",
       "customize_shortcuts.js",
       "iframe.js",
       "mini_page.js",

chrome/browser/resources/new_tab_page/app.html

@@ -109,7 +109,8 @@
   }
 
   :host(:not([promo-and-modules-loaded_])) ntp-middle-slot-promo,
-  :host(:not([promo-and-modules-loaded_])) ntp-module-wrapper {
+  :host(:not([promo-and-modules-loaded_])) ntp-module-wrapper,
+  :host(:not([modules-visible_])) ntp-module-wrapper {
     display: none;
   }
 

chrome/browser/resources/new_tab_page/app.js

@@ -199,6 +199,12 @@ class AppElement extends PolymerElement {
         reflectToAttribute: true,
       },
 
+      /** @private */
+      modulesVisible_: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       /** @private */
       middleSlotPromoLoaded_: Boolean,
 
@@ -216,7 +222,14 @@ class AppElement extends PolymerElement {
         computed: `computePromoAndModulesLoaded_(middleSlotPromoLoaded_,
             modulesLoaded_)`,
         reflectToAttribute: true,
-        observer: 'onPromoAndModulesLoadedChange_',
+      },
+
+      /** @private */
+      modulesLoadedAndVisible_: {
+        type: Boolean,
+        computed: `computeModulesLoadedAndVisible_(promoAndModulesLoaded_,
+            modulesVisible_)`,
+        observer: 'onModulesLoadedAndVisibleChange_',
       },
 
       /**
@@ -259,6 +272,8 @@ class AppElement extends PolymerElement {
     this.backgroundManager_ = BackgroundManager.getInstance();
     /** @private {?number} */
     this.setThemeListenerId_ = null;
+    /** @private {?number} */
+    this.setModulesVisibleListenerId_ = null;
     /** @private {!EventTracker} */
     this.eventTracker_ = new EventTracker();
     this.loadOneGoogleBar_();
@@ -283,6 +298,11 @@ class AppElement extends PolymerElement {
           performance.measure('theme-set');
           this.theme_ = theme;
         });
+    this.setModulesVisibleListenerId_ =
+        this.callbackRouter_.setModulesVisible.addListener(visible => {
+          this.modulesVisible_ = visible;
+        });
+    this.pageHandler_.updateModulesVisible();
     this.eventTracker_.add(window, 'message', (event) => {
       /** @type {!Object} */
       const data = event.data;
@@ -501,6 +521,14 @@ class AppElement extends PolymerElement {
         (!loadTimeData.getBoolean('modulesEnabled') || this.modulesLoaded_);
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeModulesLoadedAndVisible_() {
+    return this.promoAndModulesLoaded_ && this.modulesVisible_;
+  }
+
   /** @private */
   async onLazyRendered_() {
     if (!loadTimeData.getBoolean('modulesEnabled')) {
@@ -593,8 +621,10 @@ class AppElement extends PolymerElement {
   }
 
   /** @private */
-  onPromoAndModulesLoadedChange_() {
-    this.pageHandler_.onModulesRendered(BrowserProxy.getInstance().now());
+  onModulesLoadedAndVisibleChange_() {
+    if (this.modulesLoadedAndVisible_) {
+      this.pageHandler_.onModulesRendered(BrowserProxy.getInstance().now());
+    }
   }
 
   /**

chrome/browser/resources/new_tab_page/customize_dialog.html

@@ -154,6 +154,10 @@
     -webkit-mask-image: url(icons/link.svg);
   }
 
+  #modulesIcon {
+    -webkit-mask-image: url(icons/cards.svg);
+  }
+
   #themesIcon {
     -webkit-mask-image: url(icons/colors.svg);
   }
@@ -214,6 +218,11 @@
               <div id="shortcutsIcon" class="menu-item-icon"></div>
               $i18n{shortcutsMenuItem}
             </div>
+            <div class="menu-item" page-name="modules" tabindex="0"
+                hidden$="[[!modulesEnabled_]]">
+              <div id="modulesIcon" class="menu-item-icon"></div>
+              $i18n{modulesMenuItem}
+            </div>
             <div class="menu-item" page-name="themes" tabindex="0">
               <div id="themesIcon" class="menu-item-icon"></div>
               $i18n{themesMenuItem}
@@ -231,6 +240,9 @@
             </ntp-customize-backgrounds>
             <ntp-customize-shortcuts page-name="shortcuts">
             </ntp-customize-shortcuts>
+            <ntp-customize-modules page-name="modules"
+                hidden$="[[!modulesEnabled_]]">
+            </ntp-customize-modules>
             <cr-customize-themes id="customizeThemes" page-name="themes">
             </cr-customize-themes>
           </iron-pages>

chrome/browser/resources/new_tab_page/customize_dialog.js

@@ -11,8 +11,10 @@ import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
 import './customize_backgrounds.js';
 import './customize_shortcuts.js';
+import './customize_modules.js';
 
 import {assert} from 'chrome://resources/js/assert.m.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 {BrowserProxy} from './browser_proxy.js';
@@ -91,6 +93,12 @@ class CustomizeDialogElement extends PolymerElement {
         computed: `computeIsRefreshToggleChecked_(theme, selectedCollection_,
             backgroundSelection)`,
       },
+
+      /** @private */
+      modulesEnabled_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('modulesEnabled'),
+      },
     };
   }
 
@@ -153,6 +161,9 @@ class CustomizeDialogElement extends PolymerElement {
   onDoneClick_() {
     this.$.customizeThemes.confirmThemeChanges();
     this.shadowRoot.querySelector('ntp-customize-shortcuts').apply();
+    if (this.modulesEnabled_) {
+      this.shadowRoot.querySelector('ntp-customize-modules').apply();
+    }
     switch (this.backgroundSelection.type) {
       case BackgroundSelectionType.NO_BACKGROUND:
         this.pageHandler_.setNoBackgroundImage();

chrome/browser/resources/new_tab_page/customize_modules.html

+<style include="cr-icons">
+  :host {
+    line-height: 20px;
+  }
+
+  #hide {
+    align-items: center;
+    border: 1px solid var(--ntp-border-color);
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    height: 64px;
+    max-width: 544px;
+    width: 100%;
+  }
+
+  :host([hide_]) #hide {
+    background-color: var(--ntp-selected-background-color);
+    border-color: var(--ntp-selected-border-color);
+    color: var(--ntp-selected-border-color);
+  }
+
+  #hideIcon {
+    margin-inline-end: 20px;
+    margin-inline-start: 24px;
+  }
+
+  :host([hide_]) #hideIcon {
+    background-color: var(--ntp-selected-border-color);
+  }
+
+  #hideTitleContainer {
+    flex-grow: 1;
+  }
+
+  #hideTitle {
+    font-weight: bold;
+  }
+
+  cr-toggle {
+    margin-inline-end: 20px;
+  }
+</style>
+<div id="hide">
+  <div id="hideIcon" class="cr-icon icon-visibility-off"></div>
+  <div id="hideTitleContainer">
+    <div id="hideTitle">$i18n{hideModules}</div>
+    $i18n{hideModulesDesc}
+  </div>
+  <cr-toggle id="hideToggle" title="$i18n{hideModules}" checked="[[hide_]]"
+      on-change="onHideChange_"></cr-toggle>
+</div>

chrome/browser/resources/new_tab_page/customize_modules.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 './mini_page.js';
+import 'chrome://resources/cr_elements/cr_icons_css.m.js';
+import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {BrowserProxy} from './browser_proxy.js';
+
+/** Element that lets the user configure modules settings. */
+class CustomizeModulesElement extends PolymerElement {
+  static get is() {
+    return 'ntp-customize-modules';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      /** @private */
+      hide_: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    /** @private {?number} */
+    this.setModulesVisibleListenerId_ = null;
+  }
+
+  /** @override */
+  connectedCallback() {
+    super.connectedCallback();
+    this.setModulesVisibleListenerId_ =
+        BrowserProxy.getInstance().callbackRouter.setModulesVisible.addListener(
+            visible => {
+              this.hide_ = !visible;
+            });
+    BrowserProxy.getInstance().handler.updateModulesVisible();
+  }
+
+  /** @override */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    BrowserProxy.getInstance().callbackRouter.removeListener(
+        assert(this.setModulesVisibleListenerId_));
+  }
+
+  apply() {
+    BrowserProxy.getInstance().handler.setModulesVisible(!this.hide_);
+  }
+
+  /**
+   * @param {!CustomEvent<boolean>} e
+   * @private
+   */
+  onHideChange_(e) {
+    this.hide_ = e.detail;
+  }
+}
+
+customElements.define(CustomizeModulesElement.is, CustomizeModulesElement);

chrome/browser/resources/new_tab_page/icons/cards.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.667 2.5H2.5a.836.836 0 0 0-.833.833v5c0 .459.375.834.833.834h14.167a.836.836 0 0 0 .833-.834v-5a.836.836 0 0 0-.833-.833zm-.834 5V4.167h-12.5V7.5h12.5zm0 8.333V12.5h-12.5v3.333h12.5zm-13.333-5h14.167c.458 0 .833.375.833.834v5a.836.836 0 0 1-.833.833H2.5a.836.836 0 0 1-.833-.833v-5c0-.459.375-.834.833-.834z" fill="#3367D6"/></svg>
\ No newline at end of file

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -36,6 +36,9 @@
       <include name="IDR_NEW_TAB_PAGE_CUSTOMIZE_SHORTCUTS_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/customize_shortcuts.js"
           use_base_dir="false" type="BINDATA" compress="false" />
+      <include name="IDR_NEW_TAB_PAGE_CUSTOMIZE_MODULES_JS"
+          file="${root_gen_dir}/chrome/browser/resources/new_tab_page/customize_modules.js"
+          use_base_dir="false" type="BINDATA" compress="false" />
       <include name="IDR_NEW_TAB_IFRAME_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/iframe.js"
           use_base_dir="false" type="BINDATA" compress="false" />

chrome/browser/resources/new_tab_page/new_tab_page_resources_common.grdp

@@ -45,6 +45,8 @@
       type="BINDATA" />
   <include name="IDR_NEW_TAB_PAGE_INFO_SVG" file="icons/info.svg"
       type="BINDATA" />
+  <include name="IDR_NEW_TAB_PAGE_CARDS_SVG" file="icons/cards.svg"
+      type="BINDATA" />
   <include name="IDR_NEW_TAB_PAGE_NEW_TAB_PAGE_HTML"
       file="new_tab_page.html" type="BINDATA" />
   <include name="IDR_NEW_TAB_PAGE_SHARED_VARS_CSS"

chrome/browser/ui/webui/new_tab_page/new_tab_page.mojom

@@ -341,6 +341,10 @@ interface PageHandler {
   OnDismissModule(string module_id);
   // Called when a module the given id is restored.
   OnRestoreModule(string module_id);
+  // If |visible| the modules will be shown.
+  SetModulesVisible(bool visible);
+  // Triggers a call to |SetModulesVisible| with the current visibility setting.
+  UpdateModulesVisible();
 
   // ======= METRICS =======
   // Logs that |tiles| were displayed / updated at |time|. The first instance of
@@ -437,6 +441,8 @@ interface Page {
   SetFakeboxFocused(bool focused);
   // If |visible| shows the fakebox.
   SetFakeboxVisible(bool visible);
+  // Updates the module visibility.
+  SetModulesVisible(bool visible);
 
   // ======= REALBOX =======
   // Updates the NTP realbox with the autocomplete results.

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

@@ -56,6 +56,7 @@
 #include "components/omnibox/browser/omnibox_event_global_tracker.h"
 #include "components/omnibox/browser/omnibox_log.h"
 #include "components/omnibox/browser/omnibox_prefs.h"
+#include "components/prefs/pref_service.h"
 #include "components/search_engines/omnibox_focus_type.h"
 #include "components/search_engines/template_url_service.h"
 #include "components/search_provider_logos/logo_service.h"
@@ -71,6 +72,8 @@ namespace {
 
 const int64_t kMaxDownloadBytes = 1024 * 1024;
 
+constexpr char kModulesVisiblePrefName[] = "NewTabPage.ModulesVisible";
+
 new_tab_page::mojom::ThemePtr MakeTheme(const NtpTheme& ntp_theme) {
   auto theme = new_tab_page::mojom::Theme::New();
   theme->is_default = ntp_theme.using_default_theme;
@@ -399,6 +402,11 @@ NewTabPageHandler::~NewTabPageHandler() {
   }
 }
 
+// static
+void NewTabPageHandler::RegisterProfilePrefs(PrefRegistrySimple* registry) {
+  registry->RegisterBooleanPref(kModulesVisiblePrefName, true);
+}
+
 void NewTabPageHandler::AddMostVisitedTile(
     const GURL& url,
     const std::string& title,
@@ -665,6 +673,16 @@ void NewTabPageHandler::OnRestoreModule(const std::string& module_id) {
   base::UmaHistogramExactLinear(histogram_prefix + "." + module_id, 1, 1);
 }
 
+void NewTabPageHandler::SetModulesVisible(bool visible) {
+  profile_->GetPrefs()->SetBoolean(kModulesVisiblePrefName, visible);
+  UpdateModulesVisible();
+}
+
+void NewTabPageHandler::UpdateModulesVisible() {
+  page_->SetModulesVisible(
+      profile_->GetPrefs()->GetBoolean(kModulesVisiblePrefName));
+}
+
 void NewTabPageHandler::OnPromoDataUpdated() {
   if (promo_load_start_time_.has_value()) {
     base::TimeDelta duration = base::TimeTicks::Now() - *promo_load_start_time_;

chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.h

@@ -71,6 +71,8 @@ class NewTabPageHandler : public new_tab_page::mojom::PageHandler,
   static const char kModuleDismissedHistogram[];
   static const char kModuleRestoredHistogram[];
 
+  static void RegisterProfilePrefs(PrefRegistrySimple* registry);
+
   // new_tab_page::mojom::PageHandler:
   void AddMostVisitedTile(const GURL& url,
                           const std::string& title,
@@ -105,6 +107,8 @@ class NewTabPageHandler : public new_tab_page::mojom::PageHandler,
   void GetPromo(GetPromoCallback callback) override;
   void OnDismissModule(const std::string& module_id) override;
   void OnRestoreModule(const std::string& module_id) override;
+  void SetModulesVisible(bool visible) override;
+  void UpdateModulesVisible() override;
   void OnMostVisitedTilesRendered(
       std::vector<new_tab_page::mojom::MostVisitedTilePtr> tiles,
       double time) override;

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

@@ -50,6 +50,7 @@ class MockPage : public new_tab_page::mojom::Page {
   MOCK_METHOD1(SetTheme, void(new_tab_page::mojom::ThemePtr));
   MOCK_METHOD1(SetFakeboxFocused, void(bool));
   MOCK_METHOD1(SetFakeboxVisible, void(bool));
+  MOCK_METHOD1(SetModulesVisible, void(bool));
   MOCK_METHOD1(AutocompleteResultChanged,
                void(search::mojom::AutocompleteResultPtr));
   MOCK_METHOD3(AutocompleteMatchImageAvailable,

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

@@ -127,12 +127,15 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
       {"defaultThemeLabel", IDS_NTP_CUSTOMIZE_DEFAULT_LABEL},
       {"hideShortcuts", IDS_NTP_CUSTOMIZE_HIDE_SHORTCUTS_LABEL},
       {"hideShortcutsDesc", IDS_NTP_CUSTOMIZE_HIDE_SHORTCUTS_DESC},
+      {"hideModules", IDS_NTP_CUSTOMIZE_HIDE_MODULES_LABEL},
+      {"hideModulesDesc", IDS_NTP_CUSTOMIZE_HIDE_MODULES_DESC},
       {"mostVisited", IDS_NTP_CUSTOMIZE_MOST_VISITED_LABEL},
       {"myShortcuts", IDS_NTP_CUSTOMIZE_MY_SHORTCUTS_LABEL},
       {"noBackground", IDS_NTP_CUSTOMIZE_NO_BACKGROUND_LABEL},
       {"refreshDaily", IDS_NTP_CUSTOM_BG_DAILY_REFRESH},
       {"shortcutsCurated", IDS_NTP_CUSTOMIZE_MY_SHORTCUTS_DESC},
       {"shortcutsMenuItem", IDS_NTP_CUSTOMIZE_MENU_SHORTCUTS_LABEL},
+      {"modulesMenuItem", IDS_NTP_CUSTOMIZE_MENU_MODULES_LABEL},
       {"shortcutsOption", IDS_NTP_CUSTOMIZE_MENU_SHORTCUTS_LABEL},
       {"shortcutsSuggested", IDS_NTP_CUSTOMIZE_MOST_VISITED_DESC},
       {"themesMenuItem", IDS_NTP_CUSTOMIZE_MENU_COLOR_LABEL},

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

@@ -439,26 +439,32 @@ suite('NewTabPageAppTest', () => {
       });
     });
 
-    test('modules appended to page', async () => {
-      // Act.
-      moduleResolver.resolve([
-        {
-          id: 'foo',
-          element: document.createElement('div'),
-          title: 'Foo Title',
-        },
-        {
-          id: 'bar',
-          element: document.createElement('div'),
-          title: 'Bar Title',
-        }
-      ]);
-      await flushTasks();  // Wait for module descriptor resolution.
-
-      // Assert.
-      const modules = app.shadowRoot.querySelectorAll('ntp-module-wrapper');
-      assertEquals(2, modules.length);
-      assertEquals(1, testProxy.handler.getCallCount('onModulesRendered'));
+    [true, false].forEach(visible => {
+      test(`modules appended to page if visibility ${visible}`, async () => {
+        // Act.
+        moduleResolver.resolve([
+          {
+            id: 'foo',
+            element: document.createElement('div'),
+            title: 'Foo Title',
+          },
+          {
+            id: 'bar',
+            element: document.createElement('div'),
+            title: 'Bar Title',
+          }
+        ]);
+        testProxy.callbackRouterRemote.setModulesVisible(visible);
+        await flushTasks();  // Wait for module descriptor resolution.
+
+        // Assert.
+        const modules = app.shadowRoot.querySelectorAll('ntp-module-wrapper');
+        assertEquals(2, modules.length);
+        assertEquals(
+            visible ? 1 : 0,
+            testProxy.handler.getCallCount('onModulesRendered'));
+        assertEquals(1, testProxy.handler.getCallCount('updateModulesVisible'));
+      });
     });
 
     test('modules can be dismissed and restored', async () => {

chrome/test/data/webui/new_tab_page/customize_modules_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 {BrowserProxy} from 'chrome://new-tab-page/new_tab_page.js';
+import {createTestProxy} from 'chrome://test/new_tab_page/test_support.js';
+
+suite('NewTabPageCustomizeModulesTest', () => {
+  /** @type {!CustomizeModulesElement} */
+  let customizeModules;
+
+  /**
+   * @implements {BrowserProxy}
+   * @extends {TestBrowserProxy}
+   */
+  let testProxy;
+
+  setup(() => {
+    PolymerTest.clearBody();
+
+    testProxy = createTestProxy();
+    BrowserProxy.instance_ = testProxy;
+
+    customizeModules = document.createElement('ntp-customize-modules');
+    document.body.appendChild(customizeModules);
+  });
+
+  [true, false].forEach(visible => {
+    test('toggle hide calls handler', async () => {
+      // Arrange.
+      testProxy.callbackRouterRemote.setModulesVisible(visible);
+
+      // Act.
+      customizeModules.$.hideToggle.click();
+      customizeModules.apply();
+
+      // Assert.
+      assertEquals(1, testProxy.handler.getCallCount('setModulesVisible'));
+    });
+  });
+});

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

@@ -83,6 +83,18 @@ TEST_F('NewTabPageCustomizeShortcutsTest', 'All', function() {
   mocha.run();
 });
 
+// eslint-disable-next-line no-var
+var NewTabPageCustomizeModulesTest = class extends NewTabPageBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/customize_modules_test.js';
+  }
+};
+
+TEST_F('NewTabPageCustomizeModulesTest', 'All', function() {
+  mocha.run();
+});
+
 // eslint-disable-next-line no-var
 var NewTabPageCustomizeBackgroundsTest = class extends NewTabPageBrowserTest {
   /** @override */