Add New Tab rebrand feature flag wiring (#2844)

* Add New Tab rebrand feature flag wiring

* Document the rebrand query param in the New Tab README.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Document the disabled option for the rebrand query param.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: borgateo

special-pages/pages/new-tab/app/components/App.module.css

@@ -27,6 +27,10 @@ body[data-animate-background="true"] {
     transition: background-color .3s;
 }
 
+body[data-rebrand="true"] {
+    /* NTP rebrand styles go here. */
+}
+
 :global(.layout-centered) {
     margin-inline: auto;
     width: 100%;

special-pages/pages/new-tab/app/index.js

@@ -66,7 +66,8 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
         .withPlatformName(init.platform?.name)
         .withPlatformName(baseEnvironment.urlParams.get('platform'))
         .withFeatureState('customizerDrawer', init.settings?.customizerDrawer)
-        .withFeatureState('adBlocking', init.settings?.adBlocking);
+        .withFeatureState('adBlocking', init.settings?.adBlocking)
+        .withFeatureState('newTabPageRebranding', init.settings?.newTabPageRebranding);
 
     if (!window.__playwright_01) {
         console.log('environment:', environment);
@@ -175,6 +176,7 @@ function installGlobalSideEffects(environment, settings) {
     document.body.dataset.platformName = settings.platform.name;
     document.body.dataset.display = environment.display;
     document.body.dataset.animation = environment.urlParams.get('animation') || '';
+    document.body.dataset.rebrand = settings.newTabPageRebranding.state === 'enabled' ? 'true' : 'false';
 }
 
 /**

special-pages/pages/new-tab/app/mock-transport.js

@@ -614,6 +614,10 @@ export function initialSetup(url) {
         settings.adBlocking = { state: 'enabled' };
     }
 
+    if (url.searchParams.get('rebrand') === 'enabled') {
+        settings.newTabPageRebranding = { state: 'enabled' };
+    }
+
     if (url.searchParams.has('tabs')) {
         initial.tabs = { tabId: '01', tabIds: ['01'] };
     }

special-pages/pages/new-tab/app/settings.js

@@ -12,15 +12,18 @@ export class Settings {
      * @param {{name: 'macos' | 'windows'}} [params.platform]
      * @param {{state: 'enabled' | 'disabled', autoOpen: boolean}} [params.customizerDrawer]
      * @param {{state: 'enabled' | 'disabled'}} [params.adBlocking]
+     * @param {{state: 'enabled' | 'disabled'}} [params.newTabPageRebranding]
      */
     constructor({
         platform = { name: detectPlatform() },
         customizerDrawer = { state: 'enabled', autoOpen: false },
         adBlocking = { state: 'disabled' },
+        newTabPageRebranding = { state: 'disabled' },
     }) {
         this.platform = platform;
         this.customizerDrawer = customizerDrawer;
         this.adBlocking = adBlocking;
+        this.newTabPageRebranding = newTabPageRebranding;
     }
 
     withPlatformName(name) {
@@ -43,7 +46,7 @@ export class Settings {
     withFeatureState(named, settings) {
         if (!settings) return this;
         /** @type {(keyof import("../types/new-tab.js").NewTabPageSettings)[]} */
-        const valid = ['customizerDrawer', 'adBlocking'];
+        const valid = ['customizerDrawer', 'adBlocking', 'newTabPageRebranding'];
         if (!valid.includes(named)) {
             console.warn(`Excluding invalid feature key ${named}`);
             return this;

special-pages/pages/new-tab/app/settings.provider.js

@@ -35,3 +35,11 @@ export function useAdBlocking() {
     const settings = useContext(SettingsContext).settings;
     return settings.adBlocking.state === 'enabled';
 }
+
+/**
+ * @returns {boolean}
+ */
+export function useNewTabPageRebranding() {
+    const settings = useContext(SettingsContext).settings;
+    return settings.newTabPageRebranding.state === 'enabled';
+}

special-pages/pages/new-tab/integration-tests/new-tab.spec.js

@@ -103,6 +103,20 @@ test.describe('newtab widgets', () => {
             },
         });
     });
+    test('defaults rebrand data attribute to false', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        await ntp.reducedMotion();
+        await ntp.openPage();
+
+        await expect(page.locator('body')).toHaveAttribute('data-rebrand', 'false');
+    });
+    test('sets rebrand data attribute from mock url param', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { rebrand: 'enabled' } });
+
+        await expect(page.locator('body')).toHaveAttribute('data-rebrand', 'true');
+    });
     test.describe('default background colors', () => {
         test('default background light', async ({ page }, workerInfo) => {
             const ntp = NewtabPage.create(page, workerInfo);

special-pages/pages/new-tab/messages/types/settings.json

@@ -26,6 +26,16 @@
           "enum": ["enabled", "disabled"]
         }
       }
+    },
+    "newTabPageRebranding": {
+      "type": "object",
+      "required": ["state"],
+      "properties": {
+        "state": {
+          "type": "string",
+          "enum": ["enabled", "disabled"]
+        }
+      }
     }
   }
 }

special-pages/pages/new-tab/readme.md

@@ -114,6 +114,14 @@
    - `true` - Opens customizer automatically
    - `false` - Does not open customizer automatically
 
+ ### New Tab Page Rebrand
+ - **Purpose**: Controls the New Tab Page rebrand feature flag in the mock transport (sets `body[data-rebrand]`)
+ - **Parameter**: `rebrand`
+ - **Example**: `?rebrand=enabled`
+ - **Options**:
+   - `enabled` - Turns on New Tab Page rebranding
+   - `disabled` - Turns off New Tab Page rebranding (default)
+
  ### RMF (Remote Messaging Framework)
  - **Purpose**: Controls Remote Messaging Framework dialog
  - **Parameter**: `rmf`

special-pages/pages/new-tab/types/new-tab.ts

@@ -1274,6 +1274,9 @@ export interface NewTabPageSettings {
   adBlocking?: {
     state: "enabled" | "disabled";
   };
+  newTabPageRebranding?: {
+    state: "enabled" | "disabled";
+  };
 }
 export interface CustomizerData {
   background: BackgroundVariant;