OOBE/login: User image: Use cr_picture elements

This implements the user image picker to look and behave the same
as the Settings UI.

Notes:
* Because we use the same icon and camera size, the icons overflow
  and scroll. This is consistent with the new UX so seems acceptable
  as an intermediate step.
* The supervised user picker has not been changed yet, pending the
  status of the feature.

Bug: 730031
Change-Id: Iaa1044e5eb57f37677d52ba592a7fcb470803abe
Reviewed-on: https://chromium-review.googlesource.com/569311
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486959}

chrome/app/chromeos_strings.grdp

@@ -3112,10 +3112,10 @@ Press any key to continue exploring.
     Google Profile photo (loading)
   </message>
   <message name="IDS_IMAGE_SCREEN_PROFILE_PHOTO" desc="The title of the Google profile photo of the user on image selection screen. Please keep in sync with IDS_OPTIONS_CHANGE_PICTURE_PROFILE_PHOTO.">
-    * Google Profile photo
+    Google Profile photo
   </message>
   <message name="IDS_IMAGE_SCREEN_PROFILE_LOADING_PHOTO" desc="The title of the loading stub for Google profile image on image selection screen. Please keep in sync with IDS_OPTIONS_CHANGE_PICTURE_PROFILE_LOADING_PHOTO.">
-    * Google Profile photo (loading)
+    Google Profile photo (loading)
   </message>
   <message name="IDS_IMAGE_SCREEN_SYNCING_PREFERENCES" desc="The message displayed on the image screen of the GAIA flow while user preferences are syncing.">
     Syncing your preferences...

chrome/browser/chromeos/login/screens/user_image_screen.cc

