diff --git a/browser/components/asrouter/content/asrouter-admin.bundle.js b/browser/components/asrouter/content/asrouter-admin.bundle.js index af744e85ed7a..e11e3a381f2e 100644 --- a/browser/components/asrouter/content/asrouter-admin.bundle.js +++ b/browser/components/asrouter/content/asrouter-admin.bundle.js @@ -334,7 +334,6 @@ for (const type of [ "UPDATE_PINNED_SEARCH_SHORTCUTS", "UPDATE_SEARCH_SHORTCUTS", "UPDATE_SECTION_PREFS", - "WALLPAPERS_CATEGORY_SET", "WALLPAPERS_FEATURE_HIGHLIGHT_COUNTER_INCREMENT", "WALLPAPERS_FEATURE_HIGHLIGHT_SEEN", "WALLPAPERS_SET", diff --git a/browser/components/newtab/common/Actions.mjs b/browser/components/newtab/common/Actions.mjs index 1a61f55d6b86..c7a41f637d90 100644 --- a/browser/components/newtab/common/Actions.mjs +++ b/browser/components/newtab/common/Actions.mjs @@ -160,7 +160,6 @@ for (const type of [ "UPDATE_PINNED_SEARCH_SHORTCUTS", "UPDATE_SEARCH_SHORTCUTS", "UPDATE_SECTION_PREFS", - "WALLPAPERS_CATEGORY_SET", "WALLPAPERS_FEATURE_HIGHLIGHT_COUNTER_INCREMENT", "WALLPAPERS_FEATURE_HIGHLIGHT_SEEN", "WALLPAPERS_SET", diff --git a/browser/components/newtab/common/Reducers.sys.mjs b/browser/components/newtab/common/Reducers.sys.mjs index 4881be2decc9..b499a3e95203 100644 --- a/browser/components/newtab/common/Reducers.sys.mjs +++ b/browser/components/newtab/common/Reducers.sys.mjs @@ -104,7 +104,6 @@ export const INITIAL_STATE = { Wallpapers: { wallpaperList: [], highlightSeenCounter: 0, - categories: [], }, Weather: { initialized: false, @@ -873,8 +872,6 @@ function Wallpapers(prevState = INITIAL_STATE.Wallpapers, action) { ...prevState, highlightSeenCounter: action.data, }; - case at.WALLPAPERS_CATEGORY_SET: - return { ...prevState, categories: action.data }; default: return prevState; } diff --git a/browser/components/newtab/content-src/components/Base/Base.jsx b/browser/components/newtab/content-src/components/Base/Base.jsx index 393bc7bb4831..1bdf93b58074 100644 --- a/browser/components/newtab/content-src/components/Base/Base.jsx +++ b/browser/components/newtab/content-src/components/Base/Base.jsx @@ -354,7 +354,6 @@ export class BaseContent extends React.PureComponent { const activeWallpaper = prefs[`newtabWallpapers.wallpaper-${this.state.colorMode}`]; const wallpapersEnabled = prefs["newtabWallpapers.enabled"]; - const wallpapersV2Enabled = prefs["newtabWallpapers.v2.enabled"]; const weatherEnabled = prefs.showWeather; const { pocketConfig } = prefs; @@ -409,7 +408,7 @@ export class BaseContent extends React.PureComponent { ] .filter(v => v) .join(" "); - if (wallpapersEnabled || wallpapersV2Enabled) { + if (wallpapersEnabled) { this.updateWallpaper(); } @@ -424,7 +423,6 @@ export class BaseContent extends React.PureComponent { setPref={this.setPref} enabledSections={enabledSections} wallpapersEnabled={wallpapersEnabled} - wallpapersV2Enabled={wallpapersV2Enabled} activeWallpaper={activeWallpaper} pocketRegion={pocketRegion} mayHaveSponsoredTopSites={mayHaveSponsoredTopSites} diff --git a/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx b/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx index 9c4cf95851f9..494d506da998 100644 --- a/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx +++ b/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx @@ -6,7 +6,6 @@ import React from "react"; import { actionCreators as ac } from "common/Actions.mjs"; import { SafeAnchor } from "../../DiscoveryStreamComponents/SafeAnchor/SafeAnchor"; import { WallpapersSection } from "../../WallpapersSection/WallpapersSection"; -import { WallpaperCategories } from "../../WallpapersSection/WallpaperCategories"; export class ContentSection extends React.PureComponent { constructor(props) { @@ -102,7 +101,6 @@ export class ContentSection extends React.PureComponent { openPreferences, spocMessageVariant, wallpapersEnabled, - wallpapersV2Enabled, activeWallpaper, setPref, } = this.props; @@ -121,20 +119,13 @@ export class ContentSection extends React.PureComponent {
{wallpapersEnabled && (
+

)} - {wallpapersV2Enabled && ( -
- -
- )}
{ - this.setState({ activeCategory: event.target.id }); - }; - - handleBack() { - this.setState({ activeCategory: null }); - } - - // Record user interaction when changing wallpaper and reseting wallpaper to default - handleUserEvent(data) { - this.props.dispatch( - ac.OnlyToMain({ - type: at.WALLPAPER_CLICK, - data, - }) - ); - } - - render() { - const { wallpaperList, categories } = this.props.Wallpapers; - const { activeWallpaper } = this.props; - const { activeCategory } = this.state; - const filteredWallpapers = wallpaperList.filter( - wallpaper => wallpaper.category === activeCategory - ); - - return ( -
-

Wallpapers

- -

{activeCategory}

-
- {filteredWallpapers.map(({ title, theme, fluent_id }) => { - return ( - <> - - - - ); - })} -
- - -
- ); - } -} - -export const WallpaperCategories = connect(state => { - return { - Wallpapers: state.Wallpapers, - Prefs: state.Prefs, - }; -})(_WallpaperCategories); diff --git a/browser/components/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss b/browser/components/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss index fbfeac5fa5ee..84cd7fb10519 100644 --- a/browser/components/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss +++ b/browser/components/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss @@ -1,59 +1,3 @@ -.category-list { - border: none; - display: grid; - gap: 16px; - grid-auto-rows: 86px; - grid-template-columns: 1fr 1fr 1fr; - - button { - background-clip: content-box; - background-repeat: no-repeat; - background-size: cover; - border-radius: 8px; - border: none; - box-shadow: 0 1px 2px 0 #3A394433; - cursor: pointer; - height: 86px; - width: 116px; - } -} - -.wallpaper-input { - appearance: none; - margin: 0; - padding: 0; - height: 86px; - width: 100%; - box-shadow: $shadow-secondary; - border-radius: 8px; - background-clip: content-box; - background-repeat: no-repeat; - background-size: cover; - cursor: pointer; - outline: 2px solid transparent; - - $wallpapers: dark-landscape, dark-color, dark-mountain, dark-panda, dark-sky, dark-beach, light-beach, light-color, light-landscape, light-mountain, light-panda, light-sky; - - @each $wallpaper in $wallpapers { - &.#{$wallpaper} { - background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/#{$wallpaper}.avif') - } - } - - &:checked { - outline-color: var(--color-accent-primary-active); - } - - &:focus-visible { - outline-color: var(--newtab-primary-action-background); - } - - &:hover { - filter: brightness(55%); - outline-color: transparent; - } -} - .wallpaper-list { display: grid; gap: 16px; @@ -63,49 +7,6 @@ padding: 0; border: none; - &.category { - background-color: var(--newtab-background-color-secondary); - color: var(--newtab-text-primary-color); - display: unset; - gap: unset; - grid-auto-rows: unset; - grid-template-columns: unset; - height: 100%; - position: absolute; - top: 0; - visibility: none; - width: 370px; // TODO: check this - z-index: 2; - - fieldset { - border: none; - display: grid; - gap: 16px; - grid-auto-rows: 86px; - grid-template-columns: 1fr 1fr 1fr; - } - - @media (prefers-reduced-motion: no-preference) { - &.wallpaper-list-enter { - transform: translateX(100%); - } - - &.wallpaper-list-enter-active { - transform: translateX(0); - transition: transform 300ms; - } - - &.wallpaper-list-exit { - transform: translateX(0); - } - - &.wallpaper-list-exit-active { - transform: translateX(100%); - transition: transform 300ms; - } - } - } - &:not(.ignore-color-mode) .wallpaper-input, &:not(.ignore-color-mode) .sr-only { &.theme-light { @@ -125,6 +26,42 @@ } } + .wallpaper-input { + appearance: none; + margin: 0; + padding: 0; + height: 86px; + width: 100%; + box-shadow: $shadow-secondary; + border-radius: 8px; + background-clip: content-box; + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; + outline: 2px solid transparent; + + $wallpapers: dark-landscape, dark-color, dark-mountain, dark-panda, dark-sky, dark-beach, light-beach, light-color, light-landscape, light-mountain, light-panda, light-sky; + + @each $wallpaper in $wallpapers { + &.#{$wallpaper} { + background-image: url('chrome://activity-stream/content/data/content/assets/wallpapers/#{$wallpaper}.avif') + } + } + + &:checked { + outline-color: var(--color-accent-primary-active); + } + + &:focus-visible { + outline-color: var(--newtab-primary-action-background); + } + + &:hover { + filter: brightness(55%); + outline-color: transparent; + } + } + // visually hide label, but still read by screen readers .sr-only { opacity: 0; @@ -148,4 +85,3 @@ text-decoration: none; } } - diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index d9924b90ff7e..64c9f9ae6477 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -1949,26 +1949,28 @@ main section { box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); } -.category-list { - border: none; +.wallpaper-list { display: grid; gap: 16px; - grid-auto-rows: 86px; grid-template-columns: 1fr 1fr 1fr; -} -.category-list button { - background-clip: content-box; - background-repeat: no-repeat; - background-size: cover; - border-radius: 8px; + grid-auto-rows: 86px; + margin: 16px 0; + padding: 0; border: none; - box-shadow: 0 1px 2px 0 #3A394433; - cursor: pointer; - height: 86px; - width: 116px; } - -.wallpaper-input { +.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { + display: inline-block; +} +[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { + display: none; +} +.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { + display: none; +} +[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { + display: inline-block; +} +.wallpaper-list .wallpaper-input { appearance: none; margin: 0; padding: 0; @@ -1982,111 +1984,52 @@ main section { cursor: pointer; outline: 2px solid transparent; } -.wallpaper-input.dark-landscape { +.wallpaper-list .wallpaper-input.dark-landscape { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-landscape.avif"); } -.wallpaper-input.dark-color { +.wallpaper-list .wallpaper-input.dark-color { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif"); } -.wallpaper-input.dark-mountain { +.wallpaper-list .wallpaper-input.dark-mountain { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif"); } -.wallpaper-input.dark-panda { +.wallpaper-list .wallpaper-input.dark-panda { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif"); } -.wallpaper-input.dark-sky { +.wallpaper-list .wallpaper-input.dark-sky { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif"); } -.wallpaper-input.dark-beach { +.wallpaper-list .wallpaper-input.dark-beach { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-beach.avif"); } -.wallpaper-input.light-beach { +.wallpaper-list .wallpaper-input.light-beach { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif"); } -.wallpaper-input.light-color { +.wallpaper-list .wallpaper-input.light-color { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif"); } -.wallpaper-input.light-landscape { +.wallpaper-list .wallpaper-input.light-landscape { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif"); } -.wallpaper-input.light-mountain { +.wallpaper-list .wallpaper-input.light-mountain { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif"); } -.wallpaper-input.light-panda { +.wallpaper-list .wallpaper-input.light-panda { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-panda.avif"); } -.wallpaper-input.light-sky { +.wallpaper-list .wallpaper-input.light-sky { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif"); } -.wallpaper-input:checked { +.wallpaper-list .wallpaper-input:checked { outline-color: var(--color-accent-primary-active); } -.wallpaper-input:focus-visible { +.wallpaper-list .wallpaper-input:focus-visible { outline-color: var(--newtab-primary-action-background); } -.wallpaper-input:hover { +.wallpaper-list .wallpaper-input:hover { filter: brightness(55%); outline-color: transparent; } - -.wallpaper-list { - display: grid; - gap: 16px; - grid-template-columns: 1fr 1fr 1fr; - grid-auto-rows: 86px; - margin: 16px 0; - padding: 0; - border: none; -} -.wallpaper-list.category { - background-color: var(--newtab-background-color-secondary); - color: var(--newtab-text-primary-color); - display: unset; - gap: unset; - grid-auto-rows: unset; - grid-template-columns: unset; - height: 100%; - position: absolute; - top: 0; - visibility: none; - width: 370px; - z-index: 2; -} -.wallpaper-list.category fieldset { - border: none; - display: grid; - gap: 16px; - grid-auto-rows: 86px; - grid-template-columns: 1fr 1fr 1fr; -} -@media (prefers-reduced-motion: no-preference) { - .wallpaper-list.category.wallpaper-list-enter { - transform: translateX(100%); - } - .wallpaper-list.category.wallpaper-list-enter-active { - transform: translateX(0); - transition: transform 300ms; - } - .wallpaper-list.category.wallpaper-list-exit { - transform: translateX(0); - } - .wallpaper-list.category.wallpaper-list-exit-active { - transform: translateX(100%); - transition: transform 300ms; - } -} -.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { - display: inline-block; -} -[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { - display: none; -} -.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { - display: none; -} -[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { - display: inline-block; -} .wallpaper-list .sr-only { opacity: 0; overflow: hidden; diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index ef69794d54c3..47a7cd69abe5 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -1953,26 +1953,28 @@ main section { box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); } -.category-list { - border: none; +.wallpaper-list { display: grid; gap: 16px; - grid-auto-rows: 86px; grid-template-columns: 1fr 1fr 1fr; -} -.category-list button { - background-clip: content-box; - background-repeat: no-repeat; - background-size: cover; - border-radius: 8px; + grid-auto-rows: 86px; + margin: 16px 0; + padding: 0; border: none; - box-shadow: 0 1px 2px 0 #3A394433; - cursor: pointer; - height: 86px; - width: 116px; } - -.wallpaper-input { +.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { + display: inline-block; +} +[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { + display: none; +} +.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { + display: none; +} +[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { + display: inline-block; +} +.wallpaper-list .wallpaper-input { appearance: none; margin: 0; padding: 0; @@ -1986,111 +1988,52 @@ main section { cursor: pointer; outline: 2px solid transparent; } -.wallpaper-input.dark-landscape { +.wallpaper-list .wallpaper-input.dark-landscape { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-landscape.avif"); } -.wallpaper-input.dark-color { +.wallpaper-list .wallpaper-input.dark-color { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif"); } -.wallpaper-input.dark-mountain { +.wallpaper-list .wallpaper-input.dark-mountain { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif"); } -.wallpaper-input.dark-panda { +.wallpaper-list .wallpaper-input.dark-panda { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif"); } -.wallpaper-input.dark-sky { +.wallpaper-list .wallpaper-input.dark-sky { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif"); } -.wallpaper-input.dark-beach { +.wallpaper-list .wallpaper-input.dark-beach { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-beach.avif"); } -.wallpaper-input.light-beach { +.wallpaper-list .wallpaper-input.light-beach { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif"); } -.wallpaper-input.light-color { +.wallpaper-list .wallpaper-input.light-color { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif"); } -.wallpaper-input.light-landscape { +.wallpaper-list .wallpaper-input.light-landscape { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif"); } -.wallpaper-input.light-mountain { +.wallpaper-list .wallpaper-input.light-mountain { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif"); } -.wallpaper-input.light-panda { +.wallpaper-list .wallpaper-input.light-panda { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-panda.avif"); } -.wallpaper-input.light-sky { +.wallpaper-list .wallpaper-input.light-sky { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif"); } -.wallpaper-input:checked { +.wallpaper-list .wallpaper-input:checked { outline-color: var(--color-accent-primary-active); } -.wallpaper-input:focus-visible { +.wallpaper-list .wallpaper-input:focus-visible { outline-color: var(--newtab-primary-action-background); } -.wallpaper-input:hover { +.wallpaper-list .wallpaper-input:hover { filter: brightness(55%); outline-color: transparent; } - -.wallpaper-list { - display: grid; - gap: 16px; - grid-template-columns: 1fr 1fr 1fr; - grid-auto-rows: 86px; - margin: 16px 0; - padding: 0; - border: none; -} -.wallpaper-list.category { - background-color: var(--newtab-background-color-secondary); - color: var(--newtab-text-primary-color); - display: unset; - gap: unset; - grid-auto-rows: unset; - grid-template-columns: unset; - height: 100%; - position: absolute; - top: 0; - visibility: none; - width: 370px; - z-index: 2; -} -.wallpaper-list.category fieldset { - border: none; - display: grid; - gap: 16px; - grid-auto-rows: 86px; - grid-template-columns: 1fr 1fr 1fr; -} -@media (prefers-reduced-motion: no-preference) { - .wallpaper-list.category.wallpaper-list-enter { - transform: translateX(100%); - } - .wallpaper-list.category.wallpaper-list-enter-active { - transform: translateX(0); - transition: transform 300ms; - } - .wallpaper-list.category.wallpaper-list-exit { - transform: translateX(0); - } - .wallpaper-list.category.wallpaper-list-exit-active { - transform: translateX(100%); - transition: transform 300ms; - } -} -.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { - display: inline-block; -} -[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { - display: none; -} -.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { - display: none; -} -[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { - display: inline-block; -} .wallpaper-list .sr-only { opacity: 0; overflow: hidden; diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css index a928c497aff8..57be8e35eef1 100644 --- a/browser/components/newtab/css/activity-stream-windows.css +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -1949,26 +1949,28 @@ main section { box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); } -.category-list { - border: none; +.wallpaper-list { display: grid; gap: 16px; - grid-auto-rows: 86px; grid-template-columns: 1fr 1fr 1fr; -} -.category-list button { - background-clip: content-box; - background-repeat: no-repeat; - background-size: cover; - border-radius: 8px; + grid-auto-rows: 86px; + margin: 16px 0; + padding: 0; border: none; - box-shadow: 0 1px 2px 0 #3A394433; - cursor: pointer; - height: 86px; - width: 116px; } - -.wallpaper-input { +.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { + display: inline-block; +} +[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { + display: none; +} +.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { + display: none; +} +[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { + display: inline-block; +} +.wallpaper-list .wallpaper-input { appearance: none; margin: 0; padding: 0; @@ -1982,111 +1984,52 @@ main section { cursor: pointer; outline: 2px solid transparent; } -.wallpaper-input.dark-landscape { +.wallpaper-list .wallpaper-input.dark-landscape { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-landscape.avif"); } -.wallpaper-input.dark-color { +.wallpaper-list .wallpaper-input.dark-color { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif"); } -.wallpaper-input.dark-mountain { +.wallpaper-list .wallpaper-input.dark-mountain { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif"); } -.wallpaper-input.dark-panda { +.wallpaper-list .wallpaper-input.dark-panda { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif"); } -.wallpaper-input.dark-sky { +.wallpaper-list .wallpaper-input.dark-sky { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif"); } -.wallpaper-input.dark-beach { +.wallpaper-list .wallpaper-input.dark-beach { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-beach.avif"); } -.wallpaper-input.light-beach { +.wallpaper-list .wallpaper-input.light-beach { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif"); } -.wallpaper-input.light-color { +.wallpaper-list .wallpaper-input.light-color { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif"); } -.wallpaper-input.light-landscape { +.wallpaper-list .wallpaper-input.light-landscape { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif"); } -.wallpaper-input.light-mountain { +.wallpaper-list .wallpaper-input.light-mountain { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif"); } -.wallpaper-input.light-panda { +.wallpaper-list .wallpaper-input.light-panda { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-panda.avif"); } -.wallpaper-input.light-sky { +.wallpaper-list .wallpaper-input.light-sky { background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif"); } -.wallpaper-input:checked { +.wallpaper-list .wallpaper-input:checked { outline-color: var(--color-accent-primary-active); } -.wallpaper-input:focus-visible { +.wallpaper-list .wallpaper-input:focus-visible { outline-color: var(--newtab-primary-action-background); } -.wallpaper-input:hover { +.wallpaper-list .wallpaper-input:hover { filter: brightness(55%); outline-color: transparent; } - -.wallpaper-list { - display: grid; - gap: 16px; - grid-template-columns: 1fr 1fr 1fr; - grid-auto-rows: 86px; - margin: 16px 0; - padding: 0; - border: none; -} -.wallpaper-list.category { - background-color: var(--newtab-background-color-secondary); - color: var(--newtab-text-primary-color); - display: unset; - gap: unset; - grid-auto-rows: unset; - grid-template-columns: unset; - height: 100%; - position: absolute; - top: 0; - visibility: none; - width: 370px; - z-index: 2; -} -.wallpaper-list.category fieldset { - border: none; - display: grid; - gap: 16px; - grid-auto-rows: 86px; - grid-template-columns: 1fr 1fr 1fr; -} -@media (prefers-reduced-motion: no-preference) { - .wallpaper-list.category.wallpaper-list-enter { - transform: translateX(100%); - } - .wallpaper-list.category.wallpaper-list-enter-active { - transform: translateX(0); - transition: transform 300ms; - } - .wallpaper-list.category.wallpaper-list-exit { - transform: translateX(0); - } - .wallpaper-list.category.wallpaper-list-exit-active { - transform: translateX(100%); - transition: transform 300ms; - } -} -.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { - display: inline-block; -} -[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { - display: none; -} -.wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { - display: none; -} -[lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { - display: inline-block; -} .wallpaper-list .sr-only { opacity: 0; overflow: hidden; diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js index dede314e09b2..182cbe131b50 100644 --- a/browser/components/newtab/data/content/activity-stream.bundle.js +++ b/browser/components/newtab/data/content/activity-stream.bundle.js @@ -233,7 +233,6 @@ for (const type of [ "UPDATE_PINNED_SEARCH_SHORTCUTS", "UPDATE_SEARCH_SHORTCUTS", "UPDATE_SECTION_PREFS", - "WALLPAPERS_CATEGORY_SET", "WALLPAPERS_FEATURE_HIGHLIGHT_COUNTER_INCREMENT", "WALLPAPERS_FEATURE_HIGHLIGHT_SEEN", "WALLPAPERS_SET", @@ -5651,7 +5650,6 @@ const INITIAL_STATE = { Wallpapers: { wallpaperList: [], highlightSeenCounter: 0, - categories: [], }, Weather: { initialized: false, @@ -6420,8 +6418,6 @@ function Wallpapers(prevState = INITIAL_STATE.Wallpapers, action) { ...prevState, highlightSeenCounter: action.data, }; - case actionTypes.WALLPAPERS_CATEGORY_SET: - return { ...prevState, categories: action.data }; default: return prevState; } @@ -9127,142 +9123,6 @@ const WallpapersSection = (0,external_ReactRedux_namespaceObject.connect)(state Prefs: state.Prefs }; })(_WallpapersSection); -;// CONCATENATED MODULE: ./content-src/components/WallpapersSection/WallpaperCategories.jsx -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - - - - - -class _WallpaperCategories extends (external_React_default()).PureComponent { - constructor(props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.handleReset = this.handleReset.bind(this); - this.handleCategory = this.handleCategory.bind(this); - this.handleBack = this.handleBack.bind(this); - this.prefersHighContrastQuery = null; - this.prefersDarkQuery = null; - this.state = { - activeCategory: null - }; - } - componentDidMount() { - this.prefersDarkQuery = globalThis.matchMedia("(prefers-color-scheme: dark)"); - } - handleChange(event) { - const { - id - } = event.target; - const prefs = this.props.Prefs.values; - const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light"; - this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, id); - this.handleUserEvent({ - selected_wallpaper: id, - hadPreviousWallpaper: !!this.props.activeWallpaper - }); - // bug 1892095 - if (prefs["newtabWallpapers.wallpaper-dark"] === "" && colorMode === "light") { - this.props.setPref("newtabWallpapers.wallpaper-dark", id.replace("light", "dark")); - } - if (prefs["newtabWallpapers.wallpaper-light"] === "" && colorMode === "dark") { - this.props.setPref(`newtabWallpapers.wallpaper-light`, id.replace("dark", "light")); - } - } - handleReset() { - const colorMode = this.prefersDarkQuery?.matches ? "dark" : "light"; - this.props.setPref(`newtabWallpapers.wallpaper-${colorMode}`, ""); - this.handleUserEvent({ - selected_wallpaper: "none", - hadPreviousWallpaper: !!this.props.activeWallpaper - }); - } - handleCategory = event => { - this.setState({ - activeCategory: event.target.id - }); - }; - handleBack() { - this.setState({ - activeCategory: null - }); - } - - // Record user interaction when changing wallpaper and reseting wallpaper to default - handleUserEvent(data) { - this.props.dispatch(actionCreators.OnlyToMain({ - type: actionTypes.WALLPAPER_CLICK, - data - })); - } - render() { - const { - wallpaperList, - categories - } = this.props.Wallpapers; - const { - activeWallpaper - } = this.props; - const { - activeCategory - } = this.state; - const filteredWallpapers = wallpaperList.filter(wallpaper => wallpaper.category === activeCategory); - return /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("h2", { - "data-l10n-id": "newtab-wallpaper-title" - }, "Wallpapers"), /*#__PURE__*/external_React_default().createElement("button", { - className: "wallpapers-reset", - onClick: this.handleReset, - "data-l10n-id": "newtab-wallpaper-reset" - }), /*#__PURE__*/external_React_default().createElement("fieldset", { - className: "category-list" - }, categories.map(category => { - const firstWallpaper = wallpaperList.find(wallpaper => wallpaper.category === category); - const title = firstWallpaper ? firstWallpaper.title : ""; - return /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("input", { - key: category, - id: category, - onClick: this.handleCategory, - className: `wallpaper-input ${title}` - }), /*#__PURE__*/external_React_default().createElement("label", null, category)); - })), /*#__PURE__*/external_React_default().createElement(external_ReactTransitionGroup_namespaceObject.CSSTransition, { - in: !!activeCategory, - timeout: 300, - classNames: "wallpaper-list", - unmountOnExit: true - }, /*#__PURE__*/external_React_default().createElement("section", { - className: "category wallpaper-list" - }, /*#__PURE__*/external_React_default().createElement("button", { - onClick: this.handleBack - }, "back arrow"), /*#__PURE__*/external_React_default().createElement("h2", null, activeCategory), /*#__PURE__*/external_React_default().createElement("fieldset", null, filteredWallpapers.map(({ - title, - theme, - fluent_id - }) => { - return /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("input", { - onChange: this.handleChange, - type: "radio", - name: `wallpaper-${title}`, - id: title, - value: title, - checked: title === activeWallpaper, - "aria-checked": title === activeWallpaper, - className: `wallpaper-input theme-${theme} ${title}` - }), /*#__PURE__*/external_React_default().createElement("label", { - htmlFor: title, - className: "sr-only", - "data-l10n-id": fluent_id - }, fluent_id)); - }))))); - } -} -const WallpaperCategories = (0,external_ReactRedux_namespaceObject.connect)(state => { - return { - Wallpapers: state.Wallpapers, - Prefs: state.Prefs - }; -})(_WallpaperCategories); ;// CONCATENATED MODULE: ./content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, @@ -9272,7 +9132,6 @@ const WallpaperCategories = (0,external_ReactRedux_namespaceObject.connect)(stat - class ContentSection extends (external_React_default()).PureComponent { constructor(props) { super(props); @@ -9354,7 +9213,6 @@ class ContentSection extends (external_React_default()).PureComponent { openPreferences, spocMessageVariant, wallpapersEnabled, - wallpapersV2Enabled, activeWallpaper, setPref } = this.props; @@ -9372,12 +9230,9 @@ class ContentSection extends (external_React_default()).PureComponent { className: "home-section" }, wallpapersEnabled && /*#__PURE__*/external_React_default().createElement("div", { className: "wallpapers-section" - }, /*#__PURE__*/external_React_default().createElement(WallpapersSection, { - setPref: setPref, - activeWallpaper: activeWallpaper - })), wallpapersV2Enabled && /*#__PURE__*/external_React_default().createElement("div", { - className: "wallpapers-section" - }, /*#__PURE__*/external_React_default().createElement(WallpaperCategories, { + }, /*#__PURE__*/external_React_default().createElement("h2", { + "data-l10n-id": "newtab-wallpaper-title" + }), /*#__PURE__*/external_React_default().createElement(WallpapersSection, { setPref: setPref, activeWallpaper: activeWallpaper })), /*#__PURE__*/external_React_default().createElement("div", { @@ -9591,7 +9446,6 @@ class _CustomizeMenu extends (external_React_default()).PureComponent { setPref: this.props.setPref, enabledSections: this.props.enabledSections, wallpapersEnabled: this.props.wallpapersEnabled, - wallpapersV2Enabled: this.props.wallpapersV2Enabled, activeWallpaper: this.props.activeWallpaper, pocketRegion: this.props.pocketRegion, mayHaveSponsoredTopSites: this.props.mayHaveSponsoredTopSites, @@ -10591,7 +10445,6 @@ class BaseContent extends (external_React_default()).PureComponent { const prefs = props.Prefs.values; const activeWallpaper = prefs[`newtabWallpapers.wallpaper-${this.state.colorMode}`]; const wallpapersEnabled = prefs["newtabWallpapers.enabled"]; - const wallpapersV2Enabled = prefs["newtabWallpapers.v2.enabled"]; const weatherEnabled = prefs.showWeather; const { pocketConfig @@ -10622,7 +10475,7 @@ class BaseContent extends (external_React_default()).PureComponent { mayHaveSponsoredTopSites } = prefs; const outerClassName = ["outer-wrapper", isDiscoveryStream && pocketEnabled && "ds-outer-wrapper-search-alignment", isDiscoveryStream && "ds-outer-wrapper-breakpoint-override", prefs.showSearch && this.state.fixedSearch && !noSectionsEnabled && "fixed-search", prefs.showSearch && noSectionsEnabled && "only-search", prefs["logowordmark.alwaysVisible"] && "visible-logo"].filter(v => v).join(" "); - if (wallpapersEnabled || wallpapersV2Enabled) { + if (wallpapersEnabled) { this.updateWallpaper(); } return /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("menu", { @@ -10634,7 +10487,6 @@ class BaseContent extends (external_React_default()).PureComponent { setPref: this.setPref, enabledSections: enabledSections, wallpapersEnabled: wallpapersEnabled, - wallpapersV2Enabled: wallpapersV2Enabled, activeWallpaper: activeWallpaper, pocketRegion: pocketRegion, mayHaveSponsoredTopSites: mayHaveSponsoredTopSites, diff --git a/browser/components/newtab/data/content/assets/wallpapers/dark-city.avif b/browser/components/newtab/data/content/assets/wallpapers/dark-city.avif deleted file mode 100644 index 27fb27533834..000000000000 Binary files a/browser/components/newtab/data/content/assets/wallpapers/dark-city.avif and /dev/null differ diff --git a/browser/components/newtab/lib/WallpaperFeed.sys.mjs b/browser/components/newtab/lib/WallpaperFeed.sys.mjs index 44f7703f67a1..d053807f533c 100644 --- a/browser/components/newtab/lib/WallpaperFeed.sys.mjs +++ b/browser/components/newtab/lib/WallpaperFeed.sys.mjs @@ -19,9 +19,6 @@ const PREF_WALLPAPERS_ENABLED = const PREF_WALLPAPERS_HIGHLIGHT_SEEN_COUNTER = "browser.newtabpage.activity-stream.newtabWallpapers.highlightSeenCounter"; -const PREF_WALLPAPERS_V2_ENABLED = - "browser.newtabpage.activity-stream.newtabWallpapers.v2.enabled"; - export class WallpaperFeed { constructor() { this.loaded = false; @@ -51,13 +48,8 @@ export class WallpaperFeed { PREF_WALLPAPERS_ENABLED ); - const wallpapersV2Enabled = Services.prefs.getBoolPref( - PREF_WALLPAPERS_V2_ENABLED - ); - - if (wallpapersEnabled || wallpapersV2Enabled) { + if (wallpapersEnabled) { if (!this.wallpaperClient) { - // getting collection this.wallpaperClient = this.RemoteSettings("newtab-wallpapers"); } @@ -81,7 +73,6 @@ export class WallpaperFeed { } async updateWallpapers(isStartup = false) { - // retrieving all records in collection const records = await this.wallpaperClient.get(); if (!records?.length) { return; @@ -94,14 +85,9 @@ export class WallpaperFeed { return { ...record, wallpaperUrl: `${this.baseAttachmentURL}${record.attachment.location}`, - category: record.category || "other", }; }); - const categories = [ - ...new Set(wallpapers.map(wallpaper => wallpaper.category)), - ]; - this.store.dispatch( ac.BroadcastToContent({ type: at.WALLPAPERS_SET, @@ -111,16 +97,6 @@ export class WallpaperFeed { }, }) ); - - this.store.dispatch( - ac.BroadcastToContent({ - type: at.WALLPAPERS_CATEGORY_SET, - data: categories, - meta: { - isStartup, - }, - }) - ); } initHighlightCounter() { diff --git a/browser/components/newtab/test/xpcshell/test_WallpaperFeed.js b/browser/components/newtab/test/xpcshell/test_WallpaperFeed.js index cf30526243c2..d7b804b412e3 100644 --- a/browser/components/newtab/test/xpcshell/test_WallpaperFeed.js +++ b/browser/components/newtab/test/xpcshell/test_WallpaperFeed.js @@ -73,7 +73,7 @@ add_task(async function test_onAction_INIT() { type: at.INIT, }); - Assert.ok(feed.store.dispatch.calledThrice); + Assert.ok(feed.store.dispatch.calledTwice); Assert.ok( feed.store.dispatch.firstCall.calledWith( ac.BroadcastToContent({ diff --git a/toolkit/components/nimbus/FeatureManifest.yaml b/toolkit/components/nimbus/FeatureManifest.yaml index e84a61650a7d..a1dbeac7251a 100644 --- a/toolkit/components/nimbus/FeatureManifest.yaml +++ b/toolkit/components/nimbus/FeatureManifest.yaml @@ -867,13 +867,6 @@ pocketNewtab: pref: browser.newtabpage.activity-stream.newtabWallpapers.enabled description: >- Turns on and off wallpaper support. - wallpapersV2: - type: boolean - setPref: - branch: user - pref: browser.newtabpage.activity-stream.newtabWallpapers.v2.enabled - description: >- - Turns on and off updated wallpaper experience. weatherLocationSearch: type: boolean fallbackPref: >-