Settings People Revamp: Implement Change People preview pane

chrome/browser/resources/settings/people_page/change_picture.js

Index: chrome/browser/resources/settings/people_page/change_picture.js
diff --git a/chrome/browser/resources/settings/people_page/change_picture.js b/chrome/browser/resources/settings/people_page/change_picture.js
index 3127373a7654abd7eb6e59a1b28497c8f45f3f12..1f8872f8e6f71faa362ccb2e0e240c6d434969c6 100644
--- a/chrome/browser/resources/settings/people_page/change_picture.js
+++ b/chrome/browser/resources/settings/people_page/change_picture.js
@@ -39,6 +39,36 @@ Polymer({
     },
 
     /**
+     * True only if the user has selected the camera icon. Old photos captured
+     * from the camera are represented as the 'old' image.
+     * @type {boolean}
+     */
+    cameraActive: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * This differs from its default value only if the user has just captured
+     * a new photo from the camera.
+     * @type {string}
+     */
+    cameraImageUrl: {

[dpapad, 2016/01/21 18:11:40]

Does this URL need to be public (all other URLs in this file are private)?

[tommycli, 2016/01/21 18:47:05]

Done. Actually I think not.

The eventual goal is to have an embedded element. I think this can still be
private.

<camera-image camera-image-url="{{cameraImageUrl_}}">

+      type: String,
+      value: settings.ChangePicturePrivateApi.ButtonImages.TAKE_PHOTO,
+    },
+
+    /**
+     * This differs from its default value only if the user has just captured
+     * a new photo from the camera.
+     * @type {string}

[dpapad, 2016/01/21 18:11:40]

@private or remove the underscore from the name.

[tommycli, 2016/01/21 18:47:05]

Done.

+     */
+    cameraImageTitle_: {
+      type: String,
+      value: function() { return loadTimeData.getString('takePhoto'); },
+    },
+
+    /**
      * The url of the 'old' image, which is the existing image sourced from
      * the camera, a file, or a deprecated default image.
      * @private {string}
@@ -81,6 +111,7 @@ Polymer({
        * @param {string} imageUrl
        */
       receiveSelectedImage: function(imageUrl) {
+        this.cameraActive = false;

[dpapad, 2016/01/21 18:11:40]

Would it make sense to set the value of this boolean in an observer of the
selectedImageUrl_ property instead of repeating it three times?

[tommycli, 2016/01/21 18:47:05]

Hmm.. I'm not sure yet.

Basically I'm still not sure how to reconcile selectedImageUrl_ with
cameraActive_ yet. The two seem a little redundant. I think this will become
clear in the next patchset, so would it be alright if I left it as-is for now,
but came to a decision next patch?

[dpapad, 2016/01/21 18:55:47]

SG.

         this.selectedImageUrl_ = imageUrl;
       }.bind(this),
 
@@ -92,6 +123,7 @@ Polymer({
        * @param {string} imageUrl
        */
       receiveOldImage: function(imageUrl) {
+        this.cameraActive = false;
         this.oldImageUrl_ = imageUrl;
         this.selectedImageUrl_ = imageUrl;
       }.bind(this),
@@ -103,8 +135,10 @@ Polymer({
        */
       receiveProfileImage: function(imageUrl, selected) {
         this.profileImageUrl_ = imageUrl;
-        if (selected)
+        if (selected) {
+          this.cameraActive = false;
           this.selectedImageUrl_ = imageUrl;
+        }
       }.bind(this),
 
       /**
@@ -127,6 +161,15 @@ Polymer({
   },
 
   /**
+   * Handler for when the user clicks the camera image.
+   * @private
+   * @param {!Event} event

[dpapad, 2016/01/21 18:55:47]

We are not using the event parameter. Can it be removed?

[tommycli, 2016/01/21 19:08:03]

Done.

+   */
+  onCameraImageTap_: function(event) {
+    this.cameraActive = true;
+  },
+
+  /**
    * Handler for when the user clicks a new profile image.
    * @private
    * @param {!Event} event
@@ -176,7 +219,7 @@ Polymer({
    * @param {string} selectedImageUrl
    * @return {boolean}
    */
-  isActiveImage_: function(imageUrl, selectedImageUrl) {
-    return imageUrl == selectedImageUrl;
+  isActiveImage_: function(cameraActive, imageUrl, selectedImageUrl) {
+    return !cameraActive && (imageUrl == selectedImageUrl);
   },
 });