Use bubbles for error reporting

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

Index: chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
diff --git a/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js b/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
index 56e28806bf334bf5e800a722aa5035cdf01acc06..82a0fcda68e4108b2e6c128ab537c76efe711fc7 100644
--- a/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
+++ b/chrome/browser/resources/chromeos/login/screen_locally_managed_user_creation.js
@@ -34,7 +34,8 @@ login.createScreen('LocallyManagedUserCreationScreen',
       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(
@@ -59,7 +60,12 @@ login.createScreen('LocallyManagedUserCreationScreen',
     },
 
     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);
     },
 
     /**
@@ -102,15 +108,6 @@ login.createScreen('LocallyManagedUserCreationScreen',
     },
 
     /**
-     * Gets password error element.
-     * @type {!HTMLDivElement}
-     */
-    get passwordErrorElement() {
-      return this.
-          querySelector('.managed-user-creation-manager-wrong-password');
-    },
-
-    /**
      * Gets password enclosing block.
      * @type {!HTMLDivElement}
      */
@@ -234,7 +231,8 @@ login.createScreen('LocallyManagedUserCreationScreen',
       var creationScreen = this;
 
       var hideUserPasswordError = function(element) {
-        creationScreen.passwordErrorVisible = false;
+        $('bubble').hide();
+        $('managed-user-creation-password').classList.remove('password-error');
       };
 
       this.configureTextInput(userNameField,
@@ -541,8 +539,12 @@ login.createScreen('LocallyManagedUserCreationScreen',
      * @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);
@@ -562,17 +564,6 @@ login.createScreen('LocallyManagedUserCreationScreen',
     },
 
     /**
-     * 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
@@ -835,6 +826,7 @@ login.createScreen('LocallyManagedUserCreationScreen',
       this.lastVerifiedName_ = null;
       this.lastIncorrectUserName_ = null;
       this.passwordErrorVisible = false;
+      $('managed-user-creation-password').classList.remove('password-error');
       this.nameErrorVisible = false;
 
       this.setVisiblePage_('intro');