@@ -101,16 +101,18 @@ void UserImageScreen::OnPhotoTaken(const std::string& raw_data) {
 void UserImageScreen::OnImageSelected(const std::string& image_type,
                                       const std::string& image_url,
                                       bool is_user_selection) {
-  if (is_user_selection) {
+  if (is_user_selection)
     user_has_selected_image_ = true;
-  }
-  if (image_url.empty())
-    return;
-  int user_image_index = user_manager::User::USER_IMAGE_INVALID;
-  if (image_type == "default" &&
-      default_user_image::IsDefaultImageUrl(image_url, &user_image_index)) {
+
+  if (image_type == "default") {
+    int user_image_index = user_manager::User::USER_IMAGE_INVALID;
+    if (image_url.empty() ||
+        !default_user_image::IsDefaultImageUrl(image_url, &user_image_index)) {
+      LOG(ERROR) << "Unexpected default image url: " << image_url;
+      return;
+    }
     selected_image_ = user_image_index;
-  } else if (image_type == "camera") {
+  } else if (image_type == "camera" || image_type == "old") {
     selected_image_ = user_manager::User::USER_IMAGE_EXTERNAL;
   } else if (image_type == "profile") {
     selected_image_ = user_manager::User::USER_IMAGE_PROFILE;

chrome/browser/chromeos/login/screens/user_image_screen.h

@@ -52,8 +52,8 @@ class UserImageScreen : public BaseScreen,
 
   // Called when some image was selected. |is_user_selection| indicates if
   // it was user selection or image was selected programmatically.
-  void OnImageSelected(const std::string& image_url,
-                       const std::string& image_type,
+  void OnImageSelected(const std::string& image_type,
+                       const std::string& image_url,
                        bool is_user_selection);
 
   // Called when user accepts currently selected image.

chrome/browser/chromeos/login/supervised/supervised_user_creation_screen.cc

@@ -636,13 +636,15 @@ void SupervisedUserCreationScreen::OnDecodeImageFailed() {
 void SupervisedUserCreationScreen::OnImageSelected(
     const std::string& image_type,
     const std::string& image_url) {
-  if (image_url.empty())
-    return;
-  int user_image_index = user_manager::User::USER_IMAGE_INVALID;
-  if (image_type == "default" &&
-      default_user_image::IsDefaultImageUrl(image_url, &user_image_index)) {
+  if (image_type == "default") {
+    int user_image_index = user_manager::User::USER_IMAGE_INVALID;
+    if (image_url.empty() ||
+        !default_user_image::IsDefaultImageUrl(image_url, &user_image_index)) {
+      LOG(ERROR) << "Unexpected default image url: " << image_url;
+      return;
+    }
     selected_image_ = user_image_index;
-  } else if (image_type == "camera") {
+  } else if (image_type == "camera" || image_type == "old") {
     selected_image_ = user_manager::User::USER_IMAGE_EXTERNAL;
   } else {
     NOTREACHED() << "Unexpected image type: " << image_type;

chrome/browser/chromeos/login/supervised/supervised_user_creation_screen.h

@@ -113,8 +113,8 @@ class SupervisedUserCreationScreen
 
   // SupervisedUserCreationScreenHandler::Delegate (image) implementation:
   void OnPhotoTaken(const std::string& raw_data) override;
-  void OnImageSelected(const std::string& image_url,
-                       const std::string& image_type) override;
+  void OnImageSelected(const std::string& image_type,
+                       const std::string& image_url) override;
   void OnImageAccepted() override;
   // ImageDecoder::ImageRequest overrides:
   void OnImageDecoded(const SkBitmap& decoded_image) override;

chrome/browser/resources/chromeos/login/compiled_resources2.gyp

@@ -10,5 +10,18 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'oobe_change_picture',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_list',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_pane',
+        '<(DEPTH)/ui/webui/resources/cr_elements/chromeos/cr_picture/compiled_resources2.gyp:cr_picture_types',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }

chrome/browser/resources/chromeos/login/custom_elements_login.html

@@ -20,6 +20,7 @@
 <include src="active_directory_password_change.html">
 <include src="arc_terms_of_service.html">
 <include src="oobe_buttons.html">
+<include src="oobe_change_picture.html">
 <include src="oobe_dialog.html">
 <include src="oobe_reset.html">
 <include src="oobe_reset_confirmation_overlay.html">

chrome/browser/resources/chromeos/login/custom_elements_login.js

@@ -19,6 +19,7 @@
 // <include src="offline_ad_login.js">
 // <include src="active_directory_password_change.js">
 // <include src="oobe_buttons.js">
+// <include src="oobe_change_picture.js">
 // <include src="oobe_dialog.js">
 // <include src="arc_terms_of_service.js">
 // <include src="oobe_reset.js">

chrome/browser/resources/chromeos/login/custom_elements_oobe.html

@@ -17,6 +17,7 @@
 <include src="navigation_bar.html">
 <include src="oobe_a11y_option.html">
 <include src="oobe_buttons.html">
+<include src="oobe_change_picture.html">
 <include src="oobe_dialog.html">
 <include src="oobe_eula.html">
 <include src="oobe_hid_detection.html">

chrome/browser/resources/chromeos/login/custom_elements_oobe.js

@@ -27,6 +27,7 @@
 // <include src="navigation_bar.js">
 // <include src="oobe_a11y_option.js">
 // <include src="oobe_buttons.js">
+// <include src="oobe_change_picture.js">
 // <include src="oobe_dialog.js">
 // <include src="oobe_eula.js">
 // <include src="oobe_hid_detection.js">

chrome/browser/resources/chromeos/login/oobe_change_picture.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_list.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html">
+<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_types.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/util.html">
+
+<dom-module id="oobe-change-picture">
+  <template>
+    <style>
+      #outer {
+        -webkit-margin-start: 8px;
+        align-items: flex-start;
+        display: flex;
+        padding-top: 16px;
+      }
+
+      cr-picture-list {
+        -webkit-margin-end: 32px;
+        height: 340px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        width: 340px;
+      }
+
+      cr-picture-pane {
+        -webkit-margin-end: 10px;
+        flex-shrink: 0;
+        width: 228px;
+      }
+    </style>
+    <div id="outer">
+      <cr-picture-list id="pictureList" tabindex="0"
+          camera-present="[[cameraPresent]]"
+          default-images="[[defaultImages]]"
+          selected-item="{{selectedItem_}}"
+          old-image-label="[[i18nDynamic(locale, 'photoFromCamera')]]"
+          profile-image-label="[[i18nDynamic(locale, 'profilePhoto')]]"
+          profile-image-loading-label="[[i18nDynamic(
+              locale, 'profilePhotoLoading')]]"
+          take-photo-label="[[i18nDynamic(locale, 'takePhoto')]]">
+      </cr-picture-list>
+      <cr-picture-pane id="picturePane"
+          camera-present="[[cameraPresent]]",
+          image-src="[[getImageSrc_(selectedItem_)]]"
+          image-type="[[getImageType_(selectedItem_)]]"
+          discard-image-label="[[i18nDynamic(locale, 'discardPhoto')]]"
+          flip-photo-label="[[i18nDynamic(locale, 'flipPhoto')]]"
+          take-photo-label="[[i18nDynamic(locale, 'takePhoto')]]">
+      </cr-picture-pane>
+    </div>
+  </template>
+</dom-module>

chrome/browser/resources/chromeos/login/oobe_change_picture.js

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * An object describing a default image.
+ * @typedef {{
+ *   author: string,
+ *   title: string,
+ *   url: string,
+ *   website: string
+ * }}
+ */
+var OobeDefaultImage;
+
+/** @const */ var OOBE_DEFAULT_AVATAR_IMAGE_URL =
+    'chrome://theme/IDR_PROFILE_PICTURE_LOADING';
+
+/**
+ * @fileoverview
+ * 'oobe-change-picture' is a custom element containing controls to select
+ * a user's picture.
+ */
+Polymer({
+  is: 'oobe-change-picture',
+
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /**
+     * True if the user has a plugged-in webcam.
+     * @private {boolean}
+     */
+    cameraPresent: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** Specifies the selected image URL, used to specify the initial image. */
+    selectedImageUrl: {
+      type: String,
+      observer: 'selectedImageUrlChanged_',
+    },
+
+    /**
+     * The default user images.
+     * @private {!Array<!OobeDefaultImage>}
+     */
+    defaultImages: {
+      type: Array,
+      value: function() {
+        return [];
+      },
+    },
+
+    /**
+     * The currently selected item. This property is bound to the iron-selector
+     * and never directly assigned. This may be undefined momentarily as
+     * the selection changes due to iron-selector implementation details.
+     * @private {?CrPicture.ImageElement}
+     */
+    selectedItem_: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  listeners: {
+    'discard-image': 'onDiscardImage_',
+    'image-activate': 'onImageActivate_',
+    'photo-flipped': 'onPhotoFlipped_',
+    'photo-taken': 'onPhotoTaken_',
+  },
+
+  /** @private {?CrPictureListElement} */
+  pictureList_: null,
+
+  /** @override */
+  ready: function() {
+    this.pictureList_ =
+        /** @type {CrPictureListElement} */ (this.$.pictureList);
+  },
+
+  /**
+   * selectedImageUrl is set by the host initially and possibly after sync.
+   * @param {string} selectedImageUrl
+   * @private
+   */
+  selectedImageUrlChanged_: function(selectedImageUrl) {
+    this.pictureList_.setSelectedImageUrl(selectedImageUrl);
+    this.pictureList_.setFocus();
+  },
+
+  /**
+   * Selects an image element.
+   * @param {!CrPicture.ImageElement} image
+   * @private
+   */
+  selectImage_: function(image) {
+    switch (image.dataset.type) {
+      case CrPicture.SelectionTypes.CAMERA:
+        this.sendSelectImage_(image.dataset.type, '');
+        /** CrPicturePaneElement */ (this.$.picturePane).takePhoto();
+        break;
+      case CrPicture.SelectionTypes.FILE:
+        assertNotReached();
+        break;
+      case CrPicture.SelectionTypes.PROFILE:
+        this.sendSelectImage_(image.dataset.type, '');
+        break;
+      case CrPicture.SelectionTypes.OLD:
+        this.sendSelectImage_(image.dataset.type, '');
+        break;
+      case CrPicture.SelectionTypes.DEFAULT:
+        this.sendSelectImage_(image.dataset.type, image.src);
+        break;
+      default:
+        assertNotReached('Selected unknown image type');
+    }
+  },
+
+  /**
+   * @param {string} type
+   * @param {string} src
+   * @private
+   */
+  sendSelectImage_: function(type, src) {
+    chrome.send('selectImage', [type, src, true]);
+  },
+
+  /**
+   * Handler for when an image is activated.
+   * @param {!{detail: !CrPicture.ImageElement}} event
+   * @private
+   */
+  onImageActivate_: function(event) {
+    this.selectImage_(event.detail);
+  },
+
+  /**
+   * @param {!{detail: !{photoDataUrl: string}}} event
+   * @private
+   */
+  onPhotoTaken_: function(event) {
+    chrome.send('photoTaken', [event.detail.photoDataUrl]);
+    this.pictureList_.setOldImageUrl(event.detail.photoDataUrl);
+
+    this.pictureList_.setFocus();
+    announceAccessibleMessage(
+        loadTimeData.getString('photoCaptureAccessibleText'));
+  },
+
+  /**
+   * @param {!{detail: boolean}} event
+   * @private
+   */
+  onPhotoFlipped_: function(event) {
+    var flipped = event.detail;
+    var flipMessageId = flipped ? 'photoFlippedAccessibleText' :
+                                  'photoFlippedBackAccessibleText';
+    announceAccessibleMessage(loadTimeData.getString(flipMessageId));
+  },
+
+  /**
+   * Discard currently selected image. Selects the first default icon.
+   * Returns to the camera stream if the user had just taken a picture.
+   * @private
+   */
+  onDiscardImage_: function() {
+    this.pictureList_.setOldImageUrl('');
+
+    chrome.send('discardPhoto');
+
+    // If the user has not chosen an image since opening the subpage and
+    // discards the current photo, select the first default image.
+    assert(this.defaultImages.length > 0);
+    this.sendSelectImage_(
+        CrPicture.SelectionTypes.DEFAULT, this.defaultImages[0].url);
+
+    announceAccessibleMessage(this.i18n('photoDiscardAccessibleText'));
+  },
+
+  /**
+   * @param {CrPicture.ImageElement} selectedItem
+   * @return {string}
+   * @private
+   */
+  getImageSrc_: function(selectedItem) {
+    return (selectedItem && selectedItem.src) || '';
+  },
+
+  /**
+   * @param {CrPicture.ImageElement} selectedItem
+   * @return {string}
+   * @private
+   */
+  getImageType_: function(selectedItem) {
+    return (selectedItem && selectedItem.dataset.type) ||
+        CrPicture.SelectionTypes.NONE;
+  },
+});

chrome/browser/resources/chromeos/login/oobe_screen_user_image.css

@@ -22,212 +22,6 @@
   margin-top: 0;
 }
 
-#user-image-grid {
-  -webkit-user-drag: none;
-  -webkit-user-select: none;
-  display: inline-block;
-  height: 264px;
-  margin: 0;
-  outline: none;
-  overflow: hidden;
-  padding: 0;
-  width: 400px;
-}
-
-#user-image-grid img {
-  background-color: white;
-  height: 50px;
-  vertical-align: middle;
-  width: 50px;
-}
-
-#user-image-grid > li {
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  display: inline-block;
-  margin: 4px;
-  padding: 3px;
-}
-
-#user-image-grid [selected] {
-  border: 2px solid rgb(0, 102, 204);
-  padding: 2px;
-}
-
-/* #user-image-preview can have the following classes:
- * .default-image: one of the default images is selected (including the grey
- *                 silhouette);
- * .profile-image: profile image is selected;
- * .profile-image-loading: profile image is being loaded;
- * .online: camera is streaming video;
- * .camera: camera (live or photo) is selected;
- * .live: camera is in live mode (no photo taken yet/last photo removed). */
-#user-image-preview {
-  float: right;
-  margin: 4px;
-  max-width: 220px;
-  position: relative;
-}
-
-#profile-image {
-  position: relative;
-}
-
-/* White background for spinner styled like user image */
-#profile-image .spinner-bg {
-  background-color: white;
-  display: none;
-  height: 50px;
-  left: 3px;
-  position: absolute;
-  top: 3px;
-  width: 50px;
-}
-
-.profile-image-loading #profile-image .spinner-bg {
-  display: block;
-}
-
-#profile-image .spinner {
-  left: 14px;
-  position: absolute;
-  top: 14px;
-}
-
-html[dir=rtl] #user-image-preview {
-  float: left;
-}
-
-#user-image-preview-img {
-  display: block;
-  max-height: 220px;
-  max-width: 220px;
-}
-
-#user-image-preview-img.animated-transform {
-  transition: transform 200ms linear;
-}
-
-.camera.live #user-image-preview-img {
-  display: none;
-}
-
-.camera.flip-x #user-image-preview-img {
-  transform: rotateY(180deg);
-}
-
-.default-image #user-image-preview-img {
-  background: white;
-  border: solid 1px #cacaca;
-  border-radius: 4px;
-  padding: 2px;
-}
-
-.user-image-stream-area {
-  display: none;
-  padding: 0;
-  position: relative;
-}
-
-.camera.live .user-image-stream-area {
-  display: block;
-}
-
-#user-image-stream-crop {
-  height: 220px;
-  overflow: hidden;
-  position: relative;
-  transition: transform 200ms linear;
-  width: 220px;
-}
-
-.flip-x #user-image-stream-crop {
-  transform: rotateY(180deg);
-}
-
-/* TODO(ivankr): specify dimensions from real capture size. */
-.user-image-stream {
-  border: solid 1px #cacaca;
-  height: 220px;
-  /* Center image for 4:3 aspect ratio. */
-  left: -16.6%;
-  position: absolute;
-  visibility: hidden;
-}
-
-.online .user-image-stream {
-  visibility: visible;
-}
-
-#user-image-preview-caption {
-  color: dimGray;
-  font-size: smaller;
-  margin: 8px 4px;
-}
-
-.camera #user-image-preview-caption {
-  display: none;
-}
-
-#flip-photo {
-  background: url(chrome://theme/IDR_MIRROR_FLIP) no-repeat;
-  border: none;
-  bottom: 44px;  /* 8px + image bottom. */
-  display: block;
-  height: 32px;
-  opacity: 0;
-  position: absolute;
-  right: 8px;
-  transition: opacity 75ms linear;
-  width: 32px;
-  z-index: 1;
-}
-
-html[dir=rtl] #flip-photo {
-  left: 8px;
-  right: auto;
-}
-
-/* "Flip photo" button is hidden during flip animation. */
-.camera.online:not(.animation) #flip-photo,
-.camera.phototaken:not(.animation) #flip-photo {
-  opacity: 0.75;
-}
-
-#discard-photo,
-#take-photo {
-  display: none;
-  height: 25px;
-  margin: 4px 1px;
-  padding: 0;
-  width: 220px;
-}
-
-.camera:not(.live) #discard-photo {
-  background: url(chrome://theme/IDR_USER_IMAGE_RECYCLE)
-      no-repeat center center;
-  display: block;
-}
-
-.camera.live.online #take-photo {
-  background: url(chrome://theme/IDR_USER_IMAGE_CAPTURE)
-      no-repeat center -1px;
-  display: block;
-}
-
-#user-image-preview .perspective-box {
-  border: solid 1px #cacaca;
-  border-radius: 4px;
-  padding: 2px;
-  perspective: 600px;
-  width: 220px;
-}
-
-#user-image-attribution {
-  /* Turned off for now. */
-  display: none;
-}
-
 #user-image .step-contents {
   -webkit-margin-start: 31px;
   margin-bottom: 30px;
