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_)}}"
               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>