ChromeOS OOBE: use old-style bubble for OOBE Accessibility popup.

ui/login/bubble.js

Index: ui/login/bubble.js
diff --git a/ui/login/bubble.js b/ui/login/bubble.js
index 9c86e5a5c0028e778dad3d71b36cc3b7d31dc7f0..29a4c1e8f24ae4519b86b3a7974c4a00fb348951 100644
--- a/ui/login/bubble.js
+++ b/ui/login/bubble.js
@@ -134,13 +134,28 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Sets the attachment of the bubble.
+     * @param {!Attachment} attachment Bubble attachment.
+     */
+    setAttachment_: function(attachment) {
+      var style_classlist = ['bubble-right', 'bubble-left',

[xiyuan, 2016/11/17 17:07:13]

nit: style_classlist -> styleClassList

[Alexander Alekseev, 2016/11/17 23:13:57]

Done.

+                             'bubble-top', 'bubble-bottom'];
+      for (var i = 0; i < style_classlist.length; ++i)
+        this.classList.toggle(style_classlist[i], i == attachment);
+    },
+
+    /**
      * Shows the bubble for given anchor element.
      * @param {!Object} pos Bubble position (left, top, right, bottom in px).
      * @param {HTMLElement} opt_content Content to show in bubble.
      *     If not specified, bubble element content is shown.
+     * @param {!Attachment} opt_attachment Bubble attachment (on which side of

[xiyuan, 2016/11/17 17:07:13]

opt_ prefix means optional, but {!Attachment} means this arg must be set. The
two are not consistent.

If we want to get rid of opt_, please move it before opt_content to keep all
opt_ args at the end. Otherwise, update the doc to {Attachment=}

[Alexander Alekseev, 2016/11/17 23:13:57]

Done.

+     *     the element it should be displayed).
+     * @param {boolean=} opt_oldstyle Optional flag to force old style bubble,
+     *     i.e. pre-MD-style.
      * @private
      */
-    showContentAt_: function(pos, opt_content) {
+    showContentAt_: function(pos, opt_content, opt_attachment, opt_oldstyle) {
       this.style.top = this.style.left = this.style.right = this.style.bottom =
           'auto';
       for (var k in pos) {
@@ -150,6 +165,11 @@ cr.define('cr.ui', function() {
       if (opt_content !== undefined)
         this.replaceContent(opt_content);
 
+      if (opt_oldstyle) {
+        this.setAttribute('oldstyle', '');
+        this.setAttachment_(opt_attachment);
+      }
+
       this.hidden = false;
       this.classList.remove('faded');
     },
@@ -172,8 +192,12 @@ cr.define('cr.ui', function() {
      * @param {number=} opt_padding Optional padding of the bubble.
      */
     showForElement: function(el, attachment, opt_offset, opt_padding) {
+      /* showForElement() is used only to display Accessibility popup in
+       * oobe_screen_network*. It requires old-style bubble, so it is safe
+       * to always set this flag here.
+       */
       this.showContentForElement(
-          el, attachment, undefined, opt_offset, opt_padding);
+          el, attachment, undefined, opt_offset, opt_padding, undefined, true);
     },
 
     /**
@@ -191,15 +215,20 @@ cr.define('cr.ui', function() {
      * @param {number=} opt_padding Optional padding of the bubble.
      * @param {boolean=} opt_match_width Optional flag to force the bubble have
      *     the same width as the element it it attached to.
+     * @param {boolean=} opt_oldstyle Optional flag to force old style bubble,
+     *     i.e. pre-MD-style.
      */
     showContentForElement: function(el, attachment, opt_content,
-                                    opt_offset, opt_padding, opt_match_width) {
+                                    opt_offset, opt_padding, opt_match_width,
+                                    opt_oldstyle) {
       /** @const */ var ARROW_OFFSET = 25;
       /** @const */ var DEFAULT_PADDING = 18;
 
       if (opt_padding == undefined)
         opt_padding = DEFAULT_PADDING;
-      opt_padding += 10;
+
+      if (!opt_oldstyle)
+        opt_padding += 10;
 
       var origin = cr.ui.login.DisplayManager.getPosition(el);
       var offset = opt_offset == undefined ?
@@ -263,7 +292,7 @@ cr.define('cr.ui', function() {
       }
 
       this.anchor_ = el;
-      this.showContentAt_(pos, opt_content);
+      this.showContentAt_(pos, opt_content, attachment, opt_oldstyle);
     },
 
     /**