XLinfini/sousa-gecko
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 2030873 - Nova wallpapers reset functionality. r=home-newtab-reviewers,nina-py

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D294346
This commit is contained in:
Reem H
2026-04-20 09:45:51 +00:00
committed by rhamoui@mozilla.com
parent 55475eb584
commit 174e4d4b8d
23 changed files with 491 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browser/components/newtab/test/browser/abouthomecache/browser.toml
+1
View File
@@ -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"]
browser/components/newtab/test/browser/browser.toml
+1
View File
@@ -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",
]
browser/extensions/newtab/content-src/components/Base/Base.jsx
+44 -6
View File
@@ -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 {
)}
</div>
<ConfirmDialog />
{wallpapersEnabled && this.renderWallpaperAttribution()}
{wallpapersSystemEnabled && this.renderWallpaperAttribution()}
</main>
<aside>
{this.props.Notifications?.showNotifications && (
@@ -1164,6 +1201,7 @@ export class BaseContent extends React.PureComponent {
setPref={this.setPref}
enabledSections={enabledSections}
enabledWidgets={enabledWidgets}
wallpapersSystemEnabled={wallpapersSystemEnabled}
wallpapersEnabled={wallpapersEnabled}
activeWallpaper={activeWallpaper}
pocketRegion={pocketRegion}
browser/extensions/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx
+8 -9
View File
@@ -180,6 +180,7 @@ export class ContentSection extends React.PureComponent {
showSectionsMgmtPanel,
// @nova-cleanup(remove-conditional): Remove novaEnabled
novaEnabled,
wallpapersSystemEnabled,
toggleWidgetsManagementPanel,
showWidgetsManagementPanel,
widgetsEnabled,
@@ -207,7 +208,7 @@ export class ContentSection extends React.PureComponent {
return (
<>
<div className="home-section">
{(wallpapersEnabled || novaEnabled) && (
{wallpapersSystemEnabled && (
<>
<div className="wallpapers-section">
{novaEnabled && (
@@ -221,14 +222,12 @@ export class ContentSection extends React.PureComponent {
data-l10n-id="newtab-wallpaper-toggle-title"
/>
)}
{wallpapersEnabled && (
<WallpaperCategories
setPref={setPref}
activeWallpaper={activeWallpaper}
exitEventFired={exitEventFired}
onSubpanelToggle={onSubpanelToggle}
/>
)}
<WallpaperCategories
setPref={setPref}
activeWallpaper={activeWallpaper}
exitEventFired={exitEventFired}
onSubpanelToggle={onSubpanelToggle}
/>
</div>
</>
)}
browser/extensions/newtab/content-src/components/CustomizeMenu/CustomizeMenu.jsx
+1
View File
@@ -137,6 +137,7 @@ export class _CustomizeMenu extends React.PureComponent {
setPref={this.props.setPref}
enabledSections={this.props.enabledSections}
enabledWidgets={this.props.enabledWidgets}
wallpapersSystemEnabled={this.props.wallpapersSystemEnabled}
wallpapersEnabled={this.props.wallpapersEnabled}
activeWallpaper={this.props.activeWallpaper}
pocketRegion={this.props.pocketRegion}
browser/extensions/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
+4
View File
@@ -710,5 +710,9 @@
.section #shortcuts-toggle #row-selector {
width: 100%;
}
#wallpapers-toggle {
margin-block-end: var(--space-large);
}
}
browser/extensions/newtab/content-src/components/WallpaperCategories/WallpaperCategories.jsx
+13 -5
View File
@@ -119,6 +119,7 @@ export class _WallpaperCategories extends React.PureComponent {
// Setting this now so when we remove v1 we don't have to migrate v1 values.
this.props.setPref("newtabWallpapers.wallpaper", id);
this.props.setPref("newtabWallpapers.initialWallpaper", "");
this.props.setPref("newtabWallpapers.enabled", true);
}
// Note: There's a separate event (debouncedHandleChange) that fires the handleChange
@@ -134,6 +135,7 @@ export class _WallpaperCategories extends React.PureComponent {
this.props.setPref("newtabWallpapers.wallpaper", id);
this.props.setPref("newtabWallpapers.initialWallpaper", "");
this.props.setPref("newtabWallpapers.enabled", true);
const uploadedPreviously =
this.props.Prefs.values[PREF_WALLPAPER_UPLOADED_PREVIOUSLY];
@@ -360,6 +362,7 @@ export class _WallpaperCategories extends React.PureComponent {
// Set active wallpaper ID to "custom"
this.props.setPref("newtabWallpapers.wallpaper", "custom");
this.props.setPref("newtabWallpapers.initialWallpaper", "");
this.props.setPref("newtabWallpapers.enabled", true);
// Update the uploadedPreviously pref to TRUE
// Note: this pref used for telemetry. Do not reset to false.
@@ -544,11 +547,16 @@ export class _WallpaperCategories extends React.PureComponent {
// @nova-cleanup(remove-conditional): Remove h2 once Nova ships — title moves to the wallpaper toggle
!novaEnabled && <h2 data-l10n-id="newtab-wallpaper-title"></h2>
}
<button
className="wallpapers-reset"
onClick={this.handleReset}
data-l10n-id="newtab-wallpaper-reset"
/>
{
// @nova-cleanup(remove-conditional): Remove reset button once Nova ships — toggle handles reset
!novaEnabled && (
<button
className="wallpapers-reset"
onClick={this.handleReset}
data-l10n-id="newtab-wallpaper-reset"
/>
)
}
</div>
<div
role="grid"
browser/extensions/newtab/css/activity-stream.css
+3
View File
@@ -2475,6 +2475,9 @@ main section {
.nova-enabled .section #shortcuts-toggle #row-selector {
width: 100%;
}
.nova-enabled #wallpapers-toggle {
margin-block-end: var(--space-large);
}
.category-list {
border: none;
browser/extensions/newtab/css/nova/activity-stream.css
+3
View File
@@ -2862,6 +2862,9 @@ main section {
.nova-enabled .section #shortcuts-toggle #row-selector {
width: 100%;
}
.nova-enabled #wallpapers-toggle {
margin-block-end: var(--space-large);
}
.category-list {
border: none;
browser/extensions/newtab/data/content/activity-stream.bundle.js
+41 -8
View File
@@ -15749,6 +15749,7 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
// Setting this now so when we remove v1 we don't have to migrate v1 values.
this.props.setPref("newtabWallpapers.wallpaper", id);
this.props.setPref("newtabWallpapers.initialWallpaper", "");
this.props.setPref("newtabWallpapers.enabled", true);
}
// Note: There's a separate event (debouncedHandleChange) that fires the handleChange
@@ -15765,6 +15766,7 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
}
this.props.setPref("newtabWallpapers.wallpaper", id);
this.props.setPref("newtabWallpapers.initialWallpaper", "");
this.props.setPref("newtabWallpapers.enabled", true);
const uploadedPreviously = this.props.Prefs.values[PREF_WALLPAPER_UPLOADED_PREVIOUSLY];
this.handleUserEvent(actionTypes.WALLPAPER_CLICK, {
selected_wallpaper: id,
@@ -15960,6 +15962,7 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
// Set active wallpaper ID to "custom"
this.props.setPref("newtabWallpapers.wallpaper", "custom");
this.props.setPref("newtabWallpapers.initialWallpaper", "");
this.props.setPref("newtabWallpapers.enabled", true);
// Update the uploadedPreviously pref to TRUE
// Note: this pref used for telemetry. Do not reset to false.
@@ -16130,7 +16133,9 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
// @nova-cleanup(remove-conditional): Remove h2 once Nova ships — title moves to the wallpaper toggle
!novaEnabled && /*#__PURE__*/external_React_default().createElement("h2", {
"data-l10n-id": "newtab-wallpaper-title"
}), /*#__PURE__*/external_React_default().createElement("button", {
}),
// @nova-cleanup(remove-conditional): Remove reset button once Nova ships — toggle handles reset
!novaEnabled && /*#__PURE__*/external_React_default().createElement("button", {
className: "wallpapers-reset",
onClick: this.handleReset,
"data-l10n-id": "newtab-wallpaper-reset"
@@ -16649,6 +16654,7 @@ class ContentSection extends (external_React_default()).PureComponent {
showSectionsMgmtPanel,
// @nova-cleanup(remove-conditional): Remove novaEnabled
novaEnabled,
wallpapersSystemEnabled,
toggleWidgetsManagementPanel,
showWidgetsManagementPanel,
widgetsEnabled
@@ -16678,7 +16684,7 @@ class ContentSection extends (external_React_default()).PureComponent {
// @nova-cleanup(remove-conditional): This conditional adds the toggle for wallpaper visibility.
return /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("div", {
className: "home-section"
}, (wallpapersEnabled || novaEnabled) && /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("div", {
}, wallpapersSystemEnabled && /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, /*#__PURE__*/external_React_default().createElement("div", {
className: "wallpapers-section"
}, novaEnabled && /*#__PURE__*/external_React_default().createElement("moz-toggle", {
id: "wallpapers-toggle",
@@ -16688,7 +16694,7 @@ class ContentSection extends (external_React_default()).PureComponent {
"data-preference": "newtabWallpapers.enabled",
"data-event-source": "WALLPAPERS",
"data-l10n-id": "newtab-wallpaper-toggle-title"
}), wallpapersEnabled && /*#__PURE__*/external_React_default().createElement(WallpaperCategories, {
}), /*#__PURE__*/external_React_default().createElement(WallpaperCategories, {
setPref: setPref,
activeWallpaper: activeWallpaper,
exitEventFired: exitEventFired,
@@ -17021,6 +17027,7 @@ class _CustomizeMenu extends (external_React_default()).PureComponent {
setPref: this.props.setPref,
enabledSections: this.props.enabledSections,
enabledWidgets: this.props.enabledWidgets,
wallpapersSystemEnabled: this.props.wallpapersSystemEnabled,
wallpapersEnabled: this.props.wallpapersEnabled,
activeWallpaper: this.props.activeWallpaper,
pocketRegion: this.props.pocketRegion,
@@ -18653,6 +18660,8 @@ class BaseContent extends (external_React_default()).PureComponent {
this.applyBodyClasses();
__webpack_require__.g.addEventListener("scroll", this.onWindowScroll);
const prefs = this.props.Prefs.values;
const novaEnabled = prefs[Base_PREF_NOVA_ENABLED];
const wallpapersSystemEnabled = prefs["newtabWallpapers.system.enabled"];
const wallpapersEnabled = prefs["newtabWallpapers.enabled"];
if (this.props.document.visibilityState === Base_VISIBLE) {
this.onVisible();
@@ -18670,7 +18679,8 @@ class BaseContent extends (external_React_default()).PureComponent {
this.prefersDarkQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
this.prefersDarkQuery.addEventListener("change", this.handleColorModeChange);
this.handleColorModeChange();
if (wallpapersEnabled) {
const isWallpaperVisible = novaEnabled ? wallpapersSystemEnabled && wallpapersEnabled : wallpapersSystemEnabled;
if (isWallpaperVisible) {
this.updateWallpaper();
}
this._onHashChange = () => {
@@ -18707,8 +18717,19 @@ class BaseContent extends (external_React_default()).PureComponent {
// If weather widget was enabled from customization menu, display opt-in dialog
this.props.dispatch(actionCreators.SetPref("weather.optInDisplayed", true));
}
const novaEnabled = prefs[Base_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[Base_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 {
@@ -18734,7 +18755,9 @@ class BaseContent extends (external_React_default()).PureComponent {
const prevUploadedWallpaperTheme = prevPrefs["newtabWallpapers.customWallpaper.theme"];
// don't update wallpaper unless the wallpaper is being changed.
if (selectedWallpaper !== prevSelectedWallpaper ||
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
@@ -18747,6 +18770,9 @@ class BaseContent extends (external_React_default()).PureComponent {
uploadedWallpaperTheme !== prevUploadedWallpaperTheme) {
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();
this.trackSpocPlaceholderDuration(prevProps);
@@ -18932,7 +18958,11 @@ class BaseContent extends (external_React_default()).PureComponent {
}
async updateWallpaper() {
const prefs = this.props.Prefs.values;
const selectedWallpaper = prefs["newtabWallpapers.wallpaper"] || prefs["newtabWallpapers.initialWallpaper"];
const novaEnabled = prefs[Base_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
@@ -19078,6 +19108,7 @@ class BaseContent extends (external_React_default()).PureComponent {
// @nova-cleanup(remove-conditional):
const novaEnabled = prefs[Base_PREF_NOVA_ENABLED];
const activeWallpaper = prefs[`newtabWallpapers.wallpaper`] || prefs[`newtabWallpapers.initialWallpaper`];
const wallpapersSystemEnabled = prefs["newtabWallpapers.system.enabled"];
const wallpapersEnabled = prefs["newtabWallpapers.enabled"];
const weatherEnabled = prefs.showWeather;
const {
@@ -19215,6 +19246,7 @@ class BaseContent extends (external_React_default()).PureComponent {
setPref: this.setPref,
enabledSections: enabledSections,
enabledWidgets: enabledWidgets,
wallpapersSystemEnabled: wallpapersSystemEnabled,
wallpapersEnabled: wallpapersEnabled,
activeWallpaper: activeWallpaper,
pocketRegion: pocketRegion,
@@ -19282,7 +19314,7 @@ class BaseContent extends (external_React_default()).PureComponent {
}, /*#__PURE__*/external_React_default().createElement(DiscoveryStreamBase, {
locale: props.App.locale,
spocsLoading: this.isSpocsOnDemandExpired
})) : /*#__PURE__*/external_React_default().createElement(Sections_Sections, null)), /*#__PURE__*/external_React_default().createElement(ConfirmDialog, null), wallpapersEnabled && this.renderWallpaperAttribution()), /*#__PURE__*/external_React_default().createElement("aside", null, this.props.Notifications?.showNotifications && /*#__PURE__*/external_React_default().createElement(ErrorBoundary, null, /*#__PURE__*/external_React_default().createElement(Notifications_Notifications, {
})) : /*#__PURE__*/external_React_default().createElement(Sections_Sections, null)), /*#__PURE__*/external_React_default().createElement(ConfirmDialog, null), wallpapersSystemEnabled && this.renderWallpaperAttribution()), /*#__PURE__*/external_React_default().createElement("aside", null, this.props.Notifications?.showNotifications && /*#__PURE__*/external_React_default().createElement(ErrorBoundary, null, /*#__PURE__*/external_React_default().createElement(Notifications_Notifications, {
dispatch: this.props.dispatch
}))), mayShowTopicSelection && pocketEnabled && /*#__PURE__*/external_React_default().createElement(TopicSelection, {
supportUrl: supportUrl
@@ -19295,6 +19327,7 @@ class BaseContent extends (external_React_default()).PureComponent {
setPref: this.setPref,
enabledSections: enabledSections,
enabledWidgets: enabledWidgets,
wallpapersSystemEnabled: wallpapersSystemEnabled,
wallpapersEnabled: wallpapersEnabled,
activeWallpaper: activeWallpaper,
pocketRegion: pocketRegion,
browser/extensions/newtab/lib/ActivityStream.sys.mjs
+9 -1
View File
@@ -685,9 +685,17 @@ export const PREFS_CONFIG = new Map([
},
],
[
"newtabWallpapers.enabled",
"newtabWallpapers.system.enabled",
{
title: "Boolean flag to turn wallpaper functionality on and off",
value: true,
},
],
[
"newtabWallpapers.enabled",
{
title:
"Boolean flag controlling wallpaper visibility -- if true the user's selected wallpaper is shown, if false it is hidden",
value: false,
},
],
browser/extensions/newtab/lib/Wallpapers/WallpaperFeed.sys.mjs
+4 -4
View File
@@ -14,8 +14,8 @@ import {
actionCreators as ac,
} from "resource://newtab/common/Actions.mjs";
const PREF_WALLPAPERS_ENABLED =
"browser.newtabpage.activity-stream.newtabWallpapers.enabled";
const PREF_SYSTEM_WALLPAPERS_ENABLED =
"browser.newtabpage.activity-stream.newtabWallpapers.system.enabled";
const PREF_WALLPAPERS_HIGHLIGHT_SEEN_COUNTER =
"browser.newtabpage.activity-stream.newtabWallpapers.highlightSeenCounter";
@@ -72,7 +72,7 @@ export class WallpaperFeed {
async wallpaperSetup(isStartup = false) {
const wallpapersEnabled = Services.prefs.getBoolPref(
PREF_WALLPAPERS_ENABLED
PREF_SYSTEM_WALLPAPERS_ENABLED
);
if (wallpapersEnabled) {
@@ -342,7 +342,7 @@ export class WallpaperFeed {
if (
action.data.name === "newtabWallpapers.customColor.enabled" ||
action.data.name === "newtabWallpapers.customWallpaper.enabled" ||
action.data.name === "newtabWallpapers.enabled"
action.data.name === "newtabWallpapers.system.enabled"
) {
this.wallpaperTeardown();
await this.wallpaperSetup(false /* isStartup */);
browser/extensions/newtab/test/browser/browser.toml
+1
View File
@@ -20,6 +20,7 @@ prefs = [
"browser.newtabpage.activity-stream.discoverystream.sections.region-content-config=",
"messaging-system.log=all",
"browser.newtabpage.activity-stream.activationWindow.log=true",
"browser.newtabpage.activity-stream.newtabWallpapers.system.enabled=false",
]
tags = "newtab"
browser/extensions/newtab/test/browser/browser_customize_menu_content.js
+89
View File
@@ -8,6 +8,10 @@ const { WeatherFeed } = ChromeUtils.importESModule(
"resource://newtab/lib/WeatherFeed.sys.mjs"
);
const { WallpaperFeed } = ChromeUtils.importESModule(
"resource://newtab/lib/Wallpapers/WallpaperFeed.sys.mjs"
);
const { DiscoveryStreamFeed } = ChromeUtils.importESModule(
"resource://newtab/lib/DiscoveryStreamFeed.sys.mjs"
);
@@ -32,6 +36,15 @@ add_setup(async function () {
"https://example.com/browser/browser/extensions/newtab/test/browser/topstories.json"
);
const fakeWallpaperClient = {
on: () => {},
off: () => {},
get: async () => [],
};
sandbox
.stub(WallpaperFeed.prototype, "RemoteSettings")
.returns(fakeWallpaperClient);
await SpecialPowers.pushPrefEnv({
set: [
[
@@ -275,6 +288,82 @@ test_newtab({
},
});
test_newtab({
async before({ pushPrefs }) {
await pushPrefs(
["browser.newtabpage.activity-stream.nova.enabled", true],
[
"browser.newtabpage.activity-stream.newtabWallpapers.system.enabled",
true,
],
["browser.newtabpage.activity-stream.newtabWallpapers.enabled", false],
// Use a solid color so we don't depend on remote settings wallpaper data
[
"browser.newtabpage.activity-stream.newtabWallpapers.wallpaper",
"solid-color-picker-#aabbcc",
]
);
},
test: async function test_render_customizeMenuWallpaper() {
const WALLPAPERS_ENABLED_PREF =
"browser.newtabpage.activity-stream.newtabWallpapers.enabled";
function isWallpaperApplied() {
return (
content.document.body.classList.contains("lightWallpaper") ||
content.document.body.classList.contains("darkWallpaper")
);
}
await ContentTaskUtils.waitForCondition(
() => content.document.querySelector(".personalize-button"),
"Wait for prefs button to load on the newtab page"
);
Assert.ok(
!Services.prefs.getBoolPref(WALLPAPERS_ENABLED_PREF),
"Wallpapers pref defaults to off"
);
Assert.ok(
!isWallpaperApplied(),
"Wallpaper is not applied when pref is off"
);
let customizeButton = content.document.querySelector(".personalize-button");
customizeButton.click();
await ContentTaskUtils.waitForCondition(
() => content.document.querySelector("#wallpapers-toggle"),
"Wallpapers toggle should be present"
);
let wallpapersSwitch = Cu.waiveXrays(
content.document.querySelector("#wallpapers-toggle")
);
Assert.ok(
!Services.prefs.getBoolPref(WALLPAPERS_ENABLED_PREF),
"Wallpapers pref is still off before clicking toggle"
);
Assert.ok(!isWallpaperApplied(), "Wallpaper is still not applied");
let wallpaperAppliedPromise = ContentTaskUtils.waitForCondition(
() => isWallpaperApplied(),
"Wallpaper should be applied after toggle"
);
wallpapersSwitch.click();
await wallpaperAppliedPromise;
Assert.ok(
isWallpaperApplied(),
"Wallpaper is applied after enabling toggle"
);
Assert.ok(
Services.prefs.getBoolPref(WALLPAPERS_ENABLED_PREF),
"Wallpapers pref is on after enabling toggle"
);
},
});
test_newtab({
test: async function test_open_close_customizeMenu() {
const EventUtils = ContentTaskUtils.getEventUtils(content);
browser/extensions/newtab/test/jest/content-src/components/CustomizeMenu/ContentSection.test.jsx
+1
View File
@@ -18,6 +18,7 @@ const DEFAULT_PROPS = {
widgetsMaximized: false,
widgetsMayBeMaximized: false,
},
wallpapersSystemEnabled: false,
wallpapersEnabled: false,
activeWallpaper: null,
pocketRegion: false,
browser/extensions/newtab/test/jest/content-src/components/CustomizeMenu/CustomizeMenu.test.jsx
+1
View File
@@ -22,6 +22,7 @@ const DEFAULT_PROPS = {
widgetsMaximized: false,
widgetsMayBeMaximized: false,
},
wallpapersSystemEnabled: false,
wallpapersEnabled: false,
activeWallpaper: null,
pocketRegion: false,
browser/extensions/newtab/test/jest/content-src/components/WallpaperCategories/WallpaperCategories.test.jsx
+29
View File
@@ -52,6 +52,31 @@ describe("<WallpaperCategories>", () => {
"newtabWallpapers.initialWallpaper",
""
);
expect(DEFAULT_PROPS.setPref).toHaveBeenCalledWith(
"newtabWallpapers.enabled",
true
);
});
it("should not render the reset button when Nova is enabled", () => {
const novaProps = {
...DEFAULT_PROPS,
Prefs: {
values: {
...DEFAULT_PROPS.Prefs.values,
"nova.enabled": true,
},
},
};
const { container } = render(<WallpaperCategories {...novaProps} />);
expect(
container.querySelector(".wallpapers-reset")
).not.toBeInTheDocument();
});
it("should render the reset button when Nova is disabled", () => {
const { container } = render(<WallpaperCategories {...DEFAULT_PROPS} />);
expect(container.querySelector(".wallpapers-reset")).toBeInTheDocument();
});
it("should clear initialWallpaper when a custom colour is set", () => {
@@ -70,5 +95,9 @@ describe("<WallpaperCategories>", () => {
"newtabWallpapers.initialWallpaper",
""
);
expect(DEFAULT_PROPS.setPref).toHaveBeenCalledWith(
"newtabWallpapers.enabled",
true
);
});
});
browser/extensions/newtab/test/unit/content-src/components/Base.test.jsx
+162
View File
@@ -192,6 +192,168 @@ describe("<BaseContent>", () => {
});
});
describe("<BaseContent> wallpaper update logic", () => {
const DOCUMENT_STUB = {
visibilityState: "visible",
addEventListener: sinon.stub(),
removeEventListener: sinon.stub(),
};
const makeWallpaperProps = (prefsOverride = {}) => ({
store: { getState: () => {} },
App: { initialized: true, isForStartupCache: { Wallpaper: false } },
Prefs: {
values: {
"newtabWallpapers.system.enabled": true,
"newtabWallpapers.enabled": true,
"newtabWallpapers.wallpaper": "beach",
"newtabWallpapers.initialWallpaper": "",
"newtabWallpapers.customWallpaper.theme": "",
"nova.enabled": false,
...prefsOverride,
},
},
Sections: [],
DiscoveryStream: { config: { enabled: false }, spocs: {} },
Wallpapers: { wallpaperList: [], uploadedWallpaper: null },
dispatch: () => {},
document: DOCUMENT_STUB,
});
it("should call updateWallpaper when wallpaper is just enabled (wasWallpaperActive false, isWallpaperActive true)", () => {
const props = makeWallpaperProps();
const wrapper = shallow(<BaseContent {...props} />);
const instance = wrapper.instance();
const updateSpy = sinon.spy(instance, "updateWallpaper");
const prevProps = {
...props,
Prefs: {
values: {
...props.Prefs.values,
"newtabWallpapers.system.enabled": false,
},
},
};
instance.componentDidUpdate(prevProps);
assert.calledOnce(updateSpy);
});
it("should call updateWallpaper when wallpaper is just disabled (wasWallpaperActive true, isWallpaperActive false)", () => {
const props = makeWallpaperProps({
"newtabWallpapers.system.enabled": false,
});
const wrapper = shallow(<BaseContent {...props} />);
const instance = wrapper.instance();
const updateSpy = sinon.spy(instance, "updateWallpaper");
const prevProps = {
...props,
Prefs: {
values: {
...props.Prefs.values,
"newtabWallpapers.system.enabled": true,
},
},
};
instance.componentDidUpdate(prevProps);
assert.calledOnce(updateSpy);
});
it("should call updateWallpaper when the selected wallpaper changes", () => {
const props = makeWallpaperProps();
const wrapper = shallow(<BaseContent {...props} />);
const instance = wrapper.instance();
const updateSpy = sinon.spy(instance, "updateWallpaper");
const prevProps = {
...props,
Prefs: {
values: {
...props.Prefs.values,
"newtabWallpapers.wallpaper": "mountains",
},
},
};
instance.componentDidUpdate(prevProps);
assert.calledOnce(updateSpy);
});
it("should not call updateWallpaper when wallpaper is active but nothing changed", () => {
const props = makeWallpaperProps();
const wrapper = shallow(<BaseContent {...props} />);
const instance = wrapper.instance();
const updateSpy = sinon.spy(instance, "updateWallpaper");
instance.componentDidUpdate(props);
assert.notCalled(updateSpy);
});
it("should call updateWallpaper when uploadedWallpaper changes", () => {
const props = makeWallpaperProps();
const wrapper = shallow(<BaseContent {...props} />);
const instance = wrapper.instance();
const updateSpy = sinon.spy(instance, "updateWallpaper");
const prevProps = {
...props,
Wallpapers: { wallpaperList: [], uploadedWallpaper: "old-url" },
};
instance.componentDidUpdate(prevProps);
assert.calledOnce(updateSpy);
});
it("should call updateWallpaper with Nova when both system and user prefs are enabled", () => {
const props = makeWallpaperProps({ "nova.enabled": true });
const wrapper = shallow(<BaseContent {...props} />);
const instance = wrapper.instance();
const updateSpy = sinon.spy(instance, "updateWallpaper");
const prevProps = {
...props,
Prefs: {
values: {
...props.Prefs.values,
"nova.enabled": true,
"newtabWallpapers.wallpaper": "old-wallpaper",
},
},
};
instance.componentDidUpdate(prevProps);
assert.calledOnce(updateSpy);
});
it("should not call updateWallpaper with Nova when user pref is disabled even if system pref is on", () => {
const props = makeWallpaperProps({
"nova.enabled": true,
"newtabWallpapers.enabled": false,
});
const wrapper = shallow(<BaseContent {...props} />);
const instance = wrapper.instance();
const updateSpy = sinon.spy(instance, "updateWallpaper");
const prevProps = {
...props,
Prefs: {
values: {
...props.Prefs.values,
"nova.enabled": true,
"newtabWallpapers.enabled": false,
"newtabWallpapers.wallpaper": "old-wallpaper",
},
},
};
instance.componentDidUpdate(prevProps);
assert.notCalled(updateSpy);
});
});
function makeASRouterMessages({ position, isVisible = true } = {}) {
return {
isVisible,
browser/extensions/newtab/test/unit/content-src/components/CustomizeMenu/ContentSection.test.jsx
+59 -10
View File
@@ -12,6 +12,7 @@ const DEFAULT_PROPS = {
mayHaveWeather: true,
mayHaveTimerWidget: false,
mayHaveListsWidget: false,
wallpapersSystemEnabled: false,
wallpapersEnabled: false,
activeWallpaper: null,
exitEventFired: false,
@@ -410,6 +411,7 @@ describe("ContentSection", () => {
const NOVA_PROPS = {
novaEnabled: true,
wallpapersSystemEnabled: true,
toggleWidgetsManagementPanel: sinon.stub(),
showWidgetsManagementPanel: false,
onSubpanelToggle: sinon.stub(),
@@ -417,7 +419,7 @@ describe("ContentSection", () => {
it("renders the wallpaper toggle", () => {
wrapper = mount(
<WrapWithProvider>
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
{...DEFAULT_PROPS}
{...NOVA_PROPS}
@@ -428,7 +430,20 @@ describe("ContentSection", () => {
assert.isTrue(wrapper.find("#wallpapers-toggle").exists());
});
it("shows WallpaperCategories when the wallpaper toggle is on", () => {
it("shows WallpaperCategories regardless of toggle state", () => {
wrapper = mount(
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
{...DEFAULT_PROPS}
{...NOVA_PROPS}
wallpapersEnabled={false}
/>
</WrapWithProvider>
);
assert.isTrue(wrapper.find(".category-list").exists());
});
it("sets newtabWallpapers.enabled to false when the wallpaper toggle is turned off", () => {
wrapper = mount(
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
@@ -438,12 +453,29 @@ describe("ContentSection", () => {
/>
</WrapWithProvider>
);
assert.isTrue(wrapper.find(".category-list").exists());
wrapper
.find(ContentSection)
.instance()
.onPreferenceSelect({
target: {
nodeName: "MOZ-TOGGLE",
pressed: false,
dataset: {
preference: "newtabWallpapers.enabled",
eventSource: "WALLPAPERS",
},
},
});
assert.calledWith(
DEFAULT_PROPS.setPref,
"newtabWallpapers.enabled",
false
);
});
it("hides WallpaperCategories when the wallpaper toggle is off", () => {
it("sets newtabWallpapers.enabled to true when the wallpaper toggle is turned on", () => {
wrapper = mount(
<WrapWithProvider>
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
{...DEFAULT_PROPS}
{...NOVA_PROPS}
@@ -451,13 +483,30 @@ describe("ContentSection", () => {
/>
</WrapWithProvider>
);
assert.isFalse(wrapper.find(".category-list").exists());
wrapper
.find(ContentSection)
.instance()
.onPreferenceSelect({
target: {
nodeName: "MOZ-TOGGLE",
pressed: true,
dataset: {
preference: "newtabWallpapers.enabled",
eventSource: "WALLPAPERS",
},
},
});
assert.calledWith(
DEFAULT_PROPS.setPref,
"newtabWallpapers.enabled",
true
);
});
// @nova-cleanup(remove-conditional): Remove the `.widgets-section` assertion once the novaEnabled condition is removed
it("renders WidgetsManagementPanel instead of .widgets-section when novaEnabled and mayHaveWidgets are true", () => {
wrapper = mount(
<WrapWithProvider>
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
{...DEFAULT_PROPS}
{...NOVA_PROPS}
@@ -472,7 +521,7 @@ describe("ContentSection", () => {
describe("widgets system toggle", () => {
it("renders the widgets system toggle in ContentSection", () => {
wrapper = mount(
<WrapWithProvider>
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
{...DEFAULT_PROPS}
{...NOVA_PROPS}
@@ -486,7 +535,7 @@ describe("ContentSection", () => {
it("sets widgets-system-toggle pressed when widgetsEnabled is true", () => {
wrapper = mount(
<WrapWithProvider>
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
{...DEFAULT_PROPS}
{...NOVA_PROPS}
@@ -500,7 +549,7 @@ describe("ContentSection", () => {
it("sets widgets-system-toggle unpressed when widgetsEnabled is false", () => {
wrapper = mount(
<WrapWithProvider>
<WrapWithProvider state={WALLPAPER_STATE}>
<ContentSection
{...DEFAULT_PROPS}
{...NOVA_PROPS}
browser/extensions/newtab/test/unit/content-src/components/CustomizeMenu/CustomizeMenu.test.jsx
+2
View File
@@ -127,6 +127,7 @@ describe("<CustomizeMenu>", () => {
mayHaveWidgets: true,
mayHaveTimerWidget: true,
mayHaveListsWidget: true,
wallpapersSystemEnabled: true,
wallpapersEnabled: true,
enabledWidgets: { timerEnabled: true, listsEnabled: true },
};
@@ -141,6 +142,7 @@ describe("<CustomizeMenu>", () => {
assert.strictEqual(child.prop("mayHaveWidgets"), true);
assert.strictEqual(child.prop("mayHaveTimerWidget"), true);
assert.strictEqual(child.prop("mayHaveListsWidget"), true);
assert.strictEqual(child.prop("wallpapersSystemEnabled"), true);
assert.strictEqual(child.prop("wallpapersEnabled"), true);
assert.deepEqual(child.prop("enabledWidgets"), {
timerEnabled: true,
browser/extensions/newtab/test/xpcshell/test_AboutHomeStartupCacheWorker.js
+1 -1
View File
@@ -72,7 +72,7 @@ add_setup(async function () {
""
);
Services.prefs.setBoolPref(
"browser.newtabpage.activity-stream.newtabWallpapers.enabled",
"browser.newtabpage.activity-stream.newtabWallpapers.system.enabled",
false
);
browser/extensions/newtab/test/xpcshell/test_WallpaperFeed.js
+13 -13
View File
@@ -12,8 +12,8 @@ ChromeUtils.defineESModuleGetters(this, {
WallpaperFeed: "resource://newtab/lib/Wallpapers/WallpaperFeed.sys.mjs",
});
const PREF_WALLPAPERS_ENABLED =
"browser.newtabpage.activity-stream.newtabWallpapers.enabled";
const PREF_SYSTEM_WALLPAPERS_ENABLED =
"browser.newtabpage.activity-stream.newtabWallpapers.system.enabled";
const PREF_WALLPAPERS_CUSTOM_WALLPAPER_UUID =
"browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.uuid";
@@ -45,7 +45,7 @@ add_task(async function test_construction() {
add_task(async function test_onAction_INIT() {
let sandbox = sinon.createSandbox();
let feed = new WallpaperFeed();
Services.prefs.setBoolPref(PREF_WALLPAPERS_ENABLED, true);
Services.prefs.setBoolPref(PREF_SYSTEM_WALLPAPERS_ENABLED, true);
const attachment = {
attachment: {
location: "attachment",
@@ -95,27 +95,27 @@ add_task(async function test_onAction_INIT() {
})
);
Services.prefs.clearUserPref(PREF_WALLPAPERS_ENABLED);
Services.prefs.clearUserPref(PREF_SYSTEM_WALLPAPERS_ENABLED);
sandbox.restore();
});
add_task(async function test_onAction_PREF_CHANGED() {
let sandbox = sinon.createSandbox();
let feed = new WallpaperFeed();
Services.prefs.setBoolPref(PREF_WALLPAPERS_ENABLED, true);
Services.prefs.setBoolPref(PREF_SYSTEM_WALLPAPERS_ENABLED, true);
sandbox.stub(feed, "wallpaperSetup").returns();
info("WallpaperFeed.onAction PREF_CHANGED should call wallpaperSetup");
feed.onAction({
type: actionTypes.PREF_CHANGED,
data: { name: "newtabWallpapers.enabled" },
data: { name: "newtabWallpapers.system.enabled" },
});
Assert.ok(feed.wallpaperSetup.calledOnce);
Assert.ok(feed.wallpaperSetup.calledWith(false));
Services.prefs.clearUserPref(PREF_WALLPAPERS_ENABLED);
Services.prefs.clearUserPref(PREF_SYSTEM_WALLPAPERS_ENABLED);
sandbox.restore();
});
@@ -124,7 +124,7 @@ add_task(async function test_onAction_WALLPAPER_UPLOAD() {
let feed = new WallpaperFeed();
const fileData = {};
Services.prefs.setBoolPref(PREF_WALLPAPERS_ENABLED, true);
Services.prefs.setBoolPref(PREF_SYSTEM_WALLPAPERS_ENABLED, true);
sandbox.stub(feed, "wallpaperUpload").returns();
info("WallpaperFeed.onAction WALLPAPER_UPLOAD should call wallpaperUpload");
@@ -137,7 +137,7 @@ add_task(async function test_onAction_WALLPAPER_UPLOAD() {
Assert.ok(feed.wallpaperUpload.calledOnce);
Assert.ok(feed.wallpaperUpload.calledWith(fileData));
Services.prefs.clearUserPref(PREF_WALLPAPERS_ENABLED);
Services.prefs.clearUserPref(PREF_SYSTEM_WALLPAPERS_ENABLED);
sandbox.restore();
});
@@ -205,7 +205,7 @@ add_task(async function test_Wallpaper_Upload() {
add_task(async function test_updateWallpapers_category_order() {
let sandbox = sinon.createSandbox();
let feed = new WallpaperFeed();
Services.prefs.setBoolPref(PREF_WALLPAPERS_ENABLED, true);
Services.prefs.setBoolPref(PREF_SYSTEM_WALLPAPERS_ENABLED, true);
Services.prefs.setBoolPref(
"browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.enabled",
true
@@ -249,7 +249,7 @@ add_task(async function test_updateWallpapers_category_order() {
"solid-colors",
]);
Services.prefs.clearUserPref(PREF_WALLPAPERS_ENABLED);
Services.prefs.clearUserPref(PREF_SYSTEM_WALLPAPERS_ENABLED);
Services.prefs.clearUserPref(
"browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.enabled"
);
@@ -259,7 +259,7 @@ add_task(async function test_updateWallpapers_category_order() {
add_task(async function test_onAction_PREF_CHANGED_customColor() {
let sandbox = sinon.createSandbox();
let feed = new WallpaperFeed();
Services.prefs.setBoolPref(PREF_WALLPAPERS_ENABLED, true);
Services.prefs.setBoolPref(PREF_SYSTEM_WALLPAPERS_ENABLED, true);
sandbox.stub(feed, "wallpaperTeardown").returns();
sandbox.stub(feed, "wallpaperSetup").returns();
@@ -286,7 +286,7 @@ add_task(async function test_onAction_PREF_CHANGED_customColor() {
"wallpaperSetup should be called with isStartup=false"
);
Services.prefs.clearUserPref(PREF_WALLPAPERS_ENABLED);
Services.prefs.clearUserPref(PREF_SYSTEM_WALLPAPERS_ENABLED);
sandbox.restore();
});
testing/profiles/common/user.js
+1
View File
@@ -76,6 +76,7 @@ user_pref("browser.topsites.contile.enabled", false);
// Don't pull weather data from the network
user_pref("browser.newtabpage.activity-stream.system.showWeather", false);
// Don't pull wallpaper content from the network
user_pref("browser.newtabpage.activity-stream.newtabWallpapers.system.enabled", false);
user_pref("browser.newtabpage.activity-stream.newtabWallpapers.enabled", false);
// Don't pull sponsored Top Sites content from the network
user_pref("browser.newtabpage.activity-stream.showSponsoredTopSites", false);