[cros] Error bubble on login is displayed to the left of Gaia frame.

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

 // Copyright (c) 2012 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 Display manager for WebUI OOBE and login.
  */
 
 // TODO(xiyuan): Find a better to share those constants.
-const SCREEN_SIGNIN = 'signin';
 const SCREEN_GAIA_SIGNIN = 'gaia-signin';
 const SCREEN_ACCOUNT_PICKER = 'account-picker';
 
 /* Accelerator identifiers. Must be kept in sync with webui_login_view.cc. */
 const ACCELERATOR_ACCESSIBILITY = 'accessibility';
 const ACCELERATOR_CANCEL = 'cancel';
 const ACCELERATOR_ENROLLMENT = 'enrollment';
 const ACCELERATOR_EXIT = 'exit';
 const ACCELERATOR_VERSION = 'version';
 
 cr.define('cr.ui.login', function() {
+  var Bubble = cr.ui.Bubble;
+
   /**
    * Constructor a display manager that manages initialization of screens,
    * transitions, error messages display.
    *
    * @constructor
    */
   function DisplayManager() {
   }
 
   DisplayManager.prototype = {
@@ skipping 46 matching lines @@
      */
     handleAccelerator: function(name) {
       if (name == ACCELERATOR_ACCESSIBILITY) {
         chrome.send('toggleAccessibility', []);
       } else if (name == ACCELERATOR_CANCEL) {
         if (this.currentScreen.cancel) {
           this.currentScreen.cancel();
         }
       } else if (name == ACCELERATOR_ENROLLMENT) {
         var currentStepId = this.screens_[this.currentStep_];
-        if (currentStepId == SCREEN_SIGNIN ||
-            currentStepId == SCREEN_GAIA_SIGNIN) {
+        if (currentStepId == SCREEN_GAIA_SIGNIN)
           chrome.send('toggleEnrollmentScreen', []);
-        }
       } else if (name == ACCELERATOR_EXIT) {
         if (this.currentScreen.exit) {
           this.currentScreen.exit();
         }
       } else if (name == ACCELERATOR_VERSION) {
         if (this.allowToggleVersion_)
           $('version-labels').hidden = !$('version-labels').hidden;
       }
     },
 
@@ skipping 187 matching lines @@
      * Returns true if Oobe UI is shown.
      */
     isOobeUI: function() {
       return !document.body.classList.contains('login-display');
     }
   };
 
   /**
    * Returns offset (top, left) of the element.
    * @param {!Element} element HTML element.
-   * @return {!Object} The offset (top, left).
+   * @return {!Object} The offset (top, left, right, bottom).

[altimofeev, 2012/02/03 11:49:30]

Seems like it is not true.

[Ivan Korotkov, 2012/02/07 17:18:00]

Fixed.

    */
   DisplayManager.getOffset = function(element) {
     var x = 0;
     var y = 0;
     while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
       x += element.offsetLeft - element.scrollLeft;
       y += element.offsetTop - element.scrollTop;
       element = element.offsetParent;
     }
     return { top: y, left: x };
   };
 
   /**
+   * Returns position (top, left, right, bottom) of the element.
+   * @param {!Element} element HTML element.
+   * @return {!Object} Element position (top, left, right, bottom).
+   */
+  DisplayManager.getPosition = function(element) {
+    var offset = DisplayManager.getOffset(element);
+    return { top: offset.top,
+             right: window.innerWidth - element.offsetWidth - offset.left,
+             bottom: window.innerHeight - element.offsetHeight - offset.top,
+             left: offset.left };
+  };
+
+  /**
    * Disables signin UI.
    */
   DisplayManager.disableSigninUI = function() {
     $('login-header-bar').disabled = true;
     $('pod-row').disabled = true;
   };
 
   /**
    * Shows signin UI.
    * @param {string} opt_email An optional email for signin UI.
@@ skipping 20 matching lines @@
 
   /**
    * Shows sign-in error bubble.
    * @param {number} loginAttempts Number of login attemps tried.
    * @param {string} message Error message to show.
    * @param {string} link Text to use for help link.
    * @param {number} helpId Help topic Id associated with help link.
    */
   DisplayManager.showSignInError = function(loginAttempts, message, link,
                                             helpId) {
-    var currentScreenId = Oobe.getInstance().currentScreen.id;
-    var anchor = undefined;
-    var anchorPos = undefined;
-    if (currentScreenId == SCREEN_SIGNIN) {
-      anchor = $('email');
-
-      // Show email field so that bubble shows up at the right location.
-      $(SCREEN_SIGNIN).reset(true);
-    } else if (currentScreenId == SCREEN_GAIA_SIGNIN) {
-      if ($(SCREEN_GAIA_SIGNIN).isLocal) {
-        $('add-user-button').hidden = true;
-        $('cancel-add-user-button').hidden = false;
-        // Reload offline version of the sign-in extension, which will show
-        // error itself.
-        chrome.send('offlineLogin', [$(SCREEN_GAIA_SIGNIN).email]);
-        return;
-      }
-      // Use anchorPos since we won't be able to get the input fields of Gaia.
-      anchorPos = DisplayManager.getOffset(Oobe.getInstance().currentScreen);
-
-      // Ideally, we should just use
-      //   anchorPos = DisplayManager.getOffset($('signin-frame'));
-      // to get a good anchor point. However, this always gives (0,0) on
-      // the device.
-      // TODO(xiyuan): Figure out why the above fails and get rid of this.
-      anchorPos.left += 150;  // (640 - 340) / 2
-
-      // TODO(xiyuan): Find a reliable way to align with Gaia UI.
-      anchorPos.left += 60;
-      anchorPos.top += 105;
-    } else if (currentScreenId == SCREEN_ACCOUNT_PICKER &&
-               $('pod-row').activatedPod) {
-      const MAX_LOGIN_ATTEMMPTS_IN_POD = 3;
-      if (loginAttempts > MAX_LOGIN_ATTEMMPTS_IN_POD) {
-        $('pod-row').activatedPod.showSigninUI();
-        return;
-      }
-
-      anchor = $('pod-row').activatedPod.mainInput;
-    }
-    if (!anchor && !anchorPos) {
-      console.log('Warning: Failed to find anchor for error :' +
-                  message);
-      return;
-    }
-
     var error = document.createElement('div');
 
     var messageDiv = document.createElement('div');
     messageDiv.className = 'error-message';
     messageDiv.textContent = message;
     error.appendChild(messageDiv);
 
     if (link) {
       messageDiv.classList.add('error-message-padding');
 
       var helpLink = document.createElement('a');
       helpLink.href = '#';
       helpLink.textContent = link;
-      helpLink.onclick = function(e) {
+      helpLink.addEventListener('click', function(e) {
         chrome.send('launchHelpApp', [helpId]);
-      };
+        e.preventDefault();
+      });
       error.appendChild(helpLink);
     }
 
-    if (anchor)
-      $('bubble').showContentForElement(anchor, error);
-    else if (anchorPos)
-      $('bubble').showContentAt(anchorPos.left, anchorPos.top, error);
+    var currentScreenId = Oobe.getInstance().currentScreen.id;
+    $(currentScreenId).showErrorBubble(loginAttempts, error);
   };
 
   /**
    * Clears error bubble.
    */
   DisplayManager.clearErrors = function() {
     $('bubble').hide();
   };
 
   /**
    * Sets text content for a div with |labelId|.
    * @param {string} labelId Id of the label div.
    * @param {string} labelText Text for the label.
    */
   DisplayManager.setLabelText = function(labelId, labelText) {
     $(labelId).textContent = labelText;
   };
 
   // Export
   return {
     DisplayManager: DisplayManager
   };
 });