commit a0f560f971b681e7a4f1ca9a918fa9102669c410
parent faea34479a0e3ef58751a6317a5f99636afab176
Author: Maxx Crawford <mcrawford@mozilla.com>
Date: Thu, 4 Dec 2025 01:49:05 +0000
Bug 2003934 - Add order feature to uploaded wallpapers r=home-newtab-reviewers,reemhamz
This patch adds support for an 'order' property on wallpapers that controls
their display order within categories. Wallpapers with a non-zero order value
are sorted in ascending order, while wallpapers with order=0 (unordered) appear
at the end. The ordering applies to both the wallpaper selection view and the
category thumbnail selection.
Differential Revision: https://phabricator.services.mozilla.com/D275010
Diffstat:
4 files changed, 46 insertions(+), 9 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/WallpaperCategories/WallpaperCategories.jsx b/browser/extensions/newtab/content-src/components/WallpaperCategories/WallpaperCategories.jsx
@@ -405,6 +405,23 @@ export class _WallpaperCategories extends React.PureComponent {
return 0.2125 * r + 0.7154 * g + 0.0721 * b <= 110;
}
+ sortWallpapersByOrder(wallpapers) {
+ return wallpapers.sort((a, b) => {
+ const aOrder = a.order || 0;
+ const bOrder = b.order || 0;
+ if (aOrder === 0 && bOrder === 0) {
+ return 0;
+ }
+ if (aOrder === 0) {
+ return 1;
+ }
+ if (bOrder === 0) {
+ return -1;
+ }
+ return aOrder - bOrder;
+ });
+ }
+
render() {
const prefs = this.props.Prefs.values;
const { wallpaperList, categories } = this.props.Wallpapers;
@@ -519,14 +536,15 @@ export class _WallpaperCategories extends React.PureComponent {
const filteredList = wallpaperList.filter(
wallpaper => wallpaper.category === category
);
+ const sortedList = this.sortWallpapersByOrder(filteredList);
const activeWallpaperObj =
activeWallpaper &&
- filteredList.find(wp => wp.title === activeWallpaper);
+ sortedList.find(wp => wp.title === activeWallpaper);
// Detect custom solid color
const isCustomSolidColor =
category === "solid-colors" &&
activeWallpaper.startsWith("solid-color-picker");
- const thumbnail = activeWallpaperObj || filteredList[0];
+ const thumbnail = activeWallpaperObj || sortedList[0];
let fluent_id;
switch (category) {
case "abstracts":
@@ -645,7 +663,7 @@ export class _WallpaperCategories extends React.PureComponent {
aria-label="Wallpaper selection. Use arrow keys to navigate."
>
<fieldset>
- {filteredWallpapers.map(
+ {this.sortWallpapersByOrder(filteredWallpapers).map(
(
{
background_position,
diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js
@@ -14299,6 +14299,22 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
isWallpaperColorDark([r, g, b]) {
return 0.2125 * r + 0.7154 * g + 0.0721 * b <= 110;
}
+ sortWallpapersByOrder(wallpapers) {
+ return wallpapers.sort((a, b) => {
+ const aOrder = a.order || 0;
+ const bOrder = b.order || 0;
+ if (aOrder === 0 && bOrder === 0) {
+ return 0;
+ }
+ if (aOrder === 0) {
+ return 1;
+ }
+ if (bOrder === 0) {
+ return -1;
+ }
+ return aOrder - bOrder;
+ });
+ }
render() {
const prefs = this.props.Prefs.values;
const {
@@ -14399,10 +14415,11 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
className: "category-list"
}, categories.map((category, index) => {
const filteredList = wallpaperList.filter(wallpaper => wallpaper.category === category);
- const activeWallpaperObj = activeWallpaper && filteredList.find(wp => wp.title === activeWallpaper);
+ const sortedList = this.sortWallpapersByOrder(filteredList);
+ const activeWallpaperObj = activeWallpaper && sortedList.find(wp => wp.title === activeWallpaper);
// Detect custom solid color
const isCustomSolidColor = category === "solid-colors" && activeWallpaper.startsWith("solid-color-picker");
- const thumbnail = activeWallpaperObj || filteredList[0];
+ const thumbnail = activeWallpaperObj || sortedList[0];
let fluent_id;
switch (category) {
case "abstracts":
@@ -14506,7 +14523,7 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
}), /*#__PURE__*/external_React_default().createElement("div", {
role: "grid",
"aria-label": "Wallpaper selection. Use arrow keys to navigate."
- }, /*#__PURE__*/external_React_default().createElement("fieldset", null, filteredWallpapers.map(({
+ }, /*#__PURE__*/external_React_default().createElement("fieldset", null, this.sortWallpapersByOrder(filteredWallpapers).map(({
background_position,
fluent_id,
solid_color,
diff --git a/browser/extensions/newtab/lib/Wallpapers/WallpaperFeed.sys.mjs b/browser/extensions/newtab/lib/Wallpapers/WallpaperFeed.sys.mjs
@@ -177,8 +177,9 @@ export class WallpaperFeed {
wallpaperUrl: `${baseAttachmentURL}${record.attachment.location}`,
}
: {}),
- category: record.category || "",
background_position: record.background_position || "center",
+ category: record.category || "",
+ order: record.order || 0,
};
}),
];
diff --git a/browser/extensions/newtab/test/xpcshell/test_WallpaperFeed.js b/browser/extensions/newtab/test/xpcshell/test_WallpaperFeed.js
@@ -82,9 +82,10 @@ add_task(async function test_onAction_INIT() {
data: [
{
...attachment,
- wallpaperUrl: "http://localhost:8888/base_url/attachment",
- category: "",
background_position: "center",
+ category: "",
+ order: 0,
+ wallpaperUrl: "http://localhost:8888/base_url/attachment",
},
],
meta: {
