Bug 1951788 – Retrieve custom wallpaper from profile and set as background-image. r=home-newtab-reviewers,nbarrett

Differential Revision: https://phabricator.services.mozilla.com/D240957

browser/app/profile/firefox.js

@@ -1841,6 +1841,10 @@ pref("browser.newtabpage.activity-stream.newtabWallpapers.v2.enabled", true);
 pref("browser.newtabpage.activity-stream.newtabWallpapers.customColor.enabled", false);
 pref("browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.enabled", false);
 
+// Utility preferences for custom wallpaper upload
+pref("browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.uuid", "");
+pref("browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.fileSize", 0);
+
 // Current new tab page background images.
 pref("browser.newtabpage.activity-stream.newtabWallpapers.wallpaper", "");
 

browser/extensions/newtab/content-src/components/Base/Base.jsx

@@ -384,9 +384,29 @@ export class BaseContent extends React.PureComponent {
 
   async updateWallpaper() {
     const prefs = this.props.Prefs.values;
-
     const selectedWallpaper = prefs["newtabWallpapers.wallpaper"];
-    const { wallpaperList } = this.props.Wallpapers;
+    const { wallpaperList, uploadedWallpaper } = this.props.Wallpapers;
+
+    if (uploadedWallpaper) {
+      // revoke ObjectURL to prevent memory leaks
+      if (this.uploadedWallpaperUrl) {
+        URL.revokeObjectURL(this.uploadedWallpaperUrl);
+      }
+
+      const uploadedWallpaperUrl = URL.createObjectURL(uploadedWallpaper);
+
+      global.document?.body.style.setProperty(
+        "--newtab-wallpaper",
+        `url(${uploadedWallpaperUrl})`
+      );
+
+      global.document?.body.style.setProperty(
+        "--newtab-wallpaper-color",
+        "transparent"
+      );
+
+      return;
+    }
 
     if (wallpaperList) {
       let wallpaper = wallpaperList.find(wp => wp.title === selectedWallpaper);

browser/extensions/newtab/data/content/activity-stream.bundle.js

@@ -13550,8 +13550,19 @@ class BaseContent extends (external_React_default()).PureComponent {
     const prefs = this.props.Prefs.values;
     const selectedWallpaper = prefs["newtabWallpapers.wallpaper"];
     const {
-      wallpaperList
+      wallpaperList,
+      uploadedWallpaper
     } = this.props.Wallpapers;
+    if (uploadedWallpaper) {
+      // revoke ObjectURL to prevent memory leaks
+      if (this.uploadedWallpaperUrl) {
+        URL.revokeObjectURL(this.uploadedWallpaperUrl);
+      }
+      const uploadedWallpaperUrl = URL.createObjectURL(uploadedWallpaper);
+      __webpack_require__.g.document?.body.style.setProperty("--newtab-wallpaper", `url(${uploadedWallpaperUrl})`);
+      __webpack_require__.g.document?.body.style.setProperty("--newtab-wallpaper-color", "transparent");
+      return;
+    }
     if (wallpaperList) {
       let wallpaper = wallpaperList.find(wp => wp.title === selectedWallpaper);
       let lightWallpaper = {};

browser/extensions/newtab/lib/WallpaperFeed.sys.mjs

@@ -28,6 +28,9 @@ const WALLPAPER_REMOTE_SETTINGS_COLLECTION_V2 = "newtab-wallpapers-v2";
 const PREF_WALLPAPERS_CUSTOM_WALLPAPER_ENABLED =
   "browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.enabled";
 
+const PREF_WALLPAPERS_CUSTOM_WALLPAPER_UUID =
+  "browser.newtabpage.activity-stream.newtabWallpapers.customWallpaper.uuid";
+
 export class WallpaperFeed {
   constructor() {
     this.loaded = false;
@@ -93,6 +96,37 @@ export class WallpaperFeed {
   }
 
   async updateWallpapers(isStartup = false) {
+    let uuid = Services.prefs.getStringPref(
+      PREF_WALLPAPERS_CUSTOM_WALLPAPER_UUID,
+      ""
+    );
+
+    if (uuid) {
+      const wallpaperDir = PathUtils.join(PathUtils.profileDir, "wallpaper");
+      const filePath = PathUtils.join(wallpaperDir, uuid);
+
+      try {
+        let testFile = await IOUtils.getFile(filePath);
+
+        if (!testFile) {
+          throw new Error("File does not exist");
+        }
+
+        let passableFile = await File.createFromNsIFile(testFile);
+
+        this.store.dispatch(
+          ac.BroadcastToContent({
+            type: at.WALLPAPERS_CUSTOM_SET,
+            data: passableFile,
+          })
+        );
+      } catch (error) {
+        console.warn(`Wallpaper file not found: ${error.message}`);
+        Services.prefs.clearUserPref(PREF_WALLPAPERS_CUSTOM_WALLPAPER_UUID);
+        return;
+      }
+    }
+
     // retrieving all records in collection
     const records = await this.wallpaperClient.get();
     if (!records?.length) {
@@ -195,7 +229,12 @@ export class WallpaperFeed {
 
       // create wallpaper directory if it does not exist
       await IOUtils.makeDirectory(wallpaperDir, { ignoreExisting: true });
+
       let uuid = Services.uuid.generateUUID().toString().slice(1, -1);
+      this.store.dispatch(
+        ac.SetPref("newtabWallpapers.customWallpaper.uuid", uuid)
+      );
+
       const filePath = PathUtils.join(wallpaperDir, uuid);
 
       // convert to Uint8Array for IOUtils
@@ -205,9 +244,9 @@ export class WallpaperFeed {
       await IOUtils.write(filePath, uint8Array, { tmpPath: `${filePath}.tmp` });
 
       this.store.dispatch(
-        ac.AlsoToPreloaded({
+        ac.BroadcastToContent({
           type: at.WALLPAPERS_CUSTOM_SET,
-          data: filePath,
+          data: file,
         })
       );
 
@@ -251,6 +290,7 @@ export class WallpaperFeed {
         break;
       case at.WALLPAPER_UPLOAD:
         this.wallpaperUpload(action.data);
+        break;
     }
   }
 }