Merge pull request #10246 from mozsquib/camera-pick-ux

Bug 870726 - [Camera] Confirmation of successful Image pick for email attachments and wallpaper(cherry picked from commit 3434257)

Conflicts:
	apps/camera/index.html

apps/camera/index.html

@@ -6,7 +6,8 @@
     <title>Camera</title>
     <link rel="resource" type="application/l10n" href="locales/locales.ini" />
     <link rel="resource" type="application/l10n" href="/shared/locales/date.ini" />
-    <link type="text/css" rel="stylesheet" href="style/camera.css"/>
+    <link rel="stylesheet" type="text/css" href="style/camera.css">
+    <link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
 
     <script defer src="/shared/js/l10n.js"></script>
     <!-- The following scripts are lazy loaded but left here to ensure
@@ -40,6 +41,12 @@
       </div>
     </div>
 
+    <div id="confirmation" class="hidden">
+      <button id="retake-button" data-l10n-id="retake-button"></button>
+      <button id="select-button" class="recommend"
+              data-l10n-id="select-button"></button>
+    </div>
+
     <div id="overlay" class="hidden">
       <div id="overlay-content">
         <h1 id="overlay-title"></h1>

apps/camera/js/camera.js

@@ -182,6 +182,7 @@ var Camera = {
   _position: null,
 
   _pendingPick: null,
+  _savedBlob: null,
 
   // The minimum available disk space to start recording a video.
   RECORD_SPACE_MIN: 1024 * 1024 * 2,
@@ -236,6 +237,18 @@ var Camera = {
     return document.getElementById('toggle-flash');
   },
 
+  get cancelPickButton() {
+    return document.getElementById('cancel-pick');
+  },
+
+  get retakeButton() {
+    return document.getElementById('retake-button');
+  },
+
+  get selectButton() {
+    return document.getElementById('select-button');
+  },
+
   // We have seperated init and delayedInit as we want to make sure
   // that on first launch we dont interfere and load the camera
   // previewStream as fast as possible, once the previewStream is
@@ -295,6 +308,12 @@ var Camera = {
       .addEventListener('click', this.capturePressed.bind(this));
     this.galleryButton
       .addEventListener('click', this.galleryBtnPressed.bind(this));
+    this.cancelPickButton
+      .addEventListener('click', this.cancelPick.bind(this));
+    this.retakeButton
+      .addEventListener('click', this.retakePressed.bind(this));
+    this.selectButton
+      .addEventListener('click', this.selectPressed.bind(this));
 
     if (!navigator.mozCameras) {
       this.captureButton.setAttribute('disabled', 'disabled');
@@ -376,8 +395,21 @@ var Camera = {
     this.captureButton.setAttribute('disabled', 'disabled');
 
     if (this._pendingPick) {
-      var cancelButton = document.getElementById('cancel-pick');
-      cancelButton.onclick = function() { };
+      this.cancelPickButton.setAttribute('disabled', 'disabled');
+    }
+  },
+
+  showConfirmation: function camera_showConfirmation(show) {
+    var controls = document.getElementById('controls');
+    var confirmation = document.getElementById('confirmation');
+
+    if (show) {
+      controls.classList.add('hidden');
+      confirmation.classList.remove('hidden');
+    }
+    else {
+      controls.classList.remove('hidden');
+      confirmation.classList.add('hidden');
     }
   },
 
@@ -390,13 +422,15 @@ var Camera = {
     this.galleryButton.classList.add('hidden');
     this.switchButton.classList.add('hidden');
 
-    // Display the cancel button and add an event listener for it
-    var cancelButton = document.getElementById('cancel-pick');
-    cancelButton.classList.remove('hidden');
-    cancelButton.onclick = this.cancelPick.bind(this);
+    // Display the cancel button, and make sure it's enabled
+    this.cancelPickButton.classList.remove('hidden');
+    this.cancelPickButton.removeAttribute('disabled');
   },
 
   cancelPick: function camera_cancelPick() {
+    if (this.cancelPickButton.hasAttribute('disabled'))
+      return;
+
     if (this._pendingPick) {
       this._pendingPick.postError('pick cancelled');
     }
@@ -868,32 +902,58 @@ var Camera = {
     this._config.position = null;
     this._manuallyFocused = false;
     this.hideFocusRing();
+
+    if (this._pendingPick) {
+      this.showConfirmation(true);
+
+      // Just save the blob temporarily until the user presses "Retake" or
+      // "Select".
+      this._savedBlob = blob;
+      return;
+    }
+
     this.restartPreview();
-    DCFApi.createDCFFilename(this._pictureStorage,
-                             'image',
-                             (function(path, name) {
-      var addreq = this._pictureStorage.addNamed(blob, path + name);
-      addreq.onsuccess = (function(e) {
-        var absolutePath = e.target.result;
-        if (this._pendingPick) {
-          this._resizeBlobIfNeeded(blob, function(resized_blob) {
-            this._pendingPick.postResult({
-              type: 'image/jpeg',
-              blob: resized_blob,
-              name: path + name
-            });
-            this._pendingPick = null;
-          }.bind(this));
-          return;
-        }
+    this._addPictureToStorage(blob, function(name, absolutePath) {
+      Filmstrip.addImage(absolutePath, blob);
+      Filmstrip.show(Camera.FILMSTRIP_DURATION);
+      this.checkStorageSpace();
+    }.bind(this));
+  },
 
-        Filmstrip.addImage(absolutePath, blob);
-        Filmstrip.show(Camera.FILMSTRIP_DURATION);
-        this.checkStorageSpace();
+  retakePressed: function camera_retakePressed() {
+    this._savedBlob = null;
+    this.showConfirmation(false);
+    this.cancelPickButton.removeAttribute('disabled');
+    this.restartPreview();
+  },
 
-      }).bind(this);
+  selectPressed: function camera_selectPressed() {
+    var blob = this._savedBlob;
+    this._savedBlob = null;
+    this.showConfirmation(false);
+    this.restartPreview();
+    this._addPictureToStorage(blob, function(name, absolutePath) {
+      this._resizeBlobIfNeeded(blob, function(resized_blob) {
+        this._pendingPick.postResult({
+          type: 'image/jpeg',
+          blob: resized_blob,
+          name: name
+        });
+        this._pendingPick = null;
+      }.bind(this));
+    }.bind(this));
+  },
+
+  _addPictureToStorage: function camera_addPictureToStorage(blob, callback) {
+    DCFApi.createDCFFilename(this._pictureStorage, 'image',
+                             function(path, name) {
+      var addreq = this._pictureStorage.addNamed(blob, path + name);
+      addreq.onsuccess = function(e) {
+        var absolutePath = e.target.result;
+        callback(path + name, absolutePath);
+      };
       addreq.onerror = this.takePictureError;
-    }).bind(this));
+    }.bind(this));
   },
 
   _resizeBlobIfNeeded: function camera_resizeBlobIfNeeded(blob, callback) {

apps/camera/locales/camera.en-US.properties

@@ -15,5 +15,8 @@ pluggedin-text  = Unplug the phone to view pictures.
 
 size-limit-reached = You have run out of space on your SD card.
 
+retake-button = Retake
+select-button = Select
+
 delete-photo? = Delete photo?
 delete-video? = Delete video?

apps/camera/style/camera.css

@@ -28,6 +28,30 @@ html, body {
   overflow: hidden;
 }
 
+#confirmation {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  padding: 1.5rem;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#confirmation > button {
+  margin: 0;
+}
+
+#confirmation > button:not(:first-child) {
+  margin-left: 1rem;
+}
+
+#retake-button, #select-button {
+  width: calc((100% - 1rem) / 2);
+}
+
 #switch-button, #capture-button, #misc-button {
   position: absolute;
 }
@@ -99,6 +123,10 @@ html, body {
   display:none
 }
 
+#cancel-pick[disabled=disabled] {
+  opacity: 0.5;
+}
+
 #cancel-pick span {
   background-image: url(images/actionicon_cancel.png);
 }