ntp: support default background colors (#1596)

* ntp: support default background colors

* hash

* bring example into docs

* screenshot tag

* support history view also

* Hash

---------

Co-authored-by: Marcos Gurgel <[email protected]>

Author: shakyShane

injected/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@canvas/image-data": "^1.0.0",
-    "@duckduckgo/privacy-configuration": "github:duckduckgo/privacy-configuration#main",
+    "@duckduckgo/privacy-configuration": "github:duckduckgo/privacy-configuration#ca6101bb972756a87a8960ffb3029f603052ea9d",
     "@fingerprintjs/fingerprintjs": "^4.5.1",
     "@types/chrome": "^0.0.308",
     "@types/jasmine": "^5.1.7",

package-lock.json

@@ -9,7 +9,7 @@ title: History View
 ### `initialSetup`
 {@link "History Messages".InitialSetupRequest}
 
-Configures initial history system settings.
+Configure initial history system settings.
 
 **Types:**
 - Response: {@link "History Messages".InitialSetupResponse}
@@ -24,6 +24,22 @@ Configures initial history system settings.
 }
 ```
 
+With {@link "History Messages".DefaultStyles} overrides 
+
+```json
+{
+  "locale": "en",
+  "env": "production",
+  "platform": {
+    "name": "macos"
+  },
+  "defaultStyles": {
+    "lightBackgroundColor": "#E9EBEC",
+    "darkBackgroundColor": "#27282A"
+  }
+}
+```
+
 ### `getRanges`
 {@link "History Messages".GetRangesRequest}
 

special-pages/pages/history/app/history.md

@@ -59,6 +59,9 @@ export async function init(root, messaging, baseEnvironment) {
         messaging.reportInitException({ message });
     };
 
+    // apply default styles
+    applyDefaultStyles(init.defaultStyles);
+
     const strings = await getStrings(environment);
     const service = new HistoryService(messaging);
     const query = paramsToQuery(environment.urlParams, 'initial');
@@ -108,6 +111,20 @@ export async function init(root, messaging, baseEnvironment) {
     }
 }
 
+/**
+ * This will apply default background colors as early as possible.
+ *
+ * @param {import("../types/history.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/history.js').HistoryQuery} query
  * @param {HistoryService} service

special-pages/pages/history/app/index.js

@@ -157,6 +157,7 @@ export function mockTransport() {
                         platform: { name: 'integration' },
                         env: 'development',
                         locale: 'en',
+                        defaultStyles: getDefaultStyles(),
                     };
 
                     return Promise.resolve(initial);
@@ -195,6 +196,20 @@ export function mockTransport() {
     });
 }
 
+/**
+ * @returns {import("../../types/history").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;
+}
+
 async function withLatency(value) {
     let queryLatency = 50;
     const fromParam = url.searchParams.get('query.latency');

special-pages/pages/history/app/mocks/mock-transport.js

@@ -588,6 +588,19 @@ export class HistoryTestPage {
     async selectedRowCountIs(number) {
         await expect(this.main().locator('[aria-selected="true"]')).toHaveCount(number);
     }
+
+    /**
+     * @param {object} params
+     * @param {string} params.hex
+     * @returns {Promise<void>}
+     */
+    async hasBackgroundColor({ hex }) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        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('[data-layout-mode="normal"]')).toHaveCSS('background-color', rgb, { timeout: 50 });
+    }
 }
 
 /**

special-pages/pages/history/integration-tests/history.page.js

@@ -235,4 +235,32 @@ test.describe('history', () => {
         await hp.submitSearchForm();
         await hp.didMakeNthQuery({ nth: 2, query: { term: 'café' } });
     });
+    test.describe('default background colors', () => {
+        test('default background light', async ({ page }, workerInfo) => {
+            const hp = HistoryTestPage.create(page, workerInfo).withEntries(0);
+            await hp.openPage();
+            await hp.hasEmptyState();
+            await hp.hasBackgroundColor({ hex: '#fafafa' });
+        });
+        test('default background dark', async ({ page }, workerInfo) => {
+            const hp = HistoryTestPage.create(page, workerInfo).withEntries(0);
+            await hp.darkMode();
+            await hp.openPage();
+            await hp.hasEmptyState();
+            await hp.hasBackgroundColor({ hex: '#333333' });
+        });
+        test('with overrides from initial setup (light)', async ({ page }, workerInfo) => {
+            const hp = HistoryTestPage.create(page, workerInfo).withEntries(0);
+            await hp.openPage({ additional: { defaultStyles: 'visual-refresh' } });
+            await hp.hasEmptyState();
+            await hp.hasBackgroundColor({ hex: '#E9EBEC' });
+        });
+        test('with overrides from initial setup (dark)', async ({ page }, workerInfo) => {
+            const hp = HistoryTestPage.create(page, workerInfo).withEntries(0);
+            await hp.darkMode();
+            await hp.openPage({ additional: { defaultStyles: 'visual-refresh' } });
+            await hp.hasEmptyState();
+            await hp.hasBackgroundColor({ hex: '#27282A' });
+        });
+    });
 });

special-pages/pages/history/integration-tests/history.spec.js

@@ -19,6 +19,16 @@
           "enum": ["macos", "windows", "android", "ios", "integration"]
         }
       }
+    },
+    "defaultStyles": {
+      "oneOf": [
+        {
+          "type": "null"
+        },
+        {
+          "$ref": "types/default-styles.json"
+        }
+      ]
     }
   }
 }

special-pages/pages/history/messages/initialSetup.response.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "Default Styles",
+  "properties": {
+    "darkBackgroundColor": {
+      "description": "Optional default dark background color. Any HEX value is permitted",
+      "type": "string",
+      "examples": [
+        "#000000",
+        "#333333"
+      ]
+    },
+    "lightBackgroundColor": {
+      "description": "Optional default light background color. Any HEX value is permitted",
+      "type": "string",
+      "examples": [
+        "#FFFFFF",
+        "#CCCCCC"
+      ]
+    }
+  }
+}

special-pages/pages/history/messages/types/default-styles.json

@@ -1,7 +1,4 @@
 :root {
-    --default-light-bg: var(--color-gray-0);
-    --default-dark-bg: var(--color-gray-85);
-
     /* H1 title */
     --title-font-size: 20px;
     --title-font-weight: 600;
@@ -23,6 +20,11 @@
     --title-3-em-line-height: 20px;
 }
 
+body {
+    --default-light-background-color: var(--color-gray-0);
+    --default-dark-background-color: var(--color-gray-85);
+}
+
 /* This comes from the application settings */
 :root:has([data-platform="windows"]) {
     /* H1 title */
@@ -47,7 +49,7 @@
 }
 
 [data-theme=light] {
-    --history-background-color: var(--default-light-bg);
+    --history-background-color: var(--default-light-background-color);
     --history-surface-background-color: var(--color-white-at-30);
     --history-surface-border-color: var(--color-black-at-9);
     --history-scrollbar-controls-color: var(--color-black-at-18);
@@ -57,7 +59,7 @@
 }
 
 [data-theme=dark] {
-    --history-background-color: var(--default-dark-bg);
+    --history-background-color: var(--default-dark-background-color);
     --history-surface-background-color: var(--color-black-at-18);
     --history-surface-border-color: var(--color-white-at-12);
     --history-scrollbar-controls-color: var(--color-white-at-18);

special-pages/pages/history/styles/history-theme.css

@@ -196,6 +196,17 @@ export interface InitialSetupResponse {
   platform: {
     name: "macos" | "windows" | "android" | "ios" | "integration";
   };
+  defaultStyles?: null | DefaultStyles;
+}
+export interface DefaultStyles {
+  /**
+   * Optional default dark background color. Any HEX value is permitted
+   */
+  darkBackgroundColor?: string;
+  /**
+   * Optional default light background color. Any HEX value is permitted
+   */
+  lightBackgroundColor?: string;
 }
 /**
  * Generated from @see "../messages/query.request.json"

special-pages/pages/history/types/history.ts

@@ -80,10 +80,11 @@ export function BackgroundConsumer({ browser }) {
         }
         if (background.kind === 'userImage') {
             const isDark = background.value.colorScheme === 'dark';
-            nextBodyBackground = isDark ? 'var(--default-dark-bg)' : 'var(--default-light-bg)';
+            nextBodyBackground = isDark ? 'var(--default-dark-background-color)' : 'var(--default-light-background-color)';
         }
         if (background.kind === 'default') {
-            nextBodyBackground = browser.value === 'dark' ? 'var(--default-dark-bg)' : 'var(--default-light-bg)';
+            nextBodyBackground =
+                browser.value === 'dark' ? 'var(--default-dark-background-color)' : 'var(--default-light-background-color)';
         }
 
         document.body.style.setProperty('background-color', nextBodyBackground);

special-pages/pages/new-tab/app/components/BackgroundProvider.js

@@ -317,7 +317,7 @@ function useVisibleRows(rows, rowHeight, safeAreaRef, expansion) {
     }, [rows.length]);
 
     useEffect(() => {
-        if (!contentTubeRef.current) return console.warn('cannot find content tube');
+        if (!contentTubeRef.current) return;
         let lastHeight;
         let debounceTimer;
         const resizer = new ResizeObserver((entries) => {

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -77,6 +77,9 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
     // install global side effects that are not specific to any widget
     installGlobalSideEffects(environment, settings);
 
+    // apply default styles
+    applyDefaultStyles(init.defaultStyles);
+
     // return early if we're in the 'components' view.
     if (environment.display === 'components') {
         return renderComponents(root, environment, settings, strings);
@@ -162,6 +165,20 @@ 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/index.js

@@ -503,6 +503,7 @@ export function mockTransport() {
                         env: 'development',
                         locale: 'en',
                         updateNotification,
+                        defaultStyles: getDefaultStyles(),
                     };
 
                     const feed = url.searchParams.get('feed') || 'stats';
@@ -539,6 +540,20 @@ 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/app/mock-transport.js

@@ -16,13 +16,14 @@ children:
 ### `initialSetup`
 - {@link "NewTab Messages".InitialSetupRequest}
 - Returns {@link "NewTab Messages".InitialSetupResponse}
-- See the `initialSetupResponse` section of [example of initial data](../messages/examples/widgets.js)
 - See also
    - [Widget Config](./widget-list/widget-config.md) for the initial page widgets
    - [Update Notification](./update-notification/update-notification.md) for the optional data
    - [Customizer Drawer Feature Flags](./customizer/customizer.md) for optional feature flags like the customizer drawer
    about release notes (windows only).
 
+{@includeCode ../messages/examples/widgets.js#initialSetupResponse}
+
 ## Notifications
 
 ### `contextMenu`