diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 1016ffff0..14e614f8d 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -1 +1,4 @@ -- ntp: prevent gradients bleeding through (#1382) \ No newline at end of file +- ntp: ensure cross-window sections collapse (#1387) +- Revert "removed the restriction on config subscription" +- removed the restriction on config subscription +- ntp: support multiple release-note lists (#1385) \ No newline at end of file diff --git a/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.css b/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.css index f486a30f2..48d08007d 100644 --- a/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.css +++ b/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.css @@ -954,6 +954,7 @@ body[data-animate-background=true] { outline: none; padding-left: var(--sp-3); padding-right: var(--sp-3); + height: 96px; } .Tile_item:focus-visible .Tile_icon { box-shadow: var(--focus-ring); @@ -981,7 +982,7 @@ body[data-animate-background=true] { justify-items: center; width: var(--icon-width); height: var(--icon-width); - margin-bottom: 4px; + margin-bottom: 6px; border-radius: var(--border-radius-lg); } .Tile_draggable { @@ -1030,7 +1031,7 @@ body[data-animate-background=true] { width: var(--icon-width); text-align: center; font-size: calc(10 * var(--px-in-rem)); - line-height: 1.1; + line-height: calc(13 * var(--px-in-rem)); font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -1965,12 +1966,17 @@ body:not([data-platform-name]) .Button_button:active { display: none; } .UpdateNotification_detailsContent { - padding-inline: var(--sp-2); - margin-top: var(--sp-2); + margin-top: var(--sp-4); text-align: left; + max-width: 380px; + margin-left: auto; + margin-right: auto; +} +.UpdateNotification_title { + padding: 0.5rem 0; } .UpdateNotification_list { - margin-left: var(--sp-20); + margin-left: 1.5rem; } .UpdateNotification_list li { list-style: disc; diff --git a/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.js b/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.js index 0b6405acf..33f98aefd 100644 --- a/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.js +++ b/Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.js @@ -2525,9 +2525,7 @@ (cb) => { if (!service.current) return; return service.current.onConfig((event) => { - if (event.source === "manual") { - cb(event.data); - } + cb(event.data); }); }, [service] @@ -5889,7 +5887,7 @@ init_signals_module(); FavoritesMemo = C3(Favorites); ROW_CAPACITY = 6; - ITEM_HEIGHT = 90; + ITEM_HEIGHT = 96; ROW_GAP = 8; } }); @@ -7320,6 +7318,7 @@ inlineLink: "UpdateNotification_inlineLink", summary: "UpdateNotification_summary", detailsContent: "UpdateNotification_detailsContent", + title: "UpdateNotification_title", list: "UpdateNotification_list", dismiss: "UpdateNotification_dismiss" }; @@ -7468,13 +7467,24 @@ } } ); - return /* @__PURE__ */ _("details", { ref }, /* @__PURE__ */ _("summary", { tabIndex: -1, className: UpdateNotification_default.summary }, t4("updateNotification_updated_version", { version }), " ", inlineLink), /* @__PURE__ */ _("div", { id, class: UpdateNotification_default.detailsContent }, /* @__PURE__ */ _("ul", { class: UpdateNotification_default.list }, notes.map((note, index) => { - let trimmed = note.trim(); + const chunks = [{ title: "", notes: [] }]; + let index = 0; + for (const note of notes) { + const trimmed = note.trim(); + if (!trimmed) continue; if (trimmed.startsWith("\u2022")) { - trimmed = trimmed.slice(1).trim(); + const bullet = trimmed.slice(1).trim(); + chunks[index].notes.push(bullet); + } else { + chunks.push({ title: trimmed, notes: [] }); + index += 1; } - return /* @__PURE__ */ _("li", { key: note + index }, trimmed); - })))); + } + return /* @__PURE__ */ _("details", { ref }, /* @__PURE__ */ _("summary", { tabIndex: -1, className: UpdateNotification_default.summary }, t4("updateNotification_updated_version", { version }), " ", inlineLink), /* @__PURE__ */ _("div", { id, class: UpdateNotification_default.detailsContent }, chunks.map((chunk, index2) => { + return /* @__PURE__ */ _(b, { key: chunk.title + index2 }, chunk.title && /* @__PURE__ */ _("p", { class: UpdateNotification_default.title }, chunk.title), /* @__PURE__ */ _("ul", { class: UpdateNotification_default.list }, chunk.notes.map((note, index3) => { + return /* @__PURE__ */ _("li", { key: note + index3 }, note); + }))); + }))); } function WithoutNotes({ version }) { const { t: t4 } = useTypedTranslationWith( @@ -7511,7 +7521,7 @@ factory: () => factory6 }); function factory6() { - return /* @__PURE__ */ _(UpdateNotificationProvider, { "data-entry-point": "updateNotification" }, /* @__PURE__ */ _(UpdateNotificationConsumer, null)); + return /* @__PURE__ */ _("div", { "data-entry-point": "updateNotification" }, /* @__PURE__ */ _(UpdateNotificationProvider, null, /* @__PURE__ */ _(UpdateNotificationConsumer, null))); } var init_updateNotification = __esm({ "pages/new-tab/app/entry-points/updateNotification.js"() { diff --git a/build/integration/pages/new-tab/dist/index.css b/build/integration/pages/new-tab/dist/index.css index f486a30f2..48d08007d 100644 --- a/build/integration/pages/new-tab/dist/index.css +++ b/build/integration/pages/new-tab/dist/index.css @@ -954,6 +954,7 @@ body[data-animate-background=true] { outline: none; padding-left: var(--sp-3); padding-right: var(--sp-3); + height: 96px; } .Tile_item:focus-visible .Tile_icon { box-shadow: var(--focus-ring); @@ -981,7 +982,7 @@ body[data-animate-background=true] { justify-items: center; width: var(--icon-width); height: var(--icon-width); - margin-bottom: 4px; + margin-bottom: 6px; border-radius: var(--border-radius-lg); } .Tile_draggable { @@ -1030,7 +1031,7 @@ body[data-animate-background=true] { width: var(--icon-width); text-align: center; font-size: calc(10 * var(--px-in-rem)); - line-height: 1.1; + line-height: calc(13 * var(--px-in-rem)); font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -1965,12 +1966,17 @@ body:not([data-platform-name]) .Button_button:active { display: none; } .UpdateNotification_detailsContent { - padding-inline: var(--sp-2); - margin-top: var(--sp-2); + margin-top: var(--sp-4); text-align: left; + max-width: 380px; + margin-left: auto; + margin-right: auto; +} +.UpdateNotification_title { + padding: 0.5rem 0; } .UpdateNotification_list { - margin-left: var(--sp-20); + margin-left: 1.5rem; } .UpdateNotification_list li { list-style: disc; diff --git a/build/integration/pages/new-tab/dist/index.js b/build/integration/pages/new-tab/dist/index.js index 288530e2b..10c64b15f 100644 --- a/build/integration/pages/new-tab/dist/index.js +++ b/build/integration/pages/new-tab/dist/index.js @@ -2525,9 +2525,7 @@ (cb) => { if (!service.current) return; return service.current.onConfig((event) => { - if (event.source === "manual") { - cb(event.data); - } + cb(event.data); }); }, [service] @@ -5894,7 +5892,7 @@ init_signals_module(); FavoritesMemo = C3(Favorites); ROW_CAPACITY = 6; - ITEM_HEIGHT = 90; + ITEM_HEIGHT = 96; ROW_GAP = 8; } }); @@ -7325,6 +7323,7 @@ inlineLink: "UpdateNotification_inlineLink", summary: "UpdateNotification_summary", detailsContent: "UpdateNotification_detailsContent", + title: "UpdateNotification_title", list: "UpdateNotification_list", dismiss: "UpdateNotification_dismiss" }; @@ -7473,13 +7472,24 @@ } } ); - return /* @__PURE__ */ _("details", { ref }, /* @__PURE__ */ _("summary", { tabIndex: -1, className: UpdateNotification_default.summary }, t4("updateNotification_updated_version", { version }), " ", inlineLink), /* @__PURE__ */ _("div", { id, class: UpdateNotification_default.detailsContent }, /* @__PURE__ */ _("ul", { class: UpdateNotification_default.list }, notes.map((note, index) => { - let trimmed = note.trim(); + const chunks = [{ title: "", notes: [] }]; + let index = 0; + for (const note of notes) { + const trimmed = note.trim(); + if (!trimmed) continue; if (trimmed.startsWith("\u2022")) { - trimmed = trimmed.slice(1).trim(); + const bullet = trimmed.slice(1).trim(); + chunks[index].notes.push(bullet); + } else { + chunks.push({ title: trimmed, notes: [] }); + index += 1; } - return /* @__PURE__ */ _("li", { key: note + index }, trimmed); - })))); + } + return /* @__PURE__ */ _("details", { ref }, /* @__PURE__ */ _("summary", { tabIndex: -1, className: UpdateNotification_default.summary }, t4("updateNotification_updated_version", { version }), " ", inlineLink), /* @__PURE__ */ _("div", { id, class: UpdateNotification_default.detailsContent }, chunks.map((chunk, index2) => { + return /* @__PURE__ */ _(b, { key: chunk.title + index2 }, chunk.title && /* @__PURE__ */ _("p", { class: UpdateNotification_default.title }, chunk.title), /* @__PURE__ */ _("ul", { class: UpdateNotification_default.list }, chunk.notes.map((note, index3) => { + return /* @__PURE__ */ _("li", { key: note + index3 }, note); + }))); + }))); } function WithoutNotes({ version }) { const { t: t4 } = useTypedTranslationWith( @@ -7516,7 +7526,7 @@ factory: () => factory6 }); function factory6() { - return /* @__PURE__ */ _(UpdateNotificationProvider, { "data-entry-point": "updateNotification" }, /* @__PURE__ */ _(UpdateNotificationConsumer, null)); + return /* @__PURE__ */ _("div", { "data-entry-point": "updateNotification" }, /* @__PURE__ */ _(UpdateNotificationProvider, null, /* @__PURE__ */ _(UpdateNotificationConsumer, null))); } var init_updateNotification = __esm({ "pages/new-tab/app/entry-points/updateNotification.js"() { @@ -11383,6 +11393,20 @@ ], version: "1.91" } + }, + multipleSections: { + content: { + // prettier-ignore + notes: [ + `\u2022 We're excited to introduce a new browsing feature - Fire Windows. These special windows work the same way as normal windows, except they isolate your activity from other browsing data and self-destruct when closed. This means you can use a Fire Window to browse without saving local history or to sign into a site with a different account. You can open a new Fire Window anytime from the Fire Button menu.`, + `\u2022 Try the new bookmark management view that opens in a tab for more robust bookmark organization.`, + `For Privacy Pro subscribers`, + `\u2022 VPN notifications are now available to help communicate VPN status.`, + `\u2022 Some apps aren't compatible with VPNs. You can now exclude these apps to use them while connected to the VPN.`, + `\u2022 Visit https://duckduckgo.com/pro for more information.` + ], + version: "0.98.4" + } } }; @@ -11966,11 +11990,11 @@ ]; let updateNotification = { content: null }; const isDelayed = url3.searchParams.has("update-notification-delay"); - if (!isDelayed && url3.searchParams.get("update-notification") === "empty") { - updateNotification = updateNotificationExamples2.empty; - } - if (!isDelayed && url3.searchParams.get("update-notification") === "populated") { - updateNotification = updateNotificationExamples2.populated; + if (!isDelayed && url3.searchParams.has("update-notification")) { + const value = url3.searchParams.get("update-notification"); + if (value && value in updateNotificationExamples2) { + updateNotification = updateNotificationExamples2[value]; + } } const initial = { widgets: widgetsFromStorage, diff --git a/build/windows/pages/new-tab/dist/index.css b/build/windows/pages/new-tab/dist/index.css index f486a30f2..48d08007d 100644 --- a/build/windows/pages/new-tab/dist/index.css +++ b/build/windows/pages/new-tab/dist/index.css @@ -954,6 +954,7 @@ body[data-animate-background=true] { outline: none; padding-left: var(--sp-3); padding-right: var(--sp-3); + height: 96px; } .Tile_item:focus-visible .Tile_icon { box-shadow: var(--focus-ring); @@ -981,7 +982,7 @@ body[data-animate-background=true] { justify-items: center; width: var(--icon-width); height: var(--icon-width); - margin-bottom: 4px; + margin-bottom: 6px; border-radius: var(--border-radius-lg); } .Tile_draggable { @@ -1030,7 +1031,7 @@ body[data-animate-background=true] { width: var(--icon-width); text-align: center; font-size: calc(10 * var(--px-in-rem)); - line-height: 1.1; + line-height: calc(13 * var(--px-in-rem)); font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -1965,12 +1966,17 @@ body:not([data-platform-name]) .Button_button:active { display: none; } .UpdateNotification_detailsContent { - padding-inline: var(--sp-2); - margin-top: var(--sp-2); + margin-top: var(--sp-4); text-align: left; + max-width: 380px; + margin-left: auto; + margin-right: auto; +} +.UpdateNotification_title { + padding: 0.5rem 0; } .UpdateNotification_list { - margin-left: var(--sp-20); + margin-left: 1.5rem; } .UpdateNotification_list li { list-style: disc; diff --git a/build/windows/pages/new-tab/dist/index.js b/build/windows/pages/new-tab/dist/index.js index fef03457b..62f28e90a 100644 --- a/build/windows/pages/new-tab/dist/index.js +++ b/build/windows/pages/new-tab/dist/index.js @@ -2525,9 +2525,7 @@ (cb) => { if (!service.current) return; return service.current.onConfig((event) => { - if (event.source === "manual") { - cb(event.data); - } + cb(event.data); }); }, [service] @@ -5889,7 +5887,7 @@ init_signals_module(); FavoritesMemo = C3(Favorites); ROW_CAPACITY = 6; - ITEM_HEIGHT = 90; + ITEM_HEIGHT = 96; ROW_GAP = 8; } }); @@ -7320,6 +7318,7 @@ inlineLink: "UpdateNotification_inlineLink", summary: "UpdateNotification_summary", detailsContent: "UpdateNotification_detailsContent", + title: "UpdateNotification_title", list: "UpdateNotification_list", dismiss: "UpdateNotification_dismiss" }; @@ -7468,13 +7467,24 @@ } } ); - return /* @__PURE__ */ _("details", { ref }, /* @__PURE__ */ _("summary", { tabIndex: -1, className: UpdateNotification_default.summary }, t4("updateNotification_updated_version", { version }), " ", inlineLink), /* @__PURE__ */ _("div", { id, class: UpdateNotification_default.detailsContent }, /* @__PURE__ */ _("ul", { class: UpdateNotification_default.list }, notes.map((note, index) => { - let trimmed = note.trim(); + const chunks = [{ title: "", notes: [] }]; + let index = 0; + for (const note of notes) { + const trimmed = note.trim(); + if (!trimmed) continue; if (trimmed.startsWith("\u2022")) { - trimmed = trimmed.slice(1).trim(); + const bullet = trimmed.slice(1).trim(); + chunks[index].notes.push(bullet); + } else { + chunks.push({ title: trimmed, notes: [] }); + index += 1; } - return /* @__PURE__ */ _("li", { key: note + index }, trimmed); - })))); + } + return /* @__PURE__ */ _("details", { ref }, /* @__PURE__ */ _("summary", { tabIndex: -1, className: UpdateNotification_default.summary }, t4("updateNotification_updated_version", { version }), " ", inlineLink), /* @__PURE__ */ _("div", { id, class: UpdateNotification_default.detailsContent }, chunks.map((chunk, index2) => { + return /* @__PURE__ */ _(b, { key: chunk.title + index2 }, chunk.title && /* @__PURE__ */ _("p", { class: UpdateNotification_default.title }, chunk.title), /* @__PURE__ */ _("ul", { class: UpdateNotification_default.list }, chunk.notes.map((note, index3) => { + return /* @__PURE__ */ _("li", { key: note + index3 }, note); + }))); + }))); } function WithoutNotes({ version }) { const { t: t4 } = useTypedTranslationWith( @@ -7511,7 +7521,7 @@ factory: () => factory6 }); function factory6() { - return /* @__PURE__ */ _(UpdateNotificationProvider, { "data-entry-point": "updateNotification" }, /* @__PURE__ */ _(UpdateNotificationConsumer, null)); + return /* @__PURE__ */ _("div", { "data-entry-point": "updateNotification" }, /* @__PURE__ */ _(UpdateNotificationProvider, null, /* @__PURE__ */ _(UpdateNotificationConsumer, null))); } var init_updateNotification = __esm({ "pages/new-tab/app/entry-points/updateNotification.js"() { diff --git a/special-pages/pages/new-tab/app/entry-points/updateNotification.js b/special-pages/pages/new-tab/app/entry-points/updateNotification.js index 4824f8d05..64c197573 100644 --- a/special-pages/pages/new-tab/app/entry-points/updateNotification.js +++ b/special-pages/pages/new-tab/app/entry-points/updateNotification.js @@ -4,8 +4,10 @@ import { UpdateNotificationProvider } from '../update-notification/UpdateNotific export function factory() { return ( - - - +
+ + + +
); } diff --git a/special-pages/pages/new-tab/app/favorites/components/Favorites.js b/special-pages/pages/new-tab/app/favorites/components/Favorites.js index 253889eae..8766807cd 100644 --- a/special-pages/pages/new-tab/app/favorites/components/Favorites.js +++ b/special-pages/pages/new-tab/app/favorites/components/Favorites.js @@ -23,7 +23,7 @@ export const ROW_CAPACITY = 6; /** * Note: These values MUST match exactly what's defined in the CSS. */ -const ITEM_HEIGHT = 90; +const ITEM_HEIGHT = 96; const ROW_GAP = 8; /** diff --git a/special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js b/special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js index ed13ad17c..e6c3cda67 100644 --- a/special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js +++ b/special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js @@ -116,9 +116,7 @@ export function FavoritesProvider({ children }) { (cb) => { if (!service.current) return; return service.current.onConfig((event) => { - if (event.source === 'manual') { - cb(event.data); - } + cb(event.data); }); }, [service], diff --git a/special-pages/pages/new-tab/app/favorites/components/Tile.module.css b/special-pages/pages/new-tab/app/favorites/components/Tile.module.css index 42a8bd955..9b0e7de0b 100644 --- a/special-pages/pages/new-tab/app/favorites/components/Tile.module.css +++ b/special-pages/pages/new-tab/app/favorites/components/Tile.module.css @@ -8,6 +8,7 @@ outline: none; padding-left: var(--sp-3); padding-right: var(--sp-3); + height: 96px; &:focus-visible .icon { box-shadow: var(--focus-ring); @@ -33,7 +34,7 @@ justify-items: center; width: var(--icon-width); height: var(--icon-width); - margin-bottom: 4px; + margin-bottom: 6px; border-radius: var(--border-radius-lg); } @@ -88,13 +89,25 @@ height: calc(32 * var(--px-in-rem)); width: calc(32 * var(--px-in-rem)); } + + /*&[data-state="loading favicon-src"] {*/ + /* outline: 1px solid blue;*/ + /*}*/ + + /*&[data-state="did load favicon-src"] {*/ + /* outline: 1px solid green;*/ + /*}*/ + + /*&[data-state="did load fallback"] {*/ + /* outline: 1px dotted orange;*/ + /*}*/ } .text { width: var(--icon-width); text-align: center; font-size: calc(10 * var(--px-in-rem)); - line-height: 1.1; + line-height: calc(13 * var(--px-in-rem)); font-weight: 400; overflow: hidden; text-overflow: ellipsis; diff --git a/special-pages/pages/new-tab/app/mock-transport.js b/special-pages/pages/new-tab/app/mock-transport.js index 279f7e545..9ee8fb865 100644 --- a/special-pages/pages/new-tab/app/mock-transport.js +++ b/special-pages/pages/new-tab/app/mock-transport.js @@ -490,11 +490,11 @@ export function mockTransport() { let updateNotification = { content: null }; const isDelayed = url.searchParams.has('update-notification-delay'); - if (!isDelayed && url.searchParams.get('update-notification') === 'empty') { - updateNotification = updateNotificationExamples.empty; - } - if (!isDelayed && url.searchParams.get('update-notification') === 'populated') { - updateNotification = updateNotificationExamples.populated; + if (!isDelayed && url.searchParams.has('update-notification')) { + const value = url.searchParams.get('update-notification'); + if (value && value in updateNotificationExamples) { + updateNotification = updateNotificationExamples[value]; + } } /** @type {import('../types/new-tab.ts').InitialSetupResponse} */ diff --git a/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.js b/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.js index 5d47d7ed6..2cfaa1f9b 100644 --- a/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.js +++ b/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.js @@ -1,4 +1,4 @@ -import { h } from 'preact'; +import { Fragment, h } from 'preact'; import cn from 'classnames'; import styles from './UpdateNotification.module.css'; import { useContext, useId, useRef } from 'preact/hooks'; @@ -25,6 +25,11 @@ export function UpdateNotification({ notes, dismiss, version }) { ); } +/** + * @param {object} props + * @param {string[]} props.notes + * @param {string} props.version + */ export function WithNotes({ notes, version }) { const id = useId(); const ref = useRef(/** @type {HTMLDetailsElement|null} */ (null)); @@ -45,27 +50,46 @@ export function WithNotes({ notes, version }) { }} /> ); + /** @type {{title: string, notes:string[]}[]} */ + const chunks = [{ title: '', notes: [] }]; + let index = 0; + + for (const note of notes) { + const trimmed = note.trim(); + if (!trimmed) continue; + if (trimmed.startsWith('•')) { + /** + * Note: Doing this here as a very specific 'view' concern + * Note: using the `if` + `.slice` to avoid regex + * Note: `.slice` is safe on `•` because it is a single Unicode character + * and is represented by a single UTF-16 code unit. + */ + const bullet = trimmed.slice(1).trim(); + chunks[index].notes.push(bullet); + } else { + chunks.push({ title: trimmed, notes: [] }); + index += 1; + } + } + return (
{t('updateNotification_updated_version', { version })} {inlineLink}
- + {chunks.map((chunk, index) => { + return ( + + {chunk.title &&

{chunk.title}

} +
    + {chunk.notes.map((note, index) => { + return
  • {note}
    • ; + })} +
+ + ); + })}
); diff --git a/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css b/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css index 0caf8c1a4..b1b1b254e 100644 --- a/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css +++ b/special-pages/pages/new-tab/app/update-notification/components/UpdateNotification.module.css @@ -56,13 +56,17 @@ } .detailsContent { - padding-inline: var(--sp-2); - margin-top: var(--sp-2); + margin-top: var(--sp-4); text-align: left; + max-width: 380px; /* just a value that looks below it's centered heading */ + margin-left: auto; + margin-right: auto; +} +.title { + padding: 0.5rem 0; } - .list { - margin-left: var(--sp-20); + margin-left: 1.5rem; li { list-style: disc } diff --git a/special-pages/pages/new-tab/app/update-notification/integration-tests/update-notification.spec.js b/special-pages/pages/new-tab/app/update-notification/integration-tests/update-notification.spec.js index a7a15d0a8..b4f01f146 100644 --- a/special-pages/pages/new-tab/app/update-notification/integration-tests/update-notification.spec.js +++ b/special-pages/pages/new-tab/app/update-notification/integration-tests/update-notification.spec.js @@ -33,4 +33,21 @@ test.describe('newtab update notifications', () => { await page.getByRole('button', { name: 'Dismiss' }).click(); await ntp.mocks.waitForCallCount({ method: 'updateNotification_dismiss', count: 1 }); }); + test('handles multiple lists', async ({ page }, workerInfo) => { + const ntp = NewtabPage.create(page, workerInfo); + await ntp.reducedMotion(); + await ntp.openPage({ updateNotification: 'multipleSections' }); + await page.getByRole('link', { name: "what's new" }).click(); + await expect(page.locator('[data-entry-point="updateNotification"]')).toMatchAriaSnapshot(` + - group: + - list: + - listitem: We're excited to introduce a new browsing feature - Fire Windows. These special windows work the same way as normal windows, except they isolate your activity from other browsing data and self-destruct when closed. This means you can use a Fire Window to browse without saving local history or to sign into a site with a different account. You can open a new Fire Window anytime from the Fire Button menu. + - listitem: Try the new bookmark management view that opens in a tab for more robust bookmark organization. + - paragraph: For Privacy Pro subscribers + - list: + - listitem: VPN notifications are now available to help communicate VPN status. + - listitem: Some apps aren't compatible with VPNs. You can now exclude these apps to use them while connected to the VPN. + - listitem: Visit https://duckduckgo.com/pro for more information. + `); + }); }); diff --git a/special-pages/pages/new-tab/app/update-notification/mocks/update-notification.data.js b/special-pages/pages/new-tab/app/update-notification/mocks/update-notification.data.js index d959b5f73..d6f28ebc3 100644 --- a/special-pages/pages/new-tab/app/update-notification/mocks/update-notification.data.js +++ b/special-pages/pages/new-tab/app/update-notification/mocks/update-notification.data.js @@ -18,4 +18,18 @@ export const updateNotificationExamples = { version: '1.91', }, }, + multipleSections: { + content: { + // prettier-ignore + notes: [ + `• We're excited to introduce a new browsing feature - Fire Windows. These special windows work the same way as normal windows, except they isolate your activity from other browsing data and self-destruct when closed. This means you can use a Fire Window to browse without saving local history or to sign into a site with a different account. You can open a new Fire Window anytime from the Fire Button menu.`, + `• Try the new bookmark management view that opens in a tab for more robust bookmark organization.`, + `For Privacy Pro subscribers`, + `• VPN notifications are now available to help communicate VPN status.`, + `• Some apps aren't compatible with VPNs. You can now exclude these apps to use them while connected to the VPN.`, + `• Visit https://duckduckgo.com/pro for more information.`, + ], + version: '0.98.4', + }, + }, };