diff --git a/browser/components/newtab/test/browser/abouthomecache/browser.toml b/browser/components/newtab/test/browser/abouthomecache/browser.toml index 1db3a3b74f68..5408e25e3501 100644 --- a/browser/components/newtab/test/browser/abouthomecache/browser.toml +++ b/browser/components/newtab/test/browser/abouthomecache/browser.toml @@ -20,6 +20,7 @@ prefs = [ "browser.newtabpage.activity-stream.discoverystream.sections.region-content-config=", "dom.ipc.processPrelaunch.delayMs=0", # Bug 1694957 is why we need dom.ipc.processPrelaunch.delayMs=0 + "browser.newtabpage.activity-stream.newtabWallpapers.system.enabled=false", ] ["browser_basic_endtoend.js"] diff --git a/browser/components/newtab/test/browser/browser.toml b/browser/components/newtab/test/browser/browser.toml index 0a7579d2b01d..bda8ab96f212 100644 --- a/browser/components/newtab/test/browser/browser.toml +++ b/browser/components/newtab/test/browser/browser.toml @@ -7,6 +7,7 @@ prefs = [ "browser.newtabpage.activity-stream.feeds.system.topstories=true", "browser.newtabpage.activity-stream.feeds.section.topstories=true", "messaging-system.log=all", + "browser.newtabpage.activity-stream.newtabWallpapers.system.enabled=false", "browser.newtabpage.sponsor-protection.enabled=true", "browser.newtabpage.sponsor-protection.debug=true", ] diff --git a/browser/extensions/newtab/content-src/components/Base/Base.jsx b/browser/extensions/newtab/content-src/components/Base/Base.jsx index cd6180d87389..b30da57e35d0 100644 --- a/browser/extensions/newtab/content-src/components/Base/Base.jsx +++ b/browser/extensions/newtab/content-src/components/Base/Base.jsx @@ -209,6 +209,8 @@ export class BaseContent extends React.PureComponent { this.applyBodyClasses(); global.addEventListener("scroll", this.onWindowScroll); const prefs = this.props.Prefs.values; + const novaEnabled = prefs[PREF_NOVA_ENABLED]; + const wallpapersSystemEnabled = prefs["newtabWallpapers.system.enabled"]; const wallpapersEnabled = prefs["newtabWallpapers.enabled"]; if (this.props.document.visibilityState === VISIBLE) { @@ -239,7 +241,10 @@ export class BaseContent extends React.PureComponent { this.handleColorModeChange ); this.handleColorModeChange(); - if (wallpapersEnabled) { + const isWallpaperVisible = novaEnabled + ? wallpapersSystemEnabled && wallpapersEnabled + : wallpapersSystemEnabled; + if (isWallpaperVisible) { this.updateWallpaper(); } @@ -285,8 +290,27 @@ export class BaseContent extends React.PureComponent { this.props.dispatch(ac.SetPref("weather.optInDisplayed", true)); } + const novaEnabled = prefs[PREF_NOVA_ENABLED]; + const wallpapersSystemEnabled = prefs["newtabWallpapers.system.enabled"]; const wallpapersEnabled = prefs["newtabWallpapers.enabled"]; - if (wallpapersEnabled) { + // Previous values of the wallpaper prefs, used to compare against the + // current values and detect what changed since the last render. + const prevNovaEnabled = prevProps.Prefs.values[PREF_NOVA_ENABLED]; + const prevWallpapersSystemEnabled = + prevProps.Prefs.values["newtabWallpapers.system.enabled"]; + const prevWallpapersEnabled = + prevProps.Prefs.values["newtabWallpapers.enabled"]; + + const isWallpaperActive = novaEnabled + ? wallpapersSystemEnabled && wallpapersEnabled + : wallpapersSystemEnabled; + // This checks if the wallpaper was active before this update so that we can + // detect when it just turned off and clear it from the background. + const wasWallpaperActive = prevNovaEnabled + ? prevWallpapersSystemEnabled && prevWallpapersEnabled + : prevWallpapersSystemEnabled; + + if (isWallpaperActive) { // destructure current and previous props with fallbacks // (preventing undefined errors) const { @@ -313,6 +337,7 @@ export class BaseContent extends React.PureComponent { // don't update wallpaper unless the wallpaper is being changed. if ( + !wasWallpaperActive || // the wallpaper wasn't active last render but is now, meaning it was just enabled, force an apply even if nothing else changed selectedWallpaper !== prevSelectedWallpaper || // selecting a new wallpaper initialWallpaper !== prevInitialWallpaper || // experiment sets initial wallpaper uploadedWallpaper !== prevUploadedWallpaper || // uploading a new wallpaper @@ -323,6 +348,9 @@ export class BaseContent extends React.PureComponent { ) { this.updateWallpaper(); } + } else if (wasWallpaperActive) { + // The wallpaper was active last render but isn't anymore, meaning it was just turned off — clear it from the background + this.updateWallpaper(); } this.spocsOnDemandUpdated(); @@ -525,9 +553,16 @@ export class BaseContent extends React.PureComponent { async updateWallpaper() { const prefs = this.props.Prefs.values; - const selectedWallpaper = - prefs["newtabWallpapers.wallpaper"] || - prefs["newtabWallpapers.initialWallpaper"]; + const novaEnabled = prefs[PREF_NOVA_ENABLED]; + const wallpapersSystemEnabled = prefs["newtabWallpapers.system.enabled"]; + const wallpapersEnabled = prefs["newtabWallpapers.enabled"]; + const isWallpaperVisible = novaEnabled + ? wallpapersSystemEnabled && wallpapersEnabled + : wallpapersSystemEnabled; + const selectedWallpaper = isWallpaperVisible + ? prefs["newtabWallpapers.wallpaper"] || + prefs["newtabWallpapers.initialWallpaper"] + : null; const { wallpaperList, uploadedWallpaper: uploadedWallpaperUrl } = this.props.Wallpapers; const uploadedWallpaperTheme = @@ -715,6 +750,7 @@ export class BaseContent extends React.PureComponent { const activeWallpaper = prefs[`newtabWallpapers.wallpaper`] || prefs[`newtabWallpapers.initialWallpaper`]; + const wallpapersSystemEnabled = prefs["newtabWallpapers.system.enabled"]; const wallpapersEnabled = prefs["newtabWallpapers.enabled"]; const weatherEnabled = prefs.showWeather; const { showTopicSelection } = DiscoveryStream; @@ -1018,6 +1054,7 @@ export class BaseContent extends React.PureComponent { setPref={this.setPref} enabledSections={enabledSections} enabledWidgets={enabledWidgets} + wallpapersSystemEnabled={wallpapersSystemEnabled} wallpapersEnabled={wallpapersEnabled} activeWallpaper={activeWallpaper} pocketRegion={pocketRegion} @@ -1141,7 +1178,7 @@ export class BaseContent extends React.PureComponent { )} - {wallpapersEnabled && this.renderWallpaperAttribution()} + {wallpapersSystemEnabled && this.renderWallpaperAttribution()}