ntp: support default background colors

Author: shakyShane

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

@@ -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/favorites/components/Favorites.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/index.js

@@ -76,6 +76,7 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
 
     // install global side effects that are not specific to any widget
     installGlobalSideEffects(environment, settings);
+    applyDefaultStyles(init.defaultStyles);
 
     // return early if we're in the 'components' view.
     if (environment.display === 'components') {
@@ -162,6 +163,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/mock-transport.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/styles/ntp-theme.css

@@ -1,6 +1,4 @@
 :root {
-    --default-light-bg: var(--color-gray-0);
-    --default-dark-bg: var(--color-gray-85);
     --ntp-gap: 2rem;
     --ntp-drawer-width: calc(224 * var(--px-in-rem));
     --ntp-drawer-scroll-width: 12px;
@@ -39,8 +37,13 @@
     --focus-ring-thin: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 1px  var(--color-white);
 }
 
+body {
+    --default-light-background-color: var(--color-gray-0);
+    --default-dark-background-color: var(--color-gray-85);
+}
+
+
 [data-theme=light] {
-    --ntp-background-color: var(--default-light-bg);
     --ntp-surface-background-color: var(--color-white-at-30);
     --ntp-surfaces-panel-background-color: white;
     --ntp-surface-border-color: var(--color-black-at-9);
@@ -55,7 +58,6 @@
 }
 
 [data-theme=dark] {
-    --ntp-background-color: var(--default-dark-bg);
     --ntp-surface-background-color: var(--color-black-at-18);
     --ntp-surfaces-panel-background-color: #222222;
     --ntp-surface-border-color: var(--color-white-at-12);
@@ -66,7 +68,7 @@
     --ntp-focus-outline-color: white;
     --focus-ring: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 3px var(--color-white);
     --focus-ring-thin: 0px 0px 0px 1px  var(--color-white), 0px 0px 0px 1px var(--ntp-focus-outline-color);
-    --focus-ring-primary: 0px 0px 0px 1px var(--default-dark-bg), 0px 0px 0px 3px var(--ntp-color-primary);
+    --focus-ring-primary: 0px 0px 0px 1px var(--default-dark-background-color), 0px 0px 0px 3px var(--ntp-color-primary);
 }
 
 /* This comes from the application settings */

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

@@ -1,5 +1,6 @@
 import { Mocks } from '../../../shared/mocks.js';
 import { perPlatform } from 'injected/integration-test/type-helpers.mjs';
+import { expect } from '@playwright/test';
 
 /**
  * @typedef {import('injected/integration-test/type-helpers.mjs').Build} Build
@@ -150,4 +151,21 @@ export class NewtabPage {
     async darkMode() {
         await this.page.emulateMedia({ colorScheme: 'dark' });
     }
+
+    async waitForCustomizer() {
+        await this.page.getByRole('button', { name: 'Customize' }).waitFor();
+    }
+
+    /**
+     * @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('body')).toHaveCSS('background-color', rgb, { timeout: 50 });
+    }
 }

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

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { NewtabPage } from './new-tab.page.js';
+import { ActivityPage } from '../app/activity/integration-tests/activity.page.js';
+import { CustomizerPage } from '../app/customizer/integration-tests/customizer.page.js';
+import { PrivacyStatsPage } from '../app/privacy-stats/integration-tests/privacy-stats.page.js';
+
+const maxDiffPixels = 20;
+
+test.describe('NTP screenshots', () => {
+    test.describe('feed = privacy stats', () => {
+        test.use({ viewport: { width: 1000, height: 600 } });
+        test('with dataset "few"', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const stats = new PrivacyStatsPage(page, ntp);
+            await ntp.reducedMotion();
+
+            // see privacy-stats.mocks.js
+            await ntp.openPage({ additional: { stats: 'few' } });
+
+            // make sure we're screenshotting when data is showing
+            await stats.hasRows(4);
+            await expect(page).toHaveScreenshot('stats-few.png', { maxDiffPixels });
+        });
+    });
+
+    test.describe('activity widget screenshots narrow', () => {
+        test.use({ viewport: { width: 800, height: 800 } });
+        test('default', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const ap = new ActivityPage(page, ntp);
+            await ntp.reducedMotion();
+            await ntp.openPage({ additional: { feed: 'activity' } });
+            await ap.didRender();
+            await expect(page).toHaveScreenshot('narrow-default.png', { maxDiffPixels });
+        });
+        test('empty', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const ap = new ActivityPage(page, ntp);
+            await ntp.reducedMotion();
+            await ntp.openPage({ additional: { feed: 'activity', activity: 'empty' } });
+            await ap.didRender();
+            await expect(page).toHaveScreenshot('narrow-empty.png', { maxDiffPixels });
+        });
+    });
+
+    test.describe('activity widget screenshots wide', () => {
+        test.use({ viewport: { width: 1000, height: 800 } });
+        test('default', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const ap = new ActivityPage(page, ntp);
+            await ntp.reducedMotion();
+            await ntp.openPage({ additional: { feed: 'activity' } });
+            await ap.didRender();
+            await expect(page).toHaveScreenshot('wide-default.png', { maxDiffPixels });
+        });
+        test('empty', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const ap = new ActivityPage(page, ntp);
+            await ntp.reducedMotion();
+            await ntp.openPage({ additional: { feed: 'activity', activity: 'empty' } });
+            await ap.didRender();
+            await expect(page).toHaveScreenshot('wide-empty.png', { maxDiffPixels });
+        });
+        test('with drawer', async ({ page }, workerInfo) => {
+            const ntp = NewtabPage.create(page, workerInfo);
+            const ap = new ActivityPage(page, ntp);
+            const customizer = new CustomizerPage(ntp);
+            await ntp.reducedMotion();
+            await ntp.openPage({ additional: { feed: 'activity', customizerDrawer: 'enabled' } });
+            await ap.didRender();
+            await customizer.opensCustomizer();
+            await expect(page).toHaveScreenshot('wide-default-drawer.png', { maxDiffPixels });
+        });
+    });
+});