[ntp-modules] V2 container layout column count param

Introduces a configurable max column count feature param to control the
modules container layout constraints.

Fixed: 1467371,1475741
Change-Id: I45acea16f1d8ae1214c1bf6561de50fe60614342
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4811137
Commit-Queue: Roman Arora <romanarora@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com>
Cr-Commit-Position: refs/heads/main@{#1188326}

chrome/browser/resources/new_tab_page/lazy_load.ts

@@ -57,5 +57,5 @@ export {CartTileModuleElementV2} from './modules/v2/history_clusters/cart/cart_t
 export {HistoryClustersProxyImpl as HistoryClustersProxyImplV2} from './modules/v2/history_clusters/history_clusters_proxy.js';
 export {historyClustersDescriptor as historyClustersV2Descriptor, HistoryClustersModuleElement as HistoryClustersV2ModuleElement} from './modules/v2/history_clusters/module.js';
 export {ModuleHeaderElementV2} from './modules/v2/module_header.js';
-export {DismissModuleInstanceEvent, MAX_COLUMN_COUNT, ModulesV2Element, NamedWidth, SUPPORTED_MODULE_WIDTHS} from './modules/v2/modules.js';
+export {DismissModuleInstanceEvent, ModulesV2Element, NamedWidth, SUPPORTED_MODULE_WIDTHS} from './modules/v2/modules.js';
 export {VoiceSearchOverlayElement} from './voice_search_overlay.js';

chrome/browser/resources/new_tab_page/modules/v2/modules.ts

@@ -31,16 +31,11 @@ export const SUPPORTED_MODULE_WIDTHS: NamedWidth[] = [
   {name: 'wide', value: 728},
 ];
 
-export const MAX_COLUMN_COUNT = 5;
-
 interface QueryDetails {
   maxWidth: number;
   query: string;
 }
 
-/* Derived from 5 * narrow module width + 4 * wrapper gap width. */
-const CONTAINER_MAX_WIDTH = 1592;
-
 const CONTAINER_GAP_WIDTH = 8;
 
 const MARGIN_WIDTH = 48;
@@ -99,6 +94,8 @@ export class ModulesV2Element extends PolymerElement {
   }
 
   modulesShownToUser: boolean;
+  private maxColumnCount_: number;
+  private containerMaxWidth_: number;
   private disabledModules_: {all: boolean, ids: string[]};
   private eventTracker_: EventTracker = new EventTracker();
   private undoData_: {message: string, undo?: () => void}|null;
@@ -120,9 +117,9 @@ export class ModulesV2Element extends PolymerElement {
     const widths: Set<number> = new Set();
     for (let i = 0; i < SUPPORTED_MODULE_WIDTHS.length; i++) {
       const namedWidth = SUPPORTED_MODULE_WIDTHS[i];
-      for (let u = 1; u <= MAX_COLUMN_COUNT - i; u++) {
+      for (let u = 1; u <= this.maxColumnCount_ - i; u++) {
         const width = (namedWidth.value * u) + (CONTAINER_GAP_WIDTH * (u - 1));
-        if (width <= CONTAINER_MAX_WIDTH) {
+        if (width <= this.containerMaxWidth_) {
           widths.add(width);
         }
       }
@@ -189,6 +186,10 @@ export class ModulesV2Element extends PolymerElement {
       '--container-gap': `${CONTAINER_GAP_WIDTH}px`,
     });
 
+    this.maxColumnCount_ = loadTimeData.getInteger('modulesMaxColumnCount');
+    this.containerMaxWidth_ =
+        this.maxColumnCount_ * SUPPORTED_MODULE_WIDTHS[0].value +
+        (this.maxColumnCount_ - 1) * CONTAINER_GAP_WIDTH;
     this.loadModules_();
   }
 
@@ -276,7 +277,8 @@ export class ModulesV2Element extends PolymerElement {
   private updateContainerAndChildrenStyles_(availableWidth?: number) {
     if (typeof availableWidth === 'undefined') {
       availableWidth = Math.min(
-          document.body.clientWidth - 2 * MARGIN_WIDTH, CONTAINER_MAX_WIDTH);
+          document.body.clientWidth - 2 * MARGIN_WIDTH,
+          this.containerMaxWidth_);
     }
 
     const moduleWrappers =
@@ -296,7 +298,7 @@ export class ModulesV2Element extends PolymerElement {
         Math.floor(
             (availableWidth + CONTAINER_GAP_WIDTH) /
             (CONTAINER_GAP_WIDTH + SUPPORTED_MODULE_WIDTHS[0].value)),
-        MAX_COLUMN_COUNT);
+        this.maxColumnCount_);
 
     let index = 0;
     while (index < moduleWrappers.length) {

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

@@ -236,6 +236,8 @@ content::WebUIDataSource* CreateAndAddNewTabPageUiHtmlSource(Profile* profile) {
                                                ntp_features::kNtpModulesLoad));
   source->AddInteger("modulesLoadTimeout",
                      ntp_features::GetModulesLoadTimeout().InMilliseconds());
+  source->AddInteger("modulesMaxColumnCount",
+                     ntp_features::GetModulesMaxColumnCount());
   source->AddBoolean("mostVisitedReflowOnOverflowEnabled",
                      base::FeatureList::IsEnabled(
                          ntp_features::kNtpMostVisitedReflowOnOverflow));

chrome/test/data/webui/new_tab_page/modules/v2/modules_test.ts

@@ -2,9 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {MAX_COLUMN_COUNT, Module, ModuleDescriptor, ModuleRegistry, ModulesV2Element, ModuleWrapperElement, NamedWidth, SUPPORTED_MODULE_WIDTHS} from 'chrome://new-tab-page/lazy_load.js';
+import {Module, ModuleDescriptor, ModuleRegistry, ModulesV2Element, ModuleWrapperElement, NamedWidth, SUPPORTED_MODULE_WIDTHS} from 'chrome://new-tab-page/lazy_load.js';
 import {NewTabPageProxy} from 'chrome://new-tab-page/new_tab_page.js';
 import {PageCallbackRouter, PageHandlerRemote, PageRemote} from 'chrome://new-tab-page/new_tab_page.mojom-webui.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {assertDeepEquals, assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {fakeMetricsPrivate, MetricsTracker} from 'chrome://webui-test/metrics_test_support.js';
 import {waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
@@ -13,6 +14,7 @@ import {TestMock} from 'chrome://webui-test/test_mock.js';
 import {assertNotStyle, assertStyle, createElement, initNullModule, installMock} from '../../test_support.js';
 
 const SAMPLE_SCREEN_WIDTH = 1080;
+const MAX_COLUMN_COUNT = 5;
 
 suite('NewTabPageModulesModulesV2Test', () => {
   let callbackRouterRemote: PageRemote;
@@ -22,6 +24,9 @@ suite('NewTabPageModulesModulesV2Test', () => {
 
   setup(async () => {
     document.body.innerHTML = window.trustedTypes!.emptyHTML;
+    loadTimeData.overrideValues({
+      modulesMaxColumnCount: MAX_COLUMN_COUNT,
+    });
     handler = installMock(
         PageHandlerRemote,
         (mock: PageHandlerRemote) =>

components/search/ntp_features.cc

@@ -158,6 +158,11 @@ BASE_FEATURE(kNtpModulesOrder,
              "NtpModulesOrder",
              base::FEATURE_DISABLED_BY_DEFAULT);
 
+// Dummy feature to set param "NtpModulesMaxColumnCountParam".
+BASE_FEATURE(kNtpModulesMaxColumnCount,
+             "NtpModulesMaxColumnCount",
+             base::FEATURE_DISABLED_BY_DEFAULT);
+
 // If true, displays a horizontal scrollbar on overflowing modules.
 BASE_FEATURE(kNtpModulesOverflowScrollbar,
              "NtpModulesOverflowScrollbar",
@@ -351,6 +356,7 @@ const char kNtpModulesEligibleForHappinessTrackingSurveyParam[] =
     "NtpModulesEligibleForHappinessTrackingSurveyParam";
 const char kNtpModulesLoadTimeoutMillisecondsParam[] =
     "NtpModulesLoadTimeoutMillisecondsParam";
+const char kNtpModulesMaxColumnCountParam[] = "NtpModulesMaxColumnCountParam";
 const char kNtpModulesOrderParam[] = "NtpModulesOrderParam";
 const char kNtpChromeCartModuleDataParam[] = "NtpChromeCartModuleDataParam";
 const char kNtpChromeCartModuleAbandonedCartDiscountParam[] =
@@ -415,6 +421,11 @@ base::TimeDelta GetModulesLoadTimeout() {
   return base::Milliseconds(param_value_as_int);
 }
 
+int GetModulesMaxColumnCount() {
+  return base::GetFieldTrialParamByFeatureAsInt(
+      kNtpModulesMaxColumnCount, kNtpModulesMaxColumnCountParam, 3);
+}
+
 std::vector<std::string> GetModulesOrder() {
   return base::SplitString(base::GetFieldTrialParamValueByFeature(
                                kNtpModulesOrder, kNtpModulesOrderParam),

components/search/ntp_features.h

@@ -181,6 +181,10 @@ extern const char kNtpRealboxWidthBehaviorParam[];
 // Returns the timeout after which the load of a module should be aborted.
 base::TimeDelta GetModulesLoadTimeout();
 
+// Returns the maximum number of columns to show on the redesigned modules UI
+// experience.
+int GetModulesMaxColumnCount();
+
 // Returns a list of module IDs ordered by how they should appear on the NTP.
 std::vector<std::string> GetModulesOrder();
 }  // namespace ntp_features