[cr-action-menu] Use clientWidth for rtl flipping.

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js

 // Copyright 2016 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.
 
 /**
  * @typedef {{
  *   top: number,
  *   left: number,
  *   width: (number|undefined),
  *   height: (number|undefined),
@@ skipping 71 matching lines @@
  */
 function getDefaultShowConfig() {
   var doc = document.scrollingElement;
   return {
     top: 0,
     left: 0,
     height: 0,
     width: 0,
     anchorAlignmentX: AnchorAlignment.AFTER_START,
     anchorAlignmentY: AnchorAlignment.AFTER_START,
-    minX: doc.scrollLeft,
-    minY: doc.scrollTop,
-    maxX: doc.scrollLeft + window.innerWidth,
-    maxY: doc.scrollTop + window.innerHeight,
+    minX: 0,
+    minY: 0,
+    maxX: 0,
+    maxY: 0,
   };
 }
 
 Polymer({
   is: 'cr-action-menu',
   extends: 'dialog',
 
   /**
    * The element which the action menu will be anchored to. Also the element
    * where focus will be returned after the menu is closed. Only populated if
@@ skipping 140 matching lines @@
    * Shows the menu anchored to the given element.
    * @param {!Element} anchorElement
    * @param {ShowConfig=} opt_config
    */
   showAt: function(anchorElement, opt_config) {
     this.anchorElement_ = anchorElement;
     // Scroll the anchor element into view so that the bounding rect will be
     // accurate for where the menu should be shown.
     this.anchorElement_.scrollIntoViewIfNeeded();
 
-    // Save the scroll position that ensures the anchor element is onscreen.
-    var doc = document.scrollingElement;
-    var scrollLeft = doc.scrollLeft;
-    var scrollTop = doc.scrollTop;
-
-    // Reset position so that layout isn't affected by the previous position,
-    // and so that the dialog is positioned at the top-start corner of the
-    // document.
-    this.resetStyle_();
-
-    // Show the dialog which will focus the top-start of the body. This makes
-    // the client rect calculation relative to the top-start of the body.
-    this.showModal();
-
     var rect = this.anchorElement_.getBoundingClientRect();
-    this.positionDialog_(/** @type {ShowConfig} */ (Object.assign(
+    this.showAtPosition(/** @type {ShowConfig} */ (Object.assign(
         {
           top: rect.top,
           left: rect.left,
           height: rect.height,
           width: rect.width,
           // Default to anchoring towards the left.
           anchorAlignmentX: AnchorAlignment.BEFORE_END,
-          minX: scrollLeft,
-          minY: scrollTop,
-          maxX: scrollLeft + window.innerWidth,
-          maxY: scrollTop + window.innerHeight,
         },
         opt_config)));
-
-    // Restore the scroll position.
-    doc.scrollTop = scrollTop;
-    doc.scrollLeft = scrollLeft;
-
-    this.addCloseListeners_();
   },
 
   /**
    * Shows the menu anchored to the given box. The anchor alignment is
    * specified as an X and Y alignment which represents a point in the anchor
    * where the menu will align to, which can have the menu either before or
    * after the given point in each axis. Center alignment places the center of
-   * the menu in line with the center of the anchor.
+   * the menu in line with the center of the anchor. Coordinates are relative to
+   * the top-left of the viewport.
    *
    *            y-start
    *         _____________
    *         |           |
    *         |           |
    *         |   CENTER  |
    * x-start |     x     | x-end
    *         |           |
    *         |anchor box |
    *         |___________|
    *
    *             y-end
    *
    * For example, aligning the menu to the inside of the top-right edge of
    * the anchor, extending towards the bottom-left would use a alignment of
    * (BEFORE_END, AFTER_START), whereas centering the menu below the bottom
    * edge of the anchor would use (CENTER, AFTER_END).
    *
    * @param {!ShowConfig} config
    */
   showAtPosition: function(config) {
+    // Save the scroll position of the viewport.
+    var doc = document.scrollingElement;
+    var scrollLeft = doc.scrollLeft;
+    var scrollTop = doc.scrollTop;
+
+    // Reset position so that layout isn't affected by the previous position,
+    // and so that the dialog is positioned at the top-start corner of the
+    // document.
     this.resetStyle_();
     this.showModal();
-    this.positionDialog_(config);
+
+    config.top += scrollTop;
+    config.left += scrollLeft;
+
+    this.positionDialog_(/** @type {ShowConfig} */ (Object.assign(
+        {
+          minX: scrollLeft,
+          minY: scrollTop,
+          maxX: scrollLeft + doc.clientWidth,
+          maxY: scrollTop + doc.clientHeight,
+        },
+        config)));
+
+    // Restore the scroll position.
+    doc.scrollTop = scrollTop;
+    doc.scrollLeft = scrollLeft;
     this.addCloseListeners_();
   },
 
   /** @private */
   resetStyle_: function() {
     this.style.left = '';
     this.style.right = '';
     this.style.top = '0';
   },
 
   /**
+   * Position the dialog using the coordinates in config. Coordinates are
+   * relative to the top-left of the viewport when scrolled to (0, 0).
    * @param {!ShowConfig} config
    * @private
    */
   positionDialog_: function(config) {
     var c = Object.assign(getDefaultShowConfig(), config);
 
     var top = c.top;
     var left = c.left;
     var bottom = top + c.height;
     var right = left + c.width;
 
     // Flip the X anchor in RTL.
     var rtl = getComputedStyle(this).direction == 'rtl';
     if (rtl)
       c.anchorAlignmentX *= -1;
 
     var menuLeft = getStartPointWithAnchor(
         left, right, this.offsetWidth, c.anchorAlignmentX, c.minX, c.maxX);
 
     if (rtl) {
-      var menuRight = document.body.scrollWidth - menuLeft - this.offsetWidth;
+      var menuRight =
+          document.scrollingElement.clientWidth - menuLeft - this.offsetWidth;
       this.style.right = menuRight + 'px';
     } else {
       this.style.left = menuLeft + 'px';
     }
 
     var menuTop = getStartPointWithAnchor(
         top, bottom, this.offsetHeight, c.anchorAlignmentY, c.minY, c.maxY);
     this.style.top = menuTop + 'px';
   },
 
   /**
    * @private
    */
   addCloseListeners_: function() {
     this.boundClose_ = this.boundClose_ || function() {
       if (this.open)
         this.close();
     }.bind(this);
     window.addEventListener('resize', this.boundClose_);
     window.addEventListener('popstate', this.boundClose_);
   },
 });
 })();