Settings People Revamp: Implement Change People preview pane

This patch:
 1. Adds a camera image icon. Currently just sets a cameraActive
    property and hides the static image preview pane, but functionality
    will expand in subsquent patches.
 2. Adds a preview pane as described in the mocks for the selected
    image.

BUG=563721

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

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

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

@@ -2,11 +2,29 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#availableIcons {
+#available-icons {
   -webkit-margin-start: 16px;
   margin-top: 16px;
 }
 
+#available-icons paper-button {
+  padding: 4px;
+}
+
+#preview-pane {
+  flex-shrink: 0;
+  margin: 18px 10px 0 0;
+  width: 228px;
+}
+
+#preview-pane img {
+  border: solid 1px #cacaca;
+  border-radius: 4px;
+  max-height: 220px;
+  max-width: 220px;
+  padding: 3px;
+}
+
 .user-image {
   height: 64px;
   width: 64px;

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

@@ -10,28 +10,37 @@
   <template>
     <div class="settings-box">
       <div class="split">
-        <div id="availableIcons">
+        <div id="available-icons" class="start">
+          <paper-button id="camera-image" toggles active="[[cameraActive_]]"
+              on-tap="onCameraImageTap_">
+            <img class="user-image" src="[[cameraImageUrl_]]"
+                alt="[[cameraImageTitle_]]">
+          </paper-button>
           <paper-button id="profile-image" toggles
-              active="{{isActiveImage_(profileImageUrl_, selectedImageUrl_)}}"
+              active="{{isActiveImage_(cameraActive_, profileImageUrl_, selectedImageUrl_)}}"
               on-tap="onProfileImageTap_">
             <img class="user-image" src="[[profileImageUrl_]]"
                 alt="[[i18n('profilePhotoLoading')]]">
           </paper-button>
           <template is="dom-if" if="[[oldImageUrl_]]">
             <paper-button id="old-image" toggles
-                active="{{isActiveImage_(oldImageUrl_, selectedImageUrl_)}}"
+                active="{{isActiveImage_(cameraActive_, oldImageUrl_, selectedImageUrl_)}}"
                 on-tap="onOldImageTap_">
               <img class="user-image" src="[[oldImageUrl_]]">
             </paper-button>
           </template>
           <template is="dom-repeat" items="[[defaultImages_]]">
             <paper-button class="default-image" toggles
-                active="{{isActiveImage_(item.url, selectedImageUrl_)}}"
+                active="{{isActiveImage_(cameraActive_, item.url, selectedImageUrl_)}}"
                 on-tap="onDefaultImageTap_" data-image-url$="[[item.url]]">
               <img class="user-image" src="[[item.url]]" alt="[[item.title]]">
             </paper-button>
           </template>
         </div>
+        <div id="preview-pane">
+          <img id="previewImage" src="[[selectedImageUrl_]]"
+              hidden="[[cameraActive_]]">
+        </div>
       </div>
     </div>
   </template>

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

@@ -38,6 +38,36 @@ Polymer({
       notify: settings_test.changePictureOptions.notifyPropertyChangesForTest,
     },
 
+    /**
+     * True only if the user has selected the camera icon. Old photos captured
+     * from the camera are represented as the 'old' image.
+     * @private {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.
+     * @private {string}
+     */
+    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.
+     * @private {string}
+     */
+    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.
@@ -81,6 +111,7 @@ Polymer({
        * @param {string} imageUrl
        */
       receiveSelectedImage: function(imageUrl) {
+        this.cameraActive_ = false;
         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),
 
       /**
@@ -126,6 +160,14 @@ Polymer({
     settings.ChangePicturePrivateApi.initialize();
   },
 
+  /**
+   * Handler for when the user clicks the camera image.
+   * @private
+   */
+  onCameraImageTap_: function() {
+    this.cameraActive_ = true;
+  },
+
   /**
    * Handler for when the user clicks a new profile image.
    * @private
@@ -176,7 +218,7 @@ Polymer({
    * @param {string} selectedImageUrl
    * @return {boolean}
    */
-  isActiveImage_: function(imageUrl, selectedImageUrl) {
-    return imageUrl == selectedImageUrl;
+  isActiveImage_: function(cameraActive, imageUrl, selectedImageUrl) {
+    return !cameraActive && (imageUrl == selectedImageUrl);
   },
 });

chrome/test/data/webui/settings/change_picture_browsertest_chromeos.js

@@ -75,6 +75,21 @@ TEST_F('SettingsChangePictureBrowserTest', 'MAYBE_ChangePicture', function() {
       changePicture.selectedImageUrl_ = '';
     });
 
+    test('select camera image', function() {
+      var cameraImage = changePicture.$$('#camera-image');
+      assertTrue(!!cameraImage);
+
+      assertFalse(changePicture.cameraActive_);
+      expectFalse(changePicture.$.previewImage.hidden);
+
+      MockInteractions.tap(cameraImage);
+
+      Polymer.dom.flush();
+
+      expectTrue(changePicture.cameraActive_);
+      expectTrue(changePicture.$.previewImage.hidden);
+    });
+
     test('select profile image', function() {
       var profileImage = changePicture.$$('#profile-image');
       assertTrue(!!profileImage);
@@ -87,6 +102,7 @@ TEST_F('SettingsChangePictureBrowserTest', 'MAYBE_ChangePicture', function() {
 
         Polymer.dom.flush();
         expectTrue(profileImage.active);
+        expectFalse(changePicture.$.previewImage.hidden);
       });
     });
 
@@ -111,12 +127,12 @@ TEST_F('SettingsChangePictureBrowserTest', 'MAYBE_ChangePicture', function() {
         var oldImage = changePicture.$$('#old-image');
         assertTrue(!!oldImage);
         expectTrue(oldImage.active);
+        expectFalse(changePicture.$.previewImage.hidden);
       });
     });
 
     test('select first default image', function() {
       var firstDefaultImage = changePicture.$$('.default-image');
-      console.log(firstDefaultImage);
       assertTrue(!!firstDefaultImage);
 
       MockInteractions.tap(firstDefaultImage);
@@ -128,6 +144,7 @@ TEST_F('SettingsChangePictureBrowserTest', 'MAYBE_ChangePicture', function() {
 
         Polymer.dom.flush();
         expectTrue(firstDefaultImage.active);
+        expectFalse(changePicture.$.previewImage.hidden);
       });
     });
   });