Skip to content

Commit 00daba2

Browse files
shakyShaneshakyShane
authored
ntp: reactive updates for theme values (#1635)
1 parent d29cf78 commit 00daba2

File tree

14 files changed

+136
-56
lines changed

14 files changed

+136
-56
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createContext, h } from 'preact';
22
import { useCallback } from 'preact/hooks';
33
import { signal, useSignal, useSignalEffect } from '@preact/signals';
44
import { useThemes } from './themes.js';
5+
import { applyDefaultStyles } from './utils.js';
56

67
/**
78
* @typedef {import('../../types/new-tab.js').CustomizerData} CustomizerData
@@ -84,6 +85,18 @@ export function CustomizerProvider({ service, initialData, children }) {
8485
};
8586
});
8687

88+
useSignalEffect(() => {
89+
const unsub = service.onTheme((evt) => {
90+
if (evt.source === 'subscription') {
91+
applyDefaultStyles(evt.data.defaultStyles);
92+
}
93+
});
94+
95+
return () => {
96+
unsub();
97+
};
98+
});
99+
87100
/** @type {(bg: BackgroundData) => void} */
88101
const select = useCallback(
89102
(bg) => {

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ title: Customizer
3434
"userImages": [],
3535
"userColor": null,
3636
"theme": "dark",
37-
"background": { "kind": "default" }
37+
"background": { "kind": "default" },
38+
"defaultStyles": {
39+
"lightBackgroundColor": "#E9EBEC",
40+
"darkBackgroundColor": "#27282A"
41+
}
3842
}
3943
}
4044
```
@@ -52,7 +56,11 @@ title: Customizer
5256
"userImages": [],
5357
"userColor": null,
5458
"theme": "dark",
55-
"background": { "kind": "default" }
59+
"background": { "kind": "default" },
60+
"defaultStyles": {
61+
"lightBackgroundColor": "#E9EBEC",
62+
"darkBackgroundColor": "#27282A"
63+
}
5664
}
5765
}
5866
```
@@ -129,6 +137,16 @@ title: Customizer
129137
"theme": "system"
130138
}
131139
```
140+
- Or, with optional `defaultStyles` example:
141+
```json
142+
{
143+
"theme": "system",
144+
"defaultStyles": {
145+
"lightBackgroundColor": "#E9EBEC",
146+
"darkBackgroundColor": "#27282A"
147+
}
148+
}
149+
```
132150

133151
### `customizer_autoOpen`
134152
- {@link "NewTab Messages".CustomizerAutoOpenSubscription}.

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,17 @@ export class CustomizerPage {
190190
await this.ntp.mocks.simulateSubscriptionMessage(named.subscription('customizer_onThemeUpdate'), payload);
191191
}
192192

193+
/**
194+
* @param {'light' | 'dark'} theme
195+
* @param {import("../../../types/new-tab.js").DefaultStyles} defaultStyles
196+
*/
197+
async acceptsThemeUpdateWithDefaults(theme, defaultStyles) {
198+
/** @type {import('../../../types/new-tab.js').ThemeData} */
199+
const payload = { theme, defaultStyles };
200+
/** @type {SubscriptionEventNames} */
201+
await this.ntp.mocks.simulateSubscriptionMessage(named.subscription('customizer_onThemeUpdate'), payload);
202+
}
203+
193204
/**
194205
* @param {string} color
195206
*/

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,20 @@ export function customizerMockTransport() {
9393
});
9494
}
9595

96+
/**
97+
* @returns {import("../../types/new-tab.js").DefaultStyles | null}
98+
*/
99+
function getDefaultStyles() {
100+
if (url.searchParams.get('defaultStyles') === 'visual-refresh') {
101+
// https://app.asana.com/0/1201141132935289/1209349703167198/f
102+
return {
103+
lightBackgroundColor: '#E9EBEC',
104+
darkBackgroundColor: '#27282A',
105+
};
106+
}
107+
return null;
108+
}
109+
96110
/** @type {()=>import('../../types/new-tab').CustomizerData} */
97111
export function customizerData() {
98112
/** @type {import('../../types/new-tab').CustomizerData} */
@@ -101,6 +115,7 @@ export function customizerData() {
101115
userColor: null,
102116
theme: 'system',
103117
background: { kind: 'default' },
118+
defaultStyles: getDefaultStyles(),
104119
};
105120

106121
if (url.searchParams.has('background')) {

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,17 @@ export function detectThemeFromHex(backgroundColor) {
2020
// 128 is the middle value (255/2)
2121
return luminance < 128 ? 'dark' : 'light';
2222
}
23+
24+
/**
25+
* This will apply default background colors as early as possible.
26+
*
27+
* @param {import("../../types/new-tab.ts").DefaultStyles | null | undefined} defaultStyles
28+
*/
29+
export function applyDefaultStyles(defaultStyles) {
30+
if (defaultStyles?.lightBackgroundColor) {
31+
document.body.style.setProperty('--default-light-background-color', defaultStyles.lightBackgroundColor);
32+
}
33+
if (defaultStyles?.darkBackgroundColor) {
34+
document.body.style.setProperty('--default-dark-background-color', defaultStyles.darkBackgroundColor);
35+
}
36+
}

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { CustomizerProvider } from './customizer/CustomizerProvider.js';
1515
import { CustomizerService } from './customizer/customizer.service.js';
1616
import { InlineErrorBoundary } from './InlineErrorBoundary.js';
1717
import { DocumentVisibilityProvider } from '../../../shared/components/DocumentVisibility.js';
18+
import { applyDefaultStyles } from './customizer/utils.js';
1819

1920
/**
2021
* @import {Telemetry} from "./telemetry/telemetry.js"
@@ -79,7 +80,7 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
7980
installGlobalSideEffects(environment, settings);
8081

8182
// apply default styles
82-
applyDefaultStyles(init.defaultStyles);
83+
applyDefaultStyles(init.customizer?.defaultStyles);
8384

8485
// return early if we're in the 'components' view.
8586
if (environment.display === 'components') {
@@ -166,20 +167,6 @@ function installGlobalSideEffects(environment, settings) {
166167
document.body.dataset.animation = environment.urlParams.get('animation') || '';
167168
}
168169

169-
/**
170-
* This will apply default background colors as early as possible.
171-
*
172-
* @param {import("../types/new-tab.ts").DefaultStyles | null | undefined} defaultStyles
173-
*/
174-
function applyDefaultStyles(defaultStyles) {
175-
if (defaultStyles?.lightBackgroundColor) {
176-
document.body.style.setProperty('--default-light-background-color', defaultStyles.lightBackgroundColor);
177-
}
178-
if (defaultStyles?.darkBackgroundColor) {
179-
document.body.style.setProperty('--default-dark-background-color', defaultStyles.darkBackgroundColor);
180-
}
181-
}
182-
183170
/**
184171
*
185172
* @param {import('../types/new-tab.js').InitialSetupResponse['widgets']} widgets

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,6 @@ export function mockTransport() {
503503
env: 'development',
504504
locale: 'en',
505505
updateNotification,
506-
defaultStyles: getDefaultStyles(),
507506
};
508507

509508
const feed = url.searchParams.get('feed') || 'stats';
@@ -545,20 +544,6 @@ export function mockTransport() {
545544
});
546545
}
547546

548-
/**
549-
* @returns {import("../types/new-tab.js").DefaultStyles | null}
550-
*/
551-
function getDefaultStyles() {
552-
if (url.searchParams.get('defaultStyles') === 'visual-refresh') {
553-
// https://app.asana.com/0/1201141132935289/1209349703167198/f
554-
return {
555-
lightBackgroundColor: '#E9EBEC',
556-
darkBackgroundColor: '#27282A',
557-
};
558-
}
559-
return null;
560-
}
561-
562547
/**
563548
* @template {{id: string}} T
564549
* @param {T[]} array

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,6 @@ export class NewtabPage {
166166
const g = parseInt(hex.slice(3, 5), 16);
167167
const b = parseInt(hex.slice(5, 7), 16);
168168
const rgb = `rgb(${[r, g, b].join(', ')})`;
169-
await expect(this.page.locator('body')).toHaveCSS('background-color', rgb, { timeout: 50 });
169+
await expect(this.page.locator('body')).toHaveCSS('background-color', rgb, { timeout: 1000 });
170170
}
171171
}

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

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { expect, test } from '@playwright/test';
22
import { NewtabPage } from './new-tab.page.js';
3+
import { CustomizerPage } from '../app/customizer/integration-tests/customizer.page.js';
34

45
test.describe('newtab widgets', () => {
56
test('widget config single click', async ({ page }, workerInfo) => {
@@ -114,17 +115,37 @@ test.describe('newtab widgets', () => {
114115
test('with overrides from initial setup (light)', async ({ page }, workerInfo) => {
115116
const ntp = NewtabPage.create(page, workerInfo);
116117
await ntp.reducedMotion();
117-
await ntp.openPage({ additional: { defaultStyles: 'visual-refresh' } });
118+
await ntp.openPage({ additional: { defaultStyles: 'visual-refresh', customizerDrawer: 'enabled' } });
118119
await ntp.waitForCustomizer();
120+
await page.pause();
119121
await ntp.hasBackgroundColor({ hex: '#E9EBEC' });
120122
});
121123
test('with overrides from initial setup (dark)', async ({ page }, workerInfo) => {
122124
const ntp = NewtabPage.create(page, workerInfo);
123125
await ntp.reducedMotion();
124126
await ntp.darkMode();
125-
await ntp.openPage({ additional: { defaultStyles: 'visual-refresh' } });
127+
await ntp.openPage({ additional: { defaultStyles: 'visual-refresh', customizerDrawer: 'enabled' } });
126128
await ntp.waitForCustomizer();
127129
await ntp.hasBackgroundColor({ hex: '#27282A' });
128130
});
131+
test('with pushed updated theme value (light)', async ({ page }, workerInfo) => {
132+
const ntp = NewtabPage.create(page, workerInfo);
133+
const cp = new CustomizerPage(ntp);
134+
await ntp.reducedMotion();
135+
await ntp.openPage({});
136+
await ntp.waitForCustomizer();
137+
await cp.acceptsThemeUpdateWithDefaults('light', { darkBackgroundColor: '#000000', lightBackgroundColor: '#ffffff' });
138+
await ntp.hasBackgroundColor({ hex: '#ffffff' });
139+
});
140+
test('with pushed updated theme value (dark)', async ({ page }, workerInfo) => {
141+
const ntp = NewtabPage.create(page, workerInfo);
142+
const cp = new CustomizerPage(ntp);
143+
await ntp.reducedMotion();
144+
await ntp.darkMode();
145+
await ntp.openPage({});
146+
await ntp.waitForCustomizer();
147+
await cp.acceptsThemeUpdateWithDefaults('dark', { darkBackgroundColor: '#000000', lightBackgroundColor: '#ffffff' });
148+
await ntp.hasBackgroundColor({ hex: '#000000' });
149+
});
129150
});
130151
});

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,15 @@ const initialSetupResponse = {
4848
locale: 'en',
4949
platform: { name: 'windows' },
5050
updateNotification: { content: null },
51-
customizer: { theme: 'system', userImages: [], userColor: null, background: { kind: 'default' } },
52-
defaultStyles: {
53-
lightBackgroundColor: '#E9EBEC',
54-
darkBackgroundColor: '#27282A',
51+
customizer: {
52+
theme: 'system',
53+
userImages: [],
54+
userColor: null,
55+
background: { kind: 'default' },
56+
defaultStyles: {
57+
lightBackgroundColor: '#E9EBEC',
58+
darkBackgroundColor: '#27282A',
59+
},
5560
},
5661
};
5762

0 commit comments

Comments
 (0)