Merge 1772d91 into d29cf78

Author: shakyShane

special-pages/pages/new-tab/app/customizer/CustomizerProvider.js

@@ -2,6 +2,7 @@ import { createContext, h } from 'preact';
 import { useCallback } from 'preact/hooks';
 import { signal, useSignal, useSignalEffect } from '@preact/signals';
 import { useThemes } from './themes.js';
+import { applyDefaultStyles } from './utils.js';
 
 /**
  * @typedef {import('../../types/new-tab.js').CustomizerData} CustomizerData
@@ -84,6 +85,18 @@ export function CustomizerProvider({ service, initialData, children }) {
         };
     });
 
+    useSignalEffect(() => {
+        const unsub = service.onTheme((evt) => {
+            if (evt.source === 'subscription') {
+                applyDefaultStyles(evt.data.defaultStyles);
+            }
+        });
+
+        return () => {
+            unsub();
+        };
+    });
+
     /** @type {(bg: BackgroundData) => void} */
     const select = useCallback(
         (bg) => {

special-pages/pages/new-tab/app/customizer/customizer.md

@@ -34,7 +34,11 @@ title: Customizer
     "userImages": [],
     "userColor": null,
     "theme": "dark",
-    "background": { "kind": "default" }
+    "background": { "kind": "default" },
+    "defaultStyles": {
+      "lightBackgroundColor": "#E9EBEC",
+      "darkBackgroundColor": "#27282A"
+    }
   }
 }
 ```
@@ -52,7 +56,11 @@ title: Customizer
     "userImages": [],
     "userColor": null,
     "theme": "dark",
-    "background": { "kind": "default" }
+    "background": { "kind": "default" },
+    "defaultStyles": {
+      "lightBackgroundColor": "#E9EBEC",
+      "darkBackgroundColor": "#27282A"
+    }
   }
 }
 ```
