Upstream version 9.38.198.0

[platform/framework/web/crosswalk.git] / src / chrome / browser / resources / chromeos / login / oobe_screen_user_image.js

diff --git a/src/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js b/src/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js
index 0db36dc..3979dc7 100644 (file)
--- a/src/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js
+++ b/src/chrome/browser/resources/chromeos/login/oobe_screen_user_image.js
@@ -61,11 +61,6 @@ cr.define('login', function() {
     selectedUserImage_: -1,
 
     /**
-     * Indicates if profile picture should be displayed on current screen.
-     */
-    profilePictureEnabled_: false,
-
-    /**
      * URL for profile picture.
      */
     profileImageUrl_: null,
@@ -97,10 +92,26 @@ cr.define('login', function() {
           loadTimeData.getString('takePhoto'),
           loadTimeData.getString('photoFromCamera'));
 
-      this.setProfilePictureEnabled_(true);
-
       this.profileImageLoading = true;
 
+      // Profile image data (if present).
+      this.profileImage_ = imageGrid.addItem(
+          ButtonImages.PROFILE_PICTURE,           // Image URL.
+          loadTimeData.getString('profilePhoto'), // Title.
+          undefined,                              // Click handler.
+          0,                                      // Position.
+          function(el) {
+            // Custom decorator for Profile image element.
+            var spinner = el.ownerDocument.createElement('div');
+            spinner.className = 'spinner';
+            var spinnerBg = el.ownerDocument.createElement('div');
+            spinnerBg.className = 'spinner-bg';
+            spinnerBg.appendChild(spinner);
+            el.appendChild(spinnerBg);
+            el.id = 'profile-image';
+          });
+      this.profileImage_.type = 'profile';
+
       $('take-photo').addEventListener(
           'click', this.handleTakePhoto_.bind(this));
       $('discard-photo').addEventListener(
@@ -108,10 +119,7 @@ cr.define('login', function() {
 
       // Toggle 'animation' class for the duration of WebKit transition.
       $('flip-photo').addEventListener(
-          'click', function(e) {
-            previewElement.classList.add('animation');
-            imageGrid.flipPhoto = !imageGrid.flipPhoto;
-          });
+          'click', this.handleFlipPhoto_.bind(this));
       $('user-image-stream-crop').addEventListener(
           'webkitTransitionEnd', function(e) {
             previewElement.classList.remove('animation');
@@ -167,8 +175,10 @@ cr.define('login', function() {
     },
     set profileImageLoading(value) {
       this.profileImageLoading_ = value;
-      $('user-image-screen-main').classList[
-          value ? 'add' : 'remove']('profile-image-loading');
+      $('user-image-screen-main').classList.toggle('profile-image-loading',
+                                                   value);
+      if (value)
+        announceAccessibleMessage(loadTimeData.getString('syncingPreferences'));
       this.updateProfileImageCaption_();
     },
 
@@ -198,7 +208,7 @@ cr.define('login', function() {
 
       // Camera selection
       if (imageGrid.selectionType == 'camera') {
-        $('flip-photo').tabIndex = 0;
+        $('flip-photo').tabIndex = 1;
         // No current image selected.
         if (imageGrid.cameraLive) {
           imageGrid.previewElement.classList.remove('phototaken');
@@ -242,10 +252,23 @@ cr.define('login', function() {
     },
 
     /**
+     * Handle camera-photo flip.
+     */
+    handleFlipPhoto_: function() {
+      var imageGrid = $('user-image-grid');
+      imageGrid.previewElement.classList.add('animation');
+      imageGrid.flipPhoto = !imageGrid.flipPhoto;
+      var flipMessageId = imageGrid.flipPhoto ?
+         'photoFlippedAccessibleText' : 'photoFlippedBackAccessibleText';
+      announceAccessibleMessage(loadTimeData.getString(flipMessageId));
+    },
+
+    /**
      * Handle photo capture from the live camera stream.
      */
     handleTakePhoto_: function(e) {
       $('user-image-grid').takePhoto();
+      chrome.send('takePhoto');
     },
 
     /**
@@ -254,7 +277,7 @@ cr.define('login', function() {
      */
     handlePhotoTaken_: function(e) {
       chrome.send('photoTaken', [e.dataURL]);
-      this.announceAccessibleMessage_(
+      announceAccessibleMessage(
           loadTimeData.getString('photoCaptureAccessibleText'));
     },
 
@@ -272,29 +295,12 @@ cr.define('login', function() {
     handleDiscardPhoto_: function(e) {
       var imageGrid = $('user-image-grid');
       imageGrid.discardPhoto();
-      this.announceAccessibleMessage_(
+      chrome.send('discardPhoto');
+      announceAccessibleMessage(
           loadTimeData.getString('photoDiscardAccessibleText'));
     },
 
     /**
-     * Add an accessible message to the page that will be announced to
-     * users who have spoken feedback on, but will be invisible to all
-     * other users. It's removed right away so it doesn't clutter the DOM.
-     */
-    announceAccessibleMessage_: function(msg) {
-      var element = document.createElement('div');
-      element.setAttribute('aria-live', 'polite');
-      element.style.position = 'relative';
-      element.style.left = '-9999px';
-      element.style.height = '0px';
-      element.innerText = msg;
-      document.body.appendChild(element);
-      window.setTimeout(function() {
-        document.body.removeChild(element);
-      }, 0);
-    },
-
-    /**
      * Event handler that is invoked just before the screen is shown.
      * @param {object} data Screen init payload.
      */
@@ -354,32 +360,8 @@ cr.define('login', function() {
      * @private
      */
     setProfilePictureEnabled_: function(enabled) {
-      if (this.profilePictureEnabled_ == enabled)
-        return;
-      this.profilePictureEnabled_ = enabled;
       var imageGrid = $('user-image-grid');
       if (enabled) {
-        var url = ButtonImages.PROFILE_PICTURE;
-        if (!this.profileImageLoading && this.profileImageUrl_ !== null) {
-          url = this.profileImageUrl_;
-        }
-        // Profile image data (if present).
-        this.profileImage_ = imageGrid.addItem(
-            url,                                    // Image URL.
-            loadTimeData.getString('profilePhoto'), // Title.
-            undefined,                              // Click handler.
-            0,                                      // Position.
-            this.profileImageLoading ? function(el) {
-              // Custom decorator for Profile image element.
-              var spinner = el.ownerDocument.createElement('div');
-              spinner.className = 'spinner';
-              var spinnerBg = el.ownerDocument.createElement('div');
-              spinnerBg.className = 'spinner-bg';
-              spinnerBg.appendChild(spinner);
-              el.appendChild(spinnerBg);
-              el.id = 'profile-image';
-            } : undefined);
-        this.profileImage_.type = 'profile';
       } else {
         imageGrid.removeItem(this.profileImage_);
       }