Use bubbles for error reporting

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

 // Copyright (c) 2013 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.
 
 /**
  * @fileoverview Locally managed user creation flow screen.
  */
 
 login.createScreen('LocallyManagedUserCreationScreen',
                    'managed-user-creation', function() {
@@ skipping 16 matching lines @@
 
     /** @override */
     decorate: function() {
       // Mousedown has to be used instead of click to be able to prevent 'focus'
       // event later.
       this.addEventListener('mousedown',
                             this.handleMouseDown_.bind(this));
       var screen = $('managed-user-creation');
       var managerPod = this;
       var hideManagerPasswordError = function(element) {
-        managerPod.passwordErrorElement.hidden = true;
+        managerPod.passwordElement.classList.remove('password-error');
+        $('bubble').hide();
       };
 
       screen.configureTextInput(
           this.passwordElement,
           screen.updateNextButtonForManager_.bind(screen),
           screen.validIfNotEmpty_.bind(screen),
           function(element) {
             screen.getScreenButton('next').focus();
           },
           hideManagerPasswordError);
     },
 
     /**
      * Updates UI elements from user data.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + ManagerPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user.displayName;
       this.emailElement.textContent = this.user.emailAddress;
     },
 
     showPasswordError: function() {
-      this.passwordErrorElement.hidden = false;
+      this.passwordElement.classList.add('password-error');
+      $('bubble').showTextForElement(
+          this.passwordElement,
+          loadTimeData.getString('createManagedUserWrongManagerPasswordText'),
+          cr.ui.Bubble.Attachment.BOTTOM,
+          24, 4);
     },
 
     /**
      * Brings focus to password field.
      */
     focusInput: function() {
       this.passwordElement.focus();
     },
 
     /**
@@ skipping 22 matching lines @@
 
     /**
      * Gets password element.
      * @type {!HTMLDivElement}
      */
     get passwordElement() {
       return this.querySelector('.managed-user-creation-manager-password');
     },
 
     /**
-     * Gets password error element.
-     * @type {!HTMLDivElement}
-     */
-    get passwordErrorElement() {
-      return this.
-          querySelector('.managed-user-creation-manager-wrong-password');
-    },
-
-    /**
      * Gets password enclosing block.
      * @type {!HTMLDivElement}
      */
     get passwordBlock() {
       return this.querySelector('.password-block');
     },
 
     /** @override */
     handleMouseDown_: function(e) {
       this.parentNode.selectPod(this);
@@ skipping 103 matching lines @@
       $('managed-user-creation-managers-pane').
           appendChild(this.managerList_);
 
       var userNameField = $('managed-user-creation-name');
       var passwordField = $('managed-user-creation-password');
       var password2Field = $('managed-user-creation-password-confirm');
 
       var creationScreen = this;
 
       var hideUserPasswordError = function(element) {
-        creationScreen.passwordErrorVisible = false;
+        $('bubble').hide();
+        $('managed-user-creation-password').classList.remove('password-error');
       };
 
       this.configureTextInput(userNameField,
                               this.checkUserName_.bind(this),
                               this.validIfNotEmpty_.bind(this),
                               function(element) {
                                 passwordField.focus();
                               },
                               this.clearUserNameError_.bind(this));
 
@@ skipping 286 matching lines @@
         return;
       }
       this.nameErrorVisible = false;
     },
 
     /**
      * Called by backend part in case of password validation failure.
      * @param {string} errorText - reason why this password is invalid.
      */
     showPasswordError: function(errorText) {
-      $('managed-user-creation-password-error').textContent = errorText;
-      this.passwordErrorVisible = true;
+      $('bubble').showTextForElement(
+          $('managed-user-creation-password'),
+          errorText,
+          cr.ui.Bubble.Attachment.RIGHT,
+          24, 4);
+      $('managed-user-creation-password').classList.add('password-error');
       $('managed-user-creation-password').focus();
 
       this.setButtonDisabledStatus('next', true);
     },
 
     /**
      * True if user name error should be displayed.
      * @type {boolean}
      */
     set nameErrorVisible(value) {
       $('managed-user-creation-name-error').
           classList.toggle('error', value);
       $('managed-user-creation-name').
           classList.toggle('duplicate-name', value);
       if (!value)
         $('managed-user-creation-name-error').textContent = '';
     },
 
     /**
-     * True if user name error should be displayed.
-     * @type {boolean}
-     */
-    set passwordErrorVisible(value) {
-      $('managed-user-creation-password-error').
-          classList.toggle('error', value);
-      if (!value)
-        $('managed-user-creation-password-error').textContent = '';
-    },
-
-    /**
      * Updates state of Continue button after minimal checks.
      * @return {boolean} true, if form seems to be valid.
      * @private
      */
     updateNextButtonForManager_: function() {
       var selectedPod = this.managerList_.selectedPod_;
       canProceed = null != selectedPod &&
                    selectedPod.passwordElement.value.length > 0;
 
       this.setButtonDisabledStatus('next', !canProceed);
@@ skipping 242 matching lines @@
     },
 
     showIntroPage: function() {
       $('managed-user-creation-password').value = '';
       $('managed-user-creation-password-confirm').value = '';
       $('managed-user-creation-name').value = '';
 
       this.lastVerifiedName_ = null;
       this.lastIncorrectUserName_ = null;
       this.passwordErrorVisible = false;
+      $('managed-user-creation-password').classList.remove('password-error');
       this.nameErrorVisible = false;
 
       this.setVisiblePage_('intro');
     },
 
     showManagerPage: function() {
       this.setVisiblePage_('manager');
     },
 
     showUsernamePage: function() {
@@ skipping 12 matching lines @@
       this.setVisiblePage_('error');
     },
 
     showManagerPasswordError: function() {
       this.disabled = false;
       this.showSelectedManagerPasswordError_();
     }
   };
 });