@@ -129,6 +137,16 @@ title: Customizer
   "theme": "system"
 } 
 ```
+- Or, with optional `defaultStyles` example:
+```json
+{
+  "theme": "system",
+  "defaultStyles": {
+    "lightBackgroundColor": "#E9EBEC",
+    "darkBackgroundColor": "#27282A"
+  }
+}
+```
 
 ### `customizer_autoOpen`
 - {@link "NewTab Messages".CustomizerAutoOpenSubscription}.

special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js

@@ -190,6 +190,17 @@ export class CustomizerPage {
         await this.ntp.mocks.simulateSubscriptionMessage(named.subscription('customizer_onThemeUpdate'), payload);
     }
 
+    /**
+     * @param {'light' | 'dark'} theme
+     * @param {import("../../../types/new-tab.js").DefaultStyles} defaultStyles
+     */
+    async acceptsThemeUpdateWithDefaults(theme, defaultStyles) {
+        /** @type {import('../../../types/new-tab.js').ThemeData} */
+        const payload = { theme, defaultStyles };
+        /** @type {SubscriptionEventNames} */
+        await this.ntp.mocks.simulateSubscriptionMessage(named.subscription('customizer_onThemeUpdate'), payload);
+    }
+
     /**
      * @param {string} color
      */

special-pages/pages/new-tab/app/customizer/mocks.js

@@ -93,6 +93,20 @@ export function customizerMockTransport() {
     });
 }
 
+/**
+ * @returns {import("../../types/new-tab.js").DefaultStyles | null}
+ */
+function getDefaultStyles() {
+    if (url.searchParams.get('defaultStyles') === 'visual-refresh') {
+        // https://app.asana.com/0/1201141132935289/1209349703167198/f
+        return {
+            lightBackgroundColor: '#E9EBEC',
+            darkBackgroundColor: '#27282A',
+        };
+    }
+    return null;
+}
+
 /** @type {()=>import('../../types/new-tab').CustomizerData} */
 export function customizerData() {
     /** @type {import('../../types/new-tab').CustomizerData} */
@@ -101,6 +115,7 @@ export function customizerData() {
         userColor: null,
         theme: 'system',
         background: { kind: 'default' },
+        defaultStyles: getDefaultStyles(),
     };
 
     if (url.searchParams.has('background')) {

special-pages/pages/new-tab/app/customizer/utils.js

@@ -20,3 +20,17 @@ export function detectThemeFromHex(backgroundColor) {
     // 128 is the middle value (255/2)
     return luminance < 128 ? 'dark' : 'light';
 }
+
+/**
+ * This will apply default background colors as early as possible.
+ *
+ * @param {import("../../types/new-tab.ts").DefaultStyles | null | undefined} defaultStyles
+ */
+export function applyDefaultStyles(defaultStyles) {
+    if (defaultStyles?.lightBackgroundColor) {
+        document.body.style.setProperty('--default-light-background-color', defaultStyles.lightBackgroundColor);
+    }
+    if (defaultStyles?.darkBackgroundColor) {
+        document.body.style.setProperty('--default-dark-background-color', defaultStyles.darkBackgroundColor);
+    }
+}

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

@@ -15,6 +15,7 @@ import { CustomizerProvider } from './customizer/CustomizerProvider.js';
 import { CustomizerService } from './customizer/customizer.service.js';
 import { InlineErrorBoundary } from './InlineErrorBoundary.js';
 import { DocumentVisibilityProvider } from '../../../shared/components/DocumentVisibility.js';
+import { applyDefaultStyles } from './customizer/utils.js';
 
 /**
  * @import {Telemetry} from "./telemetry/telemetry.js"
@@ -79,7 +80,7 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
     installGlobalSideEffects(environment, settings);
 
     // apply default styles
-    applyDefaultStyles(init.defaultStyles);
+    applyDefaultStyles(init.customizer?.defaultStyles);
 
     // return early if we're in the 'components' view.
     if (environment.display === 'components') {
@@ -166,20 +167,6 @@ function installGlobalSideEffects(environment, settings) {
     document.body.dataset.animation = environment.urlParams.get('animation') || '';
 }
 
-/**
- * This will apply default background colors as early as possible.
- *
- * @param {import("../types/new-tab.ts").DefaultStyles | null | undefined} defaultStyles
- */
-function applyDefaultStyles(defaultStyles) {
-    if (defaultStyles?.lightBackgroundColor) {
-        document.body.style.setProperty('--default-light-background-color', defaultStyles.lightBackgroundColor);
-    }
-    if (defaultStyles?.darkBackgroundColor) {
-        document.body.style.setProperty('--default-dark-background-color', defaultStyles.darkBackgroundColor);
-    }
-}
-
 /**
  *
  * @param {import('../types/new-tab.js').InitialSetupResponse['widgets']} widgets

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

@@ -503,7 +503,6 @@ export function mockTransport() {
                         env: 'development',
                         locale: 'en',
                         updateNotification,
-                        defaultStyles: getDefaultStyles(),
                     };
 
                     const feed = url.searchParams.get('feed') || 'stats';
@@ -545,20 +544,6 @@ export function mockTransport() {
     });
 }
 
-/**
- * @returns {import("../types/new-tab.js").DefaultStyles | null}
- */
-function getDefaultStyles() {
-    if (url.searchParams.get('defaultStyles') === 'visual-refresh') {
-        // https://app.asana.com/0/1201141132935289/1209349703167198/f
-        return {
-            lightBackgroundColor: '#E9EBEC',
-            darkBackgroundColor: '#27282A',
-        };
-    }
-    return null;
-}
-
 /**
  * @template {{id: string}} T
  * @param {T[]} array

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

@@ -166,6 +166,6 @@ export class NewtabPage {
         const g = parseInt(hex.slice(3, 5), 16);
         const b = parseInt(hex.slice(5, 7), 16);
         const rgb = `rgb(${[r, g, b].join(', ')})`;
-        await expect(this.page.locator('body')).toHaveCSS('background-color', rgb, { timeout: 50 });
+        await expect(this.page.locator('body')).toHaveCSS('background-color', rgb, { timeout: 1000 });
     }
 }

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

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { NewtabPage } from './new-tab.page.js';
+import { CustomizerPage } from '../app/customizer/integration-tests/customizer.page.js';
 
 test.describe('newtab widgets', () => {
     test('widget config single click', async ({ page }, workerInfo) => {
@@ -114,17 +115,37 @@ test.describe('newtab widgets', () => {
         test('with overrides from initial setup (light)', async ({ page }, workerInfo) => {
             const ntp = NewtabPage.create(page, workerInfo);
             await ntp.reducedMotion();
-            await ntp.openPage({ additional: { defaultStyles: 'visual-refresh' } });
+            await ntp.openPage({ additional: { defaultStyles: 'visual-refresh', customizerDrawer: 'enabled' } });
             await ntp.waitForCustomizer();
+            await page.pause();
             await ntp.hasBackgroundColor({ hex: '#E9EBEC' });
         });
         test('with overrides from initial setup (dark)', async ({ page }, workerInfo) => {
             const ntp = NewtabPage.create(page, workerInfo);
             await ntp.reducedMotion();
             await ntp.darkMode();
-            await ntp.openPage({ additional: { defaultStyles: 'visual-refresh' } });
+            await ntp.openPage({ additional: { defaultStyles: 'visual-refresh', customizerDrawer: 'enabled' } });
             await ntp.waitForCustomizer();
             await ntp.hasBackgroundColor({ hex: '#27282A' });
         });
+        test('with pushed updated theme value (light)', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const cp = new CustomizerPage(ntp);
+            await ntp.reducedMotion();
+            await ntp.openPage({});
+            await ntp.waitForCustomizer();
+            await cp.acceptsThemeUpdateWithDefaults('light', { darkBackgroundColor: '#000000', lightBackgroundColor: '#ffffff' });
+            await ntp.hasBackgroundColor({ hex: '#ffffff' });
+        });
+        test('with pushed updated theme value (dark)', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const cp = new CustomizerPage(ntp);
+            await ntp.reducedMotion();
+            await ntp.darkMode();
+            await ntp.openPage({});
+            await ntp.waitForCustomizer();
+            await cp.acceptsThemeUpdateWithDefaults('dark', { darkBackgroundColor: '#000000', lightBackgroundColor: '#ffffff' });
+            await ntp.hasBackgroundColor({ hex: '#000000' });
+        });
     });
 });

special-pages/pages/new-tab/messages/examples/widgets.js

@@ -48,10 +48,15 @@ const initialSetupResponse = {
     locale: 'en',
     platform: { name: 'windows' },
     updateNotification: { content: null },
-    customizer: { theme: 'system', userImages: [], userColor: null, background: { kind: 'default' } },
-    defaultStyles: {
-        lightBackgroundColor: '#E9EBEC',
-        darkBackgroundColor: '#27282A',
+    customizer: {
+        theme: 'system',
+        userImages: [],
+        userColor: null,
+        background: { kind: 'default' },
+        defaultStyles: {
+            lightBackgroundColor: '#E9EBEC',
+            darkBackgroundColor: '#27282A',
+        },
     },
 };
 

special-pages/pages/new-tab/messages/initialSetup.response.json

@@ -29,16 +29,6 @@
         }
       }
     },
-    "defaultStyles": {
-      "oneOf": [
-        {
-          "type": "null"
-        },
-        {
-          "$ref": "types/default-styles.json"
-        }
-      ]
-    },
     "customizer": {
       "$ref": "./types/customizer-data.json"
     },

special-pages/pages/new-tab/messages/types/customizer-data.json

@@ -19,6 +19,16 @@
     },
     "userColor": {
       "$ref": "./user-color-data.json#/definitions/userColor"
+    },
+    "defaultStyles": {
+      "oneOf": [
+        {
+          "type": "null"
+        },
+        {
+          "$ref": "./default-styles.json"
+        }
+      ]
     }
   }
 }

special-pages/pages/new-tab/messages/types/theme-data.json

@@ -7,6 +7,16 @@
   "properties": {
     "theme": {
       "$ref": "./browser-theme.json"
+    },
+    "defaultStyles": {
+      "oneOf": [
+        {
+          "type": "null"
+        },
+        {
+          "$ref": "./default-styles.json"
+        }
+      ]
     }
   }
 }

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

@@ -731,7 +731,6 @@ export interface InitialSetupResponse {
   platform: {
     name: "macos" | "windows" | "android" | "ios" | "integration";
   };
-  defaultStyles?: null | DefaultStyles;
   customizer?: CustomizerData;
   updateNotification: null | UpdateNotificationData;
 }
@@ -753,6 +752,13 @@ export interface NewTabPageSettings {
     state: "enabled" | "disabled";
   };
 }
+export interface CustomizerData {
+  background: BackgroundVariant;
+  theme: BrowserTheme;
+  userImages: UserImage[];
+  userColor: null | HexValueBackground;
+  defaultStyles?: null | DefaultStyles;
+}
 export interface DefaultStyles {
   /**
    * Optional default dark background color. Any HEX value is permitted
@@ -763,12 +769,6 @@ export interface DefaultStyles {
    */
   lightBackgroundColor?: string;
 }
-export interface CustomizerData {
-  background: BackgroundVariant;
-  theme: BrowserTheme;
-  userImages: UserImage[];
-  userColor: null | HexValueBackground;
-}
 export interface UpdateNotificationData {
   content: null | UpdateNotification;
 }
@@ -936,6 +936,7 @@ export interface CustomizerOnThemeUpdateSubscription {
 }
 export interface ThemeData {
   theme: BrowserTheme;
+  defaultStyles?: null | DefaultStyles;
 }
 /**
  * Generated from @see "../messages/favorites_onConfigUpdate.subscribe.json"