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);