@@ -243,8 +37,3 @@ html[dir=rtl] #flip-photo {
   top: 50%;
   width: 44px;
 }
-
-.camera.live:not(.online) .user-image-stream-area .spinner {
-  display: block;
-}
-

chrome/browser/resources/chromeos/login/oobe_screen_user_image.html

@@ -5,32 +5,8 @@
          i18n-content="userImageScreenDescription"></p>
     </div>
     <div id="user-image-screen-main">
-      <grid id="user-image-grid" tabindex="1"
-          aria-labelledby="user-image-screen-description">
-      </grid>
-      <div id="user-image-preview">
-        <img id="user-image-preview-img" class="animated-transform" alt="">
-        <div class="user-image-stream-area">
-          <div class="perspective-box">
-            <div id="user-image-stream-crop">
-              <video class="user-image-stream" autoplay></video>
-            </div>
-          </div>
-          <div class="spinner"></div>
-        </div>
-        <p id="user-image-preview-caption"></p>
-        <button id="discard-photo" i18n-values="title:discardPhoto"
-            tabindex="2"></button>
-        <button id="take-photo" i18n-values="title:takePhoto" tabindex="2">
-        </button>
-        <button id="flip-photo" class="custom-appearance"
-            i18n-values="title:flipPhoto" tabindex="1"></button>
-      </div>
-      <div id="user-image-attribution">
-        <span i18n-content="authorCredit"></span>
-        <strong id="user-image-author-name"></strong>
-        <a id="user-image-author-website" target="_blank"></a>
-      </div>
+      <oobe-change-picture id="changePicture">
+      </oobe-change-picture>
     </div>
   </div>
   <div id="user-image-controls" class="step-controls"></div>

