gecko-dev/toolkit/devtools/LayoutHelpers.jsm

/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

const Cu = Components.utils;
const Ci = Components.interfaces;
const Cr = Components.results;

Cu.import("resource://gre/modules/XPCOMUtils.jsm");

XPCOMUtils.defineLazyModuleGetter(this, "Services",
  "resource://gre/modules/Services.jsm");

this.EXPORTED_SYMBOLS = ["LayoutHelpers"];

this.LayoutHelpers = LayoutHelpers = function(aTopLevelWindow) {
  this._topDocShell = aTopLevelWindow.QueryInterface(Ci.nsIInterfaceRequestor)
                                     .getInterface(Ci.nsIWebNavigation)
                                     .QueryInterface(Ci.nsIDocShell);
};

LayoutHelpers.prototype = {

  /**
   * Get box quads adjusted for iframes and zoom level.
   *
   * @param {DOMNode} node
   *        The node for which we are to get the box model region quads
   * @param  {String} region
   *         The box model region to return:
   *         "content", "padding", "border" or "margin"
   */
  getAdjustedQuads: function(node, region) {
    if (!node) {
      return;
    }

    let [quads] = node.getBoxQuads({
      box: region
    });

    if (!quads) {
      return;
    }

    let [xOffset, yOffset] = this._getNodeOffsets(node);
    let scale = this.calculateScale(node);

    return {
      p1: {
        w: quads.p1.w * scale,
        x: quads.p1.x * scale + xOffset,
        y: quads.p1.y * scale + yOffset,
        z: quads.p1.z * scale
      },
      p2: {
        w: quads.p2.w * scale,
        x: quads.p2.x * scale + xOffset,
        y: quads.p2.y * scale + yOffset,
        z: quads.p2.z * scale
      },
      p3: {
        w: quads.p3.w * scale,
        x: quads.p3.x * scale + xOffset,
        y: quads.p3.y * scale + yOffset,
        z: quads.p3.z * scale
      },
      p4: {
        w: quads.p4.w * scale,
        x: quads.p4.x * scale + xOffset,
        y: quads.p4.y * scale + yOffset,
        z: quads.p4.z * scale
      },
      bounds: {
        bottom: quads.bounds.bottom * scale + yOffset,
        height: quads.bounds.height * scale,
        left: quads.bounds.left * scale + xOffset,
        right: quads.bounds.right * scale + xOffset,
        top: quads.bounds.top * scale + yOffset,
        width: quads.bounds.width * scale,
        x: quads.bounds.x * scale + xOffset,
        y: quads.bounds.y * scale + yOffset
      }
    };
  },

  calculateScale: function(node) {
    let win = node.ownerDocument.defaultView;
    let winUtils = win.QueryInterface(Ci.nsIInterfaceRequestor)
                      .getInterface(Ci.nsIDOMWindowUtils);
    return winUtils.fullZoom;
  },

  /**
   * Compute the absolute position and the dimensions of a node, relativalely
   * to the root window.
   *
   * @param nsIDOMNode aNode
   *        a DOM element to get the bounds for
   * @param nsIWindow aContentWindow
   *        the content window holding the node
   */
  getRect: function LH_getRect(aNode, aContentWindow) {
    let frameWin = aNode.ownerDocument.defaultView;
    let clientRect = aNode.getBoundingClientRect();

    // Go up in the tree of frames to determine the correct rectangle.
    // clientRect is read-only, we need to be able to change properties.
    let rect = {top: clientRect.top + aContentWindow.pageYOffset,
            left: clientRect.left + aContentWindow.pageXOffset,
            width: clientRect.width,
            height: clientRect.height};

    // We iterate through all the parent windows.
    while (true) {

      // Are we in the top-level window?
      if (this.isTopLevelWindow(frameWin)) {
        break;
      }

      let frameElement = this.getFrameElement(frameWin);
      if (!frameElement) {
        break;
      }

      // We are in an iframe.
      // We take into account the parent iframe position and its
      // offset (borders and padding).
      let frameRect = frameElement.getBoundingClientRect();

      let [offsetTop, offsetLeft] =
        this.getIframeContentOffset(frameElement);

      rect.top += frameRect.top + offsetTop;
      rect.left += frameRect.left + offsetLeft;

      frameWin = this.getParentWindow(frameWin);
    }

    return rect;
  },

  /**
   * Returns iframe content offset (iframe border + padding).
   * Note: this function shouldn't need to exist, had the platform provided a
   * suitable API for determining the offset between the iframe's content and
   * its bounding client rect. Bug 626359 should provide us with such an API.
   *
   * @param aIframe
   *        The iframe.
   * @returns array [offsetTop, offsetLeft]
   *          offsetTop is the distance from the top of the iframe and the
   *            top of the content document.
   *          offsetLeft is the distance from the left of the iframe and the
   *            left of the content document.
   */
  getIframeContentOffset: function LH_getIframeContentOffset(aIframe) {
    let style = aIframe.contentWindow.getComputedStyle(aIframe, null);

    // In some cases, the computed style is null
    if (!style) {
      return [0, 0];
    }

    let paddingTop = parseInt(style.getPropertyValue("padding-top"));
    let paddingLeft = parseInt(style.getPropertyValue("padding-left"));

    let borderTop = parseInt(style.getPropertyValue("border-top-width"));
    let borderLeft = parseInt(style.getPropertyValue("border-left-width"));

    return [borderTop + paddingTop, borderLeft + paddingLeft];
  },

  /**
   * Find an element from the given coordinates. This method descends through
   * frames to find the element the user clicked inside frames.
   *
   * @param DOMDocument aDocument the document to look into.
   * @param integer aX
   * @param integer aY
   * @returns Node|null the element node found at the given coordinates.
   */
  getElementFromPoint: function LH_elementFromPoint(aDocument, aX, aY) {
    let node = aDocument.elementFromPoint(aX, aY);
    if (node && node.contentDocument) {
      if (node instanceof Ci.nsIDOMHTMLIFrameElement) {
        let rect = node.getBoundingClientRect();

        // Gap between the iframe and its content window.
        let [offsetTop, offsetLeft] = this.getIframeContentOffset(node);

        aX -= rect.left + offsetLeft;
        aY -= rect.top + offsetTop;

        if (aX < 0 || aY < 0) {
          // Didn't reach the content document, still over the iframe.
          return node;
        }
      }
      if (node instanceof Ci.nsIDOMHTMLIFrameElement ||
          node instanceof Ci.nsIDOMHTMLFrameElement) {
        let subnode = this.getElementFromPoint(node.contentDocument, aX, aY);
        if (subnode) {
          node = subnode;
        }
      }
    }
    return node;
  },

  /**
   * Scroll the document so that the element "elem" appears in the viewport.
   *
   * @param Element elem the element that needs to appear in the viewport.
   * @param bool centered true if you want it centered, false if you want it to
   * appear on the top of the viewport. It is true by default, and that is
   * usually what you want.
   */
  scrollIntoViewIfNeeded: function(elem, centered) {
    // We want to default to centering the element in the page,
    // so as to keep the context of the element.
    centered = centered === undefined? true: !!centered;

    let win = elem.ownerDocument.defaultView;
    let clientRect = elem.getBoundingClientRect();

    // The following are always from the {top, bottom, left, right}
    // of the viewport, to the {top, …} of the box.
    // Think of them as geometrical vectors, it helps.
    // The origin is at the top left.

    let topToBottom = clientRect.bottom;
    let bottomToTop = clientRect.top - win.innerHeight;
    let leftToRight = clientRect.right;
    let rightToLeft = clientRect.left - win.innerWidth;
    let xAllowed = true;  // We allow one translation on the x axis,
    let yAllowed = true;  // and one on the y axis.

    // Whatever `centered` is, the behavior is the same if the box is
    // (even partially) visible.

    if ((topToBottom > 0 || !centered) && topToBottom <= elem.offsetHeight) {
      win.scrollBy(0, topToBottom - elem.offsetHeight);
      yAllowed = false;
    } else
    if ((bottomToTop < 0 || !centered) && bottomToTop >= -elem.offsetHeight) {
      win.scrollBy(0, bottomToTop + elem.offsetHeight);
      yAllowed = false;
    }

    if ((leftToRight > 0 || !centered) && leftToRight <= elem.offsetWidth) {
      if (xAllowed) {
        win.scrollBy(leftToRight - elem.offsetWidth, 0);
        xAllowed = false;
      }
    } else
    if ((rightToLeft < 0 || !centered) && rightToLeft >= -elem.offsetWidth) {
      if (xAllowed) {
        win.scrollBy(rightToLeft + elem.offsetWidth, 0);
        xAllowed = false;
      }
    }

    // If we want it centered, and the box is completely hidden,
    // then we center it explicitly.

    if (centered) {

      if (yAllowed && (topToBottom <= 0 || bottomToTop >= 0)) {
        win.scroll(win.scrollX,
                   win.scrollY + clientRect.top
                   - (win.innerHeight - elem.offsetHeight) / 2);
      }

      if (xAllowed && (leftToRight <= 0 || rightToLeft <= 0)) {
        win.scroll(win.scrollX + clientRect.left
                   - (win.innerWidth - elem.offsetWidth) / 2,
                   win.scrollY);
      }
    }

    if (!this.isTopLevelWindow(win)) {
      // We are inside an iframe.
      let frameElement = this.getFrameElement(win);
      this.scrollIntoViewIfNeeded(frameElement, centered);
    }
  },

  /**
   * Check if a node and its document are still alive
   * and attached to the window.
   *
   * @param aNode
   */
  isNodeConnected: function LH_isNodeConnected(aNode)
  {
    try {
      let connected = (aNode.ownerDocument && aNode.ownerDocument.defaultView &&
                      !(aNode.compareDocumentPosition(aNode.ownerDocument.documentElement) &
                      aNode.DOCUMENT_POSITION_DISCONNECTED));
      return connected;
    } catch (e) {
      // "can't access dead object" error
      return false;
    }
  },

  /**
   * like win.parent === win, but goes through mozbrowsers and mozapps iframes.
   */
  isTopLevelWindow: function LH_isTopLevelWindow(win) {
    let docShell = win.QueryInterface(Ci.nsIInterfaceRequestor)
                   .getInterface(Ci.nsIWebNavigation)
                   .QueryInterface(Ci.nsIDocShell);

    return docShell === this._topDocShell;
  },

  /**
   * Check a window is part of the top level window.
   */
  isIncludedInTopLevelWindow: function LH_isIncludedInTopLevelWindow(win) {
    if (this.isTopLevelWindow(win)) {
      return true;
    }

    let parent = this.getParentWindow(win);
    if (!parent || parent === win) {
      return false;
    }

    return this.isIncludedInTopLevelWindow(parent);
  },

  /**
   * like win.parent, but goes through mozbrowsers and mozapps iframes.
   */
  getParentWindow: function LH_getParentWindow(win) {
    if (this.isTopLevelWindow(win)) {
      return null;
    }

    let docShell = win.QueryInterface(Ci.nsIInterfaceRequestor)
                   .getInterface(Ci.nsIWebNavigation)
                   .QueryInterface(Ci.nsIDocShell);

    if (docShell.isBrowserOrApp) {
      let parentDocShell = docShell.getSameTypeParentIgnoreBrowserAndAppBoundaries();
      return parentDocShell ? parentDocShell.contentViewer.DOMDocument.defaultView : null;
    } else {
      return win.parent;
    }
  },

  /**
   * like win.frameElement, but goes through mozbrowsers and mozapps iframes.
   *
   * @param DOMWindow win The window to get the frame for
   * @return DOMElement The element in which the window is embedded.
   */
  getFrameElement: function LH_getFrameElement(win) {
    if (this.isTopLevelWindow(win)) {
      return null;
    }

    let winUtils = win.
      QueryInterface(Components.interfaces.nsIInterfaceRequestor).
      getInterface(Components.interfaces.nsIDOMWindowUtils);

    return winUtils.containerElement;
  },

  /**
   * Get the x and y offsets for a node taking iframes into account.
   *
   * @param {DOMNode} node
   *        The node for which we are to get the offset
   */
  _getNodeOffsets: function(node) {
    let xOffset = 0;
    let yOffset = 0;
    let frameWin = node.ownerDocument.defaultView;
    let scale = this.calculateScale(node);

    while (true) {
      // Are we in the top-level window?
      if (this.isTopLevelWindow(frameWin)) {
        break;
      }

      let frameElement = this.getFrameElement(frameWin);
      if (!frameElement) {
        break;
      }

      // We are in an iframe.
      // We take into account the parent iframe position and its
      // offset (borders and padding).
      let frameRect = frameElement.getBoundingClientRect();

      let [offsetTop, offsetLeft] =
        this.getIframeContentOffset(frameElement);

      xOffset += frameRect.left + offsetLeft;
      yOffset += frameRect.top + offsetTop;

      frameWin = this.getParentWindow(frameWin);
    }

    return [xOffset * scale, yOffset * scale];
  },



  /********************************************************************
   * GetBoxQuads POLYFILL START TODO: Remove this when bug 917755 is fixed.
   ********************************************************************/
  _getBoxQuadsFromRect: function(rect, node) {
    let scale = this.calculateScale(node);
    let [xOffset, yOffset] = this._getNodeOffsets(node);

    let out = {
      p1: {
        x: rect.left * scale + xOffset,
        y: rect.top * scale + yOffset
      },
      p2: {
        x: (rect.left + rect.width) * scale + xOffset,
        y: rect.top * scale + yOffset
      },
      p3: {
        x: (rect.left + rect.width) * scale + xOffset,
        y: (rect.top + rect.height) * scale + yOffset
      },
      p4: {
        x: rect.left * scale + xOffset,
        y: (rect.top + rect.height) * scale + yOffset
      }
    };

    out.bounds = {
      bottom: out.p4.y,
      height: out.p4.y - out.p1.y,
      left: out.p1.x,
      right: out.p2.x,
      top: out.p1.y,
      width: out.p2.x - out.p1.x,
      x: out.p1.x,
      y: out.p1.y
    };

    return out;
  },

  _parseNb: function(distance) {
    let nb = parseFloat(distance, 10);
    return isNaN(nb) ? 0 : nb;
  },

  getAdjustedQuadsPolyfill: function(node, region) {
    // Get the border-box rect
    // Note that this is relative to the node's viewport, so before we can use
    // it, will need to go back up the frames like getRect
    let borderRect = node.getBoundingClientRect();

    // If the boxType is border, no need to go any further, we're done
    if (region === "border") {
      return this._getBoxQuadsFromRect(borderRect, node);
    }

    // Else, need to get margin/padding/border distances
    let style = node.ownerDocument.defaultView.getComputedStyle(node);
    let camel = s => s.substring(0, 1).toUpperCase() + s.substring(1);
    let distances = {border:{}, padding:{}, margin: {}};

    for (let side of ["top", "right", "bottom", "left"]) {
      distances.border[side] = this._parseNb(style["border" + camel(side) + "Width"]);
      distances.padding[side] = this._parseNb(style["padding" + camel(side)]);
      distances.margin[side] = this._parseNb(style["margin" + camel(side)]);
    }

    // From the border-box rect, calculate the content-box, padding-box and
    // margin-box rects
    function offsetRect(rect, offsetType, dir=1) {
      return {
        top: rect.top + (dir * distances[offsetType].top),
        left: rect.left + (dir * distances[offsetType].left),
        width: rect.width - (dir * (distances[offsetType].left + distances[offsetType].right)),
        height: rect.height - (dir * (distances[offsetType].top + distances[offsetType].bottom))
      };
    }

    if (region === "margin") {
      return this._getBoxQuadsFromRect(offsetRect(borderRect, "margin", -1), node);
    } else if (region === "padding") {
      return this._getBoxQuadsFromRect(offsetRect(borderRect, "border"), node);
    } else if (region === "content") {
      let paddingRect = offsetRect(borderRect, "border");
      return this._getBoxQuadsFromRect(offsetRect(paddingRect, "padding"), node);
    }
  },

  /********************************************************************
   * GetBoxQuads POLYFILL END
   ********************************************************************/
};