Add auto sync custom wallpaper support

Sync wallpaper in storage onchange events, will also upload wallpapers to server when user set custom wallpaper

BUG=416566

Review URL: https://codereview.chromium.org/597503007

Cr-Commit-Position: refs/heads/master@{#297876}

chrome/browser/chromeos/extensions/wallpaper_private_api.cc

@@ -286,6 +286,7 @@ bool WallpaperPrivateGetStringsFunction::RunSync() {
     dict->SetString("wallpaperAppName", app_name);
 
   dict->SetBoolean("isOEMDefaultWallpaper", IsOEMDefaultWallpaper());
+  dict->SetBoolean("isExperimental", false);
   dict->SetString("canceledWallpaper",
                   wallpaper_api_util::kCancelWallpaperMessage);
   return true;

chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js

@@ -236,7 +236,29 @@ chrome.app.runtime.onLaunched.addListener(function() {
   });
 });
 
+chrome.syncFileSystem.onFileStatusChanged.addListener(function(detail) {
+  WallpaperUtil.enabledExperimentalFeatureCallback(function() {
+    if (detail.status == 'synced' &&
+        detail.direction == 'remote_to_local') {
+      if (detail.action == 'added') {
+        Constants.WallpaperLocalStorage.get(
+            Constants.AccessLocalWallpaperInfoKey,
+            function(items) {
+              var localData = items[Constants.AccessLocalWallpaperInfoKey];
+              if (localData && localData.url == detail.fileEntry.name &&
+                  localData.source == Constants.WallpaperSourceEnum.Custom)
+                WallpaperUtil.setSyncCustomWallpaper(localData.url,
+                                                     localData.layout);
+           });
+      }
+    }
+  });
+});
+
 chrome.storage.onChanged.addListener(function(changes, namespace) {
+  WallpaperUtil.enabledExperimentalFeatureCallback(function() {
+    WallpaperUtil.requestSyncFs(function() {});
+  });
   if (changes[Constants.AccessSurpriseMeEnabledKey]) {
     if (changes[Constants.AccessSurpriseMeEnabledKey].newValue) {
       SurpriseWallpaper.getInstance().next();
@@ -264,6 +286,8 @@ chrome.storage.onChanged.addListener(function(changes, namespace) {
           // set another wallpaper before retry alarm invoked.
           WallpaperUtil.setOnlineWallpaper(newValue.url, newValue.layout,
             function() {}, function() {});
+        } else if (newValue.source == Constants.WallpaperSourceEnum.Custom) {
+          WallpaperUtil.setSyncCustomWallpaper(newValue.url, newValue.layout);
         }
         WallpaperUtil.saveToStorage(Constants.AccessLocalWallpaperInfoKey,
                                     newValue, false);

chrome/browser/resources/chromeos/wallpaper_manager/js/util.js

@@ -2,7 +2,175 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var WallpaperUtil = {};
+var WallpaperUtil = {
+  strings: null,  // Object that contains all the flags
+  syncFs: null    // syncFileSystem handler
+};
+
+/**
+ * Run experimental features.
+ * @param {function} callback The callback will be executed if 'isExperimental'
+ *     flag is set to true.
+ */
+WallpaperUtil.enabledExperimentalFeatureCallback = function(callback) {
+  if (WallpaperUtil.strings) {
+    if (WallpaperUtil.strings.isExperimental)
+      callback();
+  } else {
+    chrome.wallpaperPrivate.getStrings(function(strings) {
+      WallpaperUtil.strings = strings;
+      if (WallpaperUtil.strings.isExperimental)
+        callback();
+    });
+  }
+};
+
+/**
+ * Request a syncFileSystem handle and run callback on it.
+ * @param {function} callback The callback to execute after syncFileSystem
+ *     handler is available.
+ */
+WallpaperUtil.requestSyncFs = function(callback) {
+  if (WallpaperUtil.syncFs) {
+    callback(WallpaperUtil.syncFs);
+  } else {
+    chrome.syncFileSystem.requestFileSystem(function(fs) {
+      WallpaperUtil.syncFs = fs;
+      callback(WallpaperUtil.syncFs);
+    });
+  }
+};
+
+/**
+ * Print error to console.error.
+ * @param {Event} e The error will be printed to console.error.
+ */
+// TODO(ranj): Handle different errors differently.
+WallpaperUtil.onFileSystemError = function(e) {
+  console.error(e);
+};
+
+/**
+ * Write jpeg/png file data into file entry.
+ * @param {FileEntry} fileEntry The file entry that going to be writen.
+ * @param {ArrayBuffer} wallpaperData Data for image file.
+ * @param {function=} writeCallback The callback that will be executed after
+ *     writing data.
+ */
+WallpaperUtil.writeFile = function(fileEntry, wallpaperData, writeCallback) {
+  var uint8arr = new Uint8Array(wallpaperData);
+  fileEntry.createWriter(function(fileWriter) {
+    var blob = new Blob([new Int8Array(wallpaperData)]);
+    fileWriter.write(blob);
+    if (writeCallback)
+      writeCallback();
+  }, WallpaperUtil.onFileSystemError);
+};
+
+/**
+ * Write jpeg/png file data into syncFileSystem.
+ * @param {string} wallpaperFilename The filename that going to be writen.
+ * @param {ArrayBuffer} wallpaperData Data for image file.
+ * @param {function} onSuccess The callback that will be executed after.
+ *     writing data
+ */
+WallpaperUtil.storePictureToSyncFileSystem = function(
+    wallpaperFilename, wallpaperData, onSuccess) {
+  var callback = function(fs) {
+    fs.root.getFile(wallpaperFilename,
+                    {create: false},
+                    function() { onSuccess();},  // already exists
+                    function(e) {  // not exists, create
+                      fs.root.getFile(wallpaperFilename, {create: true},
+                                      function(fe) {
+                                        WallpaperUtil.writeFile(
+                                            fe, wallpaperData, onSuccess);
+                                      },
+                                      WallpaperUtil.onFileSystemError);
+                    });
+  };
+  WallpaperUtil.requestSyncFs(callback);
+};
+
+/**
+ * Stores jpeg/png wallpaper into |localDir| in local file system.
+ * @param {string} wallpaperFilename File name of wallpaper image.
+ * @param {ArrayBuffer} wallpaperData The wallpaper data.
+ * @param {string} saveDir The path to store wallpaper in local file system.
+ */
+WallpaperUtil.storePictureToLocal = function(wallpaperFilename, wallpaperData,
+    saveDir) {
+  if (!wallpaperData) {
+    console.error('wallpaperData is null');
+    return;
+  }
+  var getDirSuccess = function(dirEntry) {
+    dirEntry.getFile(wallpaperFilename,
+                    {create: false},
+                    function() {},  // already exists
+                    function(e) {   // not exists, create
+                    dirEntry.getFile(wallpaperFilename, {create: true},
+                                    function(fe) {
+                                      WallpaperUtil.writeFile(fe,
+                                                              wallpaperData);
+                                    },
+                                    WallpaperUtil.onFileSystemError);
+                    });
+  };
+  window.webkitRequestFileSystem(window.PERSISTENT, 1024 * 1024 * 100,
+                                 function(fs) {
+                                   fs.root.getDirectory(
+                                       saveDir, {create: true}, getDirSuccess,
+                                       WallpaperUtil.onFileSystemError);
+                                 },
+                                 WallpaperUtil.onFileSystemError);
+};
+
+/**
+ * Sets wallpaper from synced file system.
+ * @param {string} wallpaperFilename File name used to set wallpaper.
+ * @param {string} wallpaperLayout Layout used to set wallpaper.
+ * @param {function=} onSuccess Callback if set successfully.
+ */
+WallpaperUtil.setSyncCustomWallpaper = function(
+    wallpaperFilename, wallpaperLayout, onSuccess) {
+  var setWallpaperFromSyncCallback = function(fs) {
+    if (!wallpaperFilename) {
+      console.error('wallpaperFilename is not provided.');
+      return;
+    }
+    if (!wallpaperLayout)
+      wallpaperLayout = 'CENTER_CROPPED';
+    fs.root.getFile(wallpaperFilename, {create: false}, function(fileEntry) {
+      fileEntry.file(function(file) {
+        var reader = new FileReader();
+        reader.onloadend = function() {
+          chrome.wallpaperPrivate.setCustomWallpaper(
+              reader.result,
+              wallpaperLayout,
+              true,
+              wallpaperFilename,
+              function(thumbnailData) {
+                // TODO(ranj): Ignore 'canceledWallpaper' error.
+                if (chrome.runtime.lastError) {
+                  console.error(chrome.runtime.lastError.message);
+                  return;
+                }
+                WallpaperUtil.storePictureToLocal(wallpaperFilename,
+                                                  reader.result, 'original');
+                WallpaperUtil.storePictureToLocal(wallpaperFilename,
+                                                  reader.result, 'thumbnail');
+                if (onSuccess)
+                  onSuccess();
+              });
+        };
+        reader.readAsArrayBuffer(file);
+      }, WallpaperUtil.onFileSystemError);
+    }, function(e) {}  // fail to read file, expected due to download delay
+    );
+  };
+  WallpaperUtil.requestSyncFs(setWallpaperFromSyncCallback);
+};
 
 /**
  * Saves value to local storage that associates with key.

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_manager.js

@@ -521,6 +521,13 @@ function WallpaperManager(dialogDom) {
                                         self.onWallpaperChanged_.bind(self,
                                             selectedItem, selectedItem.baseURL),
                                         errorHandler);
+                WallpaperUtil.enabledExperimentalFeatureCallback(function() {
+                  WallpaperUtil.storePictureToSyncFileSystem(
+                    selectedItem.baseURL,
+                    e.target.result,
+                    function() {}
+                  );
+                });
               });
             }, errorHandler);
           }, errorHandler);
@@ -833,7 +840,13 @@ function WallpaperManager(dialogDom) {
         self.wallpaperDirs_.getDirectory(WallpaperDirNameEnum.THUMBNAIL,
             success, errorHandler);
       };
-
+      var onCustomWallpaperSuccess = function(thumbnailData, wallpaperData) {
+        WallpaperUtil.enabledExperimentalFeatureCallback(function() {
+          WallpaperUtil.storePictureToSyncFileSystem(fileName, wallpaperData,
+                                             function() {});
+        });
+        saveThumbnail(thumbnailData);
+      };
       var success = function(dirEntry) {
         dirEntry.getFile(fileName, {create: true}, function(fileEntry) {
           fileEntry.createWriter(function(fileWriter) {
@@ -843,13 +856,15 @@ function WallpaperManager(dialogDom) {
               reader.addEventListener('error', errorHandler);
               reader.addEventListener('load', function(e) {
                 self.setCustomWallpaper(e.target.result, layout, true, fileName,
-                                        saveThumbnail, function() {
+                function(thumbnail) {
+                  onCustomWallpaperSuccess(thumbnail, e.target.result);
+                },
+                function() {
                   self.removeCustomWallpaper(fileName);
                   errorHandler();
                 });
               });
             });
-
             fileWriter.addEventListener('error', errorHandler);
             fileWriter.write(file);
           }, errorHandler);

chrome/browser/resources/chromeos/wallpaper_manager/manifest.json

@@ -18,7 +18,8 @@
     "unlimitedStorage",
     {"fileSystem": ["write"]},
     "wallpaperPrivate",
-    "https://storage.googleapis.com/"
+    "https://storage.googleapis.com/",
+    "syncFileSystem"
   ],
   "app": {
     "background": {