Settings People Revamp: Implement Change People preview pane

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

Index: chrome/browser/resources/settings/people_page/change_picture.html
diff --git a/chrome/browser/resources/settings/people_page/change_picture.html b/chrome/browser/resources/settings/people_page/change_picture.html
index 512757c9953ce6988d2ab4258bf60ea966f5f0d5..ed3cb5fe4898549d73cc3fdbbf05f8e0ec8868a6 100644
--- a/chrome/browser/resources/settings/people_page/change_picture.html
+++ b/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_)}}"

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

Nit: cameraActive_ is passed in all calls to isActiveImage_. How about not
passing it as a param, instead just referring to it from within the function
directly?

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

Following Polymer #3 on style guide here:
https://docs.google.com/document/d/1G0t519y_cSW4etXVwruR145abZH0N5-9R7JyejzVo...

               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_]]"

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

Nit: s/previewImage/preview-image

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

Since we use foo.$.previewImage in the test, we make that ID camel case per HTML
#3 in style guide above.

+              hidden="[[cameraActive_]]">
+        </div>
       </div>
     </div>
   </template>