WebUI: Change Picture: Use srcset to specify 2x images

Currently we are not using the 2x images in the 'change picture' UI.

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

chrome/browser/ui/webui/settings/chromeos/change_picture_handler.cc

@@ -269,7 +269,6 @@ void ChangePictureHandler::HandleSelectImage(const base::ListValue* args) {
 
   UserImageManager* user_image_manager =
       ChromeUserManager::Get()->GetUserImageManager(GetUser()->GetAccountId());
-  int image_index = user_manager::User::USER_IMAGE_INVALID;
   bool waiting_for_camera_photo = false;
 
   if (image_type == "old") {
@@ -284,8 +283,11 @@ void ChangePictureHandler::HandleSelectImage(const base::ListValue* args) {
                                default_user_image::kHistogramImageOld,
                                default_user_image::kHistogramImagesCount);
     VLOG(1) << "Selected old user image";
-  } else if (image_type == "default" &&
-             default_user_image::IsDefaultImageUrl(image_url, &image_index)) {
+  } else if (image_type == "default") {
+    int image_index = user_manager::User::USER_IMAGE_INVALID;
+    if (!default_user_image::IsDefaultImageUrl(image_url, &image_index))
+      LOG(FATAL) << "Invalid image_url for default image type: " << image_url;
+
     // One of the default user images.
     user_image_manager->SaveUserDefaultImageIndex(image_index);
 

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

@@ -80,7 +80,8 @@
         <template is="dom-repeat" items="[[defaultImages]]">
           <img role="radio"
               data-type$="[[selectionTypesEnum_.DEFAULT]]"
-              data-index$="[[index]]" src="[[item.url]]" title="[[item.title]]">
+              data-index$="[[index]]" src="[[item.url]]"
+              srcset="[[getImgSrc2x_(item.url)]]" title="[[item.title]]">
         </template>
       </iron-selector>
     </div>

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

@@ -207,4 +207,15 @@ Polymer({
     var activate = type != CrPicture.SelectionTypes.OLD;
     this.selectImage_(event.detail.item, activate);
   },
+
+  /**
+   * Returns the 2x (high dpi) image to use for 'srcset'. Note: 'src' will still
+   * be used as the 1x candidate as per the HTML spec.
+   * @param {string} url
+   * @return {string}
+   * @private
+   */
+  getImgSrc2x_: function(url) {
+    return url + '@2x 2x';
+  },
 });

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

@@ -39,7 +39,8 @@
     </style>
     <template is="dom-if"
         if="[[showImagePreview_(cameraActive_, imageSrc)]]">
-      <img alt="[[previewAltText]]" src="[[imageSrc]]">
+      <img alt="[[previewAltText]]" src="[[imageSrc]]"
+          srcset="[[getImgSrc2x_(imageSrc)]]"">
       <div id="discard" hidden="[[!showDiscard_(imageType)]]">
         <button is="paper-icon-button-light" id="discardImage"
             class="icon-delete" title="[[discardImageLabel]]"

ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.js

@@ -91,4 +91,15 @@ Polymer({
   onTapDiscardImage_: function() {
     this.fire('discard-image');
   },
+
+  /**
+   * Returns the 2x (high dpi) image to use for 'srcset'. Note: 'src' will still
+   * be used as the 1x candidate as per the HTML spec.
+   * @param {string} url
+   * @return {string}
+   * @private
+   */
+  getImgSrc2x_: function(url) {
+    return url + '@2x 2x';
+  },
 });