chrome/browser/resources/chromeos/login/screen_supervised_user_creation.js

@@ -1130,7 +1130,7 @@ login.createScreen(
                 Math.random() * this.imagesData_.length)];
             this.context_.selectedImageUrl = selected.url;
             imageGrid.selectedItemUrl = selected.url;
-            chrome.send('supervisedUserSelectImage', [selected.url, 'default']);
+            chrome.send('supervisedUserSelectImage', ['default', selected.url]);
             this.getScreenElement('image-grid').redraw();
             this.checkUserName_();
             this.updateNextButtonForUser_();
@@ -1148,7 +1148,7 @@ login.createScreen(
                   this.imagesData_[Math.floor(
                                        Math.random() * this.imagesData_.length)]
                       .url;
-              chrome.send('supervisedUserSelectImage', [selected, 'default']);
+              chrome.send('supervisedUserSelectImage', ['default', selected]);
             }
             imageGrid.selectedItemUrl = selected;
             this.getScreenElement('image-grid').redraw();
@@ -1462,7 +1462,7 @@ login.createScreen(
             this.context_.selectedImageUrl = imageGrid.selectedItemUrl;
             chrome.send(
                 'supervisedUserSelectImage',
-                [imageGrid.selectedItemUrl, imageGrid.selectionType]);
+                [imageGrid.selectionType, imageGrid.selectedItemUrl]);
           }
           // Start/stop camera on (de)selection.
           if (!imageGrid.inProgramSelection &&

chrome/browser/resources/chromeos/user_images_grid.js

@@ -309,6 +309,8 @@ cr.define('options', function() {
       previewClassList[value == 'default' ? 'add' : 'remove']('default-image');
       previewClassList[value == 'profile' ? 'add' : 'remove']('profile-image');
       previewClassList[value == 'camera' ? 'add' : 'remove']('camera');
+      if (!$('user-image-grid'))
+        return;
 
       var setFocusIfLost = function() {
         // Set focus to the grid, if focus is not on UI.

chrome/browser/ui/webui/chromeos/login/supervised_user_creation_screen_handler.cc

@@ -434,8 +434,8 @@ void SupervisedUserCreationScreenHandler::HandleDiscardPhoto() {
 }
 
 void SupervisedUserCreationScreenHandler::HandleSelectImage(
-    const std::string& image_url,
-    const std::string& image_type) {
+    const std::string& image_type,
+    const std::string& image_url) {
   if (delegate_)
     delegate_->OnImageSelected(image_type, image_url);
 }

chrome/browser/ui/webui/chromeos/login/supervised_user_creation_screen_handler.h

@@ -59,8 +59,8 @@ class SupervisedUserCreationScreenHandler : public BaseScreenHandler {
     virtual void HideFlow() = 0;
 
     virtual void OnPhotoTaken(const std::string& raw_data) = 0;
-    virtual void OnImageSelected(const std::string& image_url,
-                                 const std::string& image_type) = 0;
+    virtual void OnImageSelected(const std::string& image_type,
+                                 const std::string& image_url) = 0;
     virtual void OnImageAccepted() = 0;
     virtual void OnPageSelected(const std::string& page) = 0;
   };

chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.cc

@@ -99,23 +99,13 @@ void UserImageScreenHandler::DeclareLocalizedValues(
   builder->Add("profilePhotoLoading",
                IDS_IMAGE_SCREEN_PROFILE_LOADING_PHOTO);
   builder->Add("okButtonText", IDS_OK);
-  builder->Add("authorCredit", IDS_OPTIONS_SET_WALLPAPER_AUTHOR_TEXT);
   builder->Add("photoFromCamera", IDS_OPTIONS_CHANGE_PICTURE_PHOTO_FROM_CAMERA);
-  builder->Add("photoFlippedAccessibleText",
-               IDS_OPTIONS_PHOTO_FLIP_ACCESSIBLE_TEXT);
-  builder->Add("photoFlippedBackAccessibleText",
-               IDS_OPTIONS_PHOTO_FLIPBACK_ACCESSIBLE_TEXT);
-  builder->Add("photoCaptureAccessibleText",
-               IDS_OPTIONS_PHOTO_CAPTURE_ACCESSIBLE_TEXT);
-  builder->Add("photoDiscardAccessibleText",
-               IDS_OPTIONS_PHOTO_DISCARD_ACCESSIBLE_TEXT);
   builder->Add("syncingPreferences", IDS_IMAGE_SCREEN_SYNCING_PREFERENCES);
 }
 
 void UserImageScreenHandler::RegisterMessages() {
   AddCallback("getImages", &UserImageScreenHandler::HandleGetImages);
   AddCallback("screenReady", &UserImageScreenHandler::HandleScreenReady);
-  AddCallback("takePhoto", &UserImageScreenHandler::HandleTakePhoto);
   AddCallback("discardPhoto", &UserImageScreenHandler::HandleDiscardPhoto);
   AddCallback("photoTaken", &UserImageScreenHandler::HandlePhotoTaken);
   AddCallback("selectImage", &UserImageScreenHandler::HandleSelectImage);
@@ -143,23 +133,20 @@ void UserImageScreenHandler::HandlePhotoTaken(const std::string& image_url) {
   if (!net::DataURL::Parse(GURL(image_url), &mime_type, &charset, &raw_data))
     NOTREACHED();
   DCHECK_EQ("image/png", mime_type);
+  AccessibilityManager::Get()->PlayEarcon(
+      SOUND_CAMERA_SNAP, PlaySoundOption::SPOKEN_FEEDBACK_ENABLED);
 
   if (screen_)
     screen_->OnPhotoTaken(raw_data);
 }
 
-void UserImageScreenHandler::HandleTakePhoto() {
-  AccessibilityManager::Get()->PlayEarcon(
-      SOUND_CAMERA_SNAP, PlaySoundOption::SPOKEN_FEEDBACK_ENABLED);
-}
-
 void UserImageScreenHandler::HandleDiscardPhoto() {
   AccessibilityManager::Get()->PlayEarcon(
       SOUND_OBJECT_DELETE, PlaySoundOption::SPOKEN_FEEDBACK_ENABLED);
 }
 
-void UserImageScreenHandler::HandleSelectImage(const std::string& image_url,
-                                               const std::string& image_type,
+void UserImageScreenHandler::HandleSelectImage(const std::string& image_type,
+                                               const std::string& image_url,
                                                bool is_user_selection) {
   if (screen_)
     screen_->OnImageSelected(image_type, image_url, is_user_selection);

chrome/browser/ui/webui/chromeos/login/user_image_screen_handler.h

@@ -49,15 +49,12 @@ class UserImageScreenHandler : public UserImageView, public BaseScreenHandler {
   // Handles photo taken with WebRTC UI.
   void HandlePhotoTaken(const std::string& image_url);
 
-  // Handles 'take-photo' button click.
-  void HandleTakePhoto();
-
   // Handles 'discard-photo' button click.
   void HandleDiscardPhoto();
 
   // Handles clicking on default user image.
-  void HandleSelectImage(const std::string& image_url,
-                         const std::string& image_type,
+  void HandleSelectImage(const std::string& image_type,
+                         const std::string& image_url,
                          bool is_user_selection);
 
   // Called when user accept the image closing the screen.

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.html

@@ -57,10 +57,12 @@
             icon="cr:camera-alt" title="[[takePhotoLabel]]"
             hidden="[[!cameraPresent]]">
         </iron-icon>
-        <!-- Selects the file picker as the picture source. -->
-        <iron-icon data-type$="[[selectionTypesEnum_.FILE]]" role="radio"
-            icon="cr:folder" title="[[chooseFileLabel]]">
-        </iron-icon>
+        <template is="dom-if" if="[[chooseFileLabel]]">
+          <!-- Selects the file picker as the picture source. -->
+          <iron-icon data-type$="[[selectionTypesEnum_.FILE]]" role="radio"
+              icon="cr:folder" title="[[chooseFileLabel]]">
+          </iron-icon>
+        </template>
         <!-- Shows and selects the current profile picture. -->
         <img id="profileImage" role="radio"
             data-type$="[[selectionTypesEnum_.PROFILE]]"