commit faea34479a0e3ef58751a6317a5f99636afab176 parent f6db3d1b91805f3d323d1f86b589c301e58f9e11 Author: Maxx Crawford <mcrawford@mozilla.com> Date: Thu, 4 Dec 2025 01:49:05 +0000 Bug 2003557 - Add support for background positioning in non-custom wallpapers r=home-newtab-reviewers,reemhamz Allow wallpapers to specify custom background-position values instead of always centering them. The background_position property from wallpaper records is now applied through a CSS variable --newtab-wallpaper-backgroundPosition, with a default of "center" for backward compatibility. Differential Revision: https://phabricator.services.mozilla.com/D274975 Diffstat:
7 files changed, 38 insertions(+), 5 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/Base/Base.jsx b/browser/extensions/newtab/content-src/components/Base/Base.jsx @@ -469,11 +469,15 @@ export class BaseContent extends React.PureComponent { let url = ""; let color = "transparent"; let newTheme = colorMode; + let backgroundPosition = "center"; // if no selected wallpaper fallback to browser/theme styles if (!selectedWallpaper) { global.document?.body.style.removeProperty("--newtab-wallpaper"); global.document?.body.style.removeProperty("--newtab-wallpaper-color"); + global.document?.body.style.removeProperty( + "--newtab-wallpaper-backgroundPosition" + ); global.document?.body.classList.remove("lightWallpaper", "darkWallpaper"); return; } @@ -482,6 +486,8 @@ export class BaseContent extends React.PureComponent { if (selectedWallpaper === "custom" && uploadedWallpaperUrl) { url = uploadedWallpaperUrl; color = "transparent"; + // Note: There is no method to set a specific background position for custom wallpapers + backgroundPosition = "center"; newTheme = uploadedWallpaperTheme || colorMode; } else if (wallpaperList) { const wallpaper = wallpaperList.find( @@ -498,6 +504,7 @@ export class BaseContent extends React.PureComponent { // standard wallpaper & solid colors } else if (selectedWallpaper) { url = wallpaper?.wallpaperUrl || ""; + backgroundPosition = wallpaper?.background_position || "center"; color = wallpaper?.solid_color || "transparent"; newTheme = wallpaper?.theme || colorMode; // if a solid color, determine if dark or light @@ -513,6 +520,10 @@ export class BaseContent extends React.PureComponent { `url(${url})` ); global.document?.body.style.setProperty( + "--newtab-wallpaper-backgroundPosition", + backgroundPosition + ); + global.document?.body.style.setProperty( "--newtab-wallpaper-color", color || "transparent" ); diff --git a/browser/extensions/newtab/content-src/components/WallpaperCategories/WallpaperCategories.jsx b/browser/extensions/newtab/content-src/components/WallpaperCategories/WallpaperCategories.jsx @@ -551,6 +551,8 @@ export class _WallpaperCategories extends React.PureComponent { let style = {}; if (thumbnail?.wallpaperUrl) { style.backgroundImage = `url(${thumbnail.wallpaperUrl})`; + style.backgroundPosition = + thumbnail.background_position || "center"; } else { style.backgroundColor = thumbnail?.solid_color || ""; } @@ -645,12 +647,21 @@ export class _WallpaperCategories extends React.PureComponent { <fieldset> {filteredWallpapers.map( ( - { title, theme, fluent_id, solid_color, wallpaperUrl }, + { + background_position, + fluent_id, + solid_color, + theme, + title, + wallpaperUrl, + }, index ) => { let style = {}; if (wallpaperUrl) { style.backgroundImage = `url(${wallpaperUrl})`; + style.backgroundPosition = + background_position || "center"; } else { style.backgroundColor = solid_color || ""; } diff --git a/browser/extensions/newtab/content-src/styles/activity-stream.scss b/browser/extensions/newtab/content-src/styles/activity-stream.scss @@ -34,7 +34,7 @@ body { // rules for HNT wallpapers background-repeat: no-repeat; background-size: cover; - background-position: center; + background-position: var(--newtab-wallpaper-backgroundPosition); background-attachment: fixed; background-image: var(--newtab-wallpaper, ''), diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -340,7 +340,7 @@ body { font-size: var(--font-size-root); background-repeat: no-repeat; background-size: cover; - background-position: center; + background-position: var(--newtab-wallpaper-backgroundPosition); background-attachment: fixed; background-image: var(--newtab-wallpaper, ""), linear-gradient(to right, var(--newtab-wallpaper-color, ""), var(--newtab-wallpaper-color, "")); } diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -14427,6 +14427,7 @@ class _WallpaperCategories extends (external_React_default()).PureComponent { let style = {}; if (thumbnail?.wallpaperUrl) { style.backgroundImage = `url(${thumbnail.wallpaperUrl})`; + style.backgroundPosition = thumbnail.background_position || "center"; } else { style.backgroundColor = thumbnail?.solid_color || ""; } @@ -14506,15 +14507,17 @@ class _WallpaperCategories extends (external_React_default()).PureComponent { role: "grid", "aria-label": "Wallpaper selection. Use arrow keys to navigate." }, /*#__PURE__*/external_React_default().createElement("fieldset", null, filteredWallpapers.map(({ - title, - theme, + background_position, fluent_id, solid_color, + theme, + title, wallpaperUrl }, index) => { let style = {}; if (wallpaperUrl) { style.backgroundImage = `url(${wallpaperUrl})`; + style.backgroundPosition = background_position || "center"; } else { style.backgroundColor = solid_color || ""; } @@ -16166,11 +16169,13 @@ class BaseContent extends (external_React_default()).PureComponent { let url = ""; let color = "transparent"; let newTheme = colorMode; + let backgroundPosition = "center"; // if no selected wallpaper fallback to browser/theme styles if (!selectedWallpaper) { __webpack_require__.g.document?.body.style.removeProperty("--newtab-wallpaper"); __webpack_require__.g.document?.body.style.removeProperty("--newtab-wallpaper-color"); + __webpack_require__.g.document?.body.style.removeProperty("--newtab-wallpaper-backgroundPosition"); __webpack_require__.g.document?.body.classList.remove("lightWallpaper", "darkWallpaper"); return; } @@ -16179,6 +16184,8 @@ class BaseContent extends (external_React_default()).PureComponent { if (selectedWallpaper === "custom" && uploadedWallpaperUrl) { url = uploadedWallpaperUrl; color = "transparent"; + // Note: There is no method to set a specific background position for custom wallpapers + backgroundPosition = "center"; newTheme = uploadedWallpaperTheme || colorMode; } else if (wallpaperList) { const wallpaper = wallpaperList.find(wp => wp.title === selectedWallpaper); @@ -16193,6 +16200,7 @@ class BaseContent extends (external_React_default()).PureComponent { // standard wallpaper & solid colors } else if (selectedWallpaper) { url = wallpaper?.wallpaperUrl || ""; + backgroundPosition = wallpaper?.background_position || "center"; color = wallpaper?.solid_color || "transparent"; newTheme = wallpaper?.theme || colorMode; // if a solid color, determine if dark or light @@ -16204,6 +16212,7 @@ class BaseContent extends (external_React_default()).PureComponent { } } __webpack_require__.g.document?.body.style.setProperty("--newtab-wallpaper", `url(${url})`); + __webpack_require__.g.document?.body.style.setProperty("--newtab-wallpaper-backgroundPosition", backgroundPosition); __webpack_require__.g.document?.body.style.setProperty("--newtab-wallpaper-color", color || "transparent"); __webpack_require__.g.document?.body.classList.remove("lightWallpaper", "darkWallpaper"); __webpack_require__.g.document?.body.classList.add(newTheme === "dark" ? "darkWallpaper" : "lightWallpaper"); diff --git a/browser/extensions/newtab/lib/Wallpapers/WallpaperFeed.sys.mjs b/browser/extensions/newtab/lib/Wallpapers/WallpaperFeed.sys.mjs @@ -178,6 +178,7 @@ export class WallpaperFeed { } : {}), category: record.category || "", + background_position: record.background_position || "center", }; }), ]; diff --git a/browser/extensions/newtab/test/xpcshell/test_WallpaperFeed.js b/browser/extensions/newtab/test/xpcshell/test_WallpaperFeed.js @@ -84,6 +84,7 @@ add_task(async function test_onAction_INIT() { ...attachment, wallpaperUrl: "http://localhost:8888/base_url/attachment", category: "", + background_position: "center", }, ], meta: {