Settings People Revamp: Implement Change People preview pane

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

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://md-settings/people_page/change_picture_private_api.html">
 
 <dom-module id="settings-change-picture">
   <link rel="import" type="css"
       href="chrome://md-settings/settings_shared.css">
   <link rel="import" type="css" href="change_picture.css">
   <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>
   <script src="change_picture.js"></script>
 </dom-module>