michael@0: /* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: const Cu = Components.utils;
michael@0: const Ci = Components.interfaces;
michael@0: const Cr = Components.results;
michael@0: 
michael@0: Cu.import("resource://gre/modules/XPCOMUtils.jsm");
michael@0: 
michael@0: XPCOMUtils.defineLazyModuleGetter(this, "Services",
michael@0:   "resource://gre/modules/Services.jsm");
michael@0: 
michael@0: this.EXPORTED_SYMBOLS = ["LayoutHelpers"];
michael@0: 
michael@0: this.LayoutHelpers = LayoutHelpers = function(aTopLevelWindow) {
michael@0:   this._topDocShell = aTopLevelWindow.QueryInterface(Ci.nsIInterfaceRequestor)
michael@0:                                      .getInterface(Ci.nsIWebNavigation)
michael@0:                                      .QueryInterface(Ci.nsIDocShell);
michael@0: };
michael@0: 
michael@0: LayoutHelpers.prototype = {
michael@0: 
michael@0:   /**
michael@0:    * Get box quads adjusted for iframes and zoom level.
michael@0:    *
michael@0:    * @param {DOMNode} node
michael@0:    *        The node for which we are to get the box model region quads
michael@0:    * @param  {String} region
michael@0:    *         The box model region to return:
michael@0:    *         "content", "padding", "border" or "margin"
michael@0:    */
michael@0:   getAdjustedQuads: function(node, region) {
michael@0:     if (!node) {
michael@0:       return;
michael@0:     }
michael@0: 
michael@0:     let [quads] = node.getBoxQuads({
michael@0:       box: region
michael@0:     });
michael@0: 
michael@0:     if (!quads) {
michael@0:       return;
michael@0:     }
michael@0: 
michael@0:     let [xOffset, yOffset] = this._getNodeOffsets(node);
michael@0:     let scale = this.calculateScale(node);
michael@0: 
michael@0:     return {
michael@0:       p1: {
michael@0:         w: quads.p1.w * scale,
michael@0:         x: quads.p1.x * scale + xOffset,
michael@0:         y: quads.p1.y * scale + yOffset,
michael@0:         z: quads.p1.z * scale
michael@0:       },
michael@0:       p2: {
michael@0:         w: quads.p2.w * scale,
michael@0:         x: quads.p2.x * scale + xOffset,
michael@0:         y: quads.p2.y * scale + yOffset,
michael@0:         z: quads.p2.z * scale
michael@0:       },
michael@0:       p3: {
michael@0:         w: quads.p3.w * scale,
michael@0:         x: quads.p3.x * scale + xOffset,
michael@0:         y: quads.p3.y * scale + yOffset,
michael@0:         z: quads.p3.z * scale
michael@0:       },
michael@0:       p4: {
michael@0:         w: quads.p4.w * scale,
michael@0:         x: quads.p4.x * scale + xOffset,
michael@0:         y: quads.p4.y * scale + yOffset,
michael@0:         z: quads.p4.z * scale
michael@0:       },
michael@0:       bounds: {
michael@0:         bottom: quads.bounds.bottom * scale + yOffset,
michael@0:         height: quads.bounds.height * scale,
michael@0:         left: quads.bounds.left * scale + xOffset,
michael@0:         right: quads.bounds.right * scale + xOffset,
michael@0:         top: quads.bounds.top * scale + yOffset,
michael@0:         width: quads.bounds.width * scale,
michael@0:         x: quads.bounds.x * scale + xOffset,
michael@0:         y: quads.bounds.y * scale + yOffset
michael@0:       }
michael@0:     };
michael@0:   },
michael@0: 
michael@0:   calculateScale: function(node) {
michael@0:     let win = node.ownerDocument.defaultView;
michael@0:     let winUtils = win.QueryInterface(Ci.nsIInterfaceRequestor)
michael@0:                       .getInterface(Ci.nsIDOMWindowUtils);
michael@0:     return winUtils.fullZoom;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Compute the absolute position and the dimensions of a node, relativalely
michael@0:    * to the root window.
michael@0:    *
michael@0:    * @param nsIDOMNode aNode
michael@0:    *        a DOM element to get the bounds for
michael@0:    * @param nsIWindow aContentWindow
michael@0:    *        the content window holding the node
michael@0:    */
michael@0:   getRect: function LH_getRect(aNode, aContentWindow) {
michael@0:     let frameWin = aNode.ownerDocument.defaultView;
michael@0:     let clientRect = aNode.getBoundingClientRect();
michael@0: 
michael@0:     // Go up in the tree of frames to determine the correct rectangle.
michael@0:     // clientRect is read-only, we need to be able to change properties.
michael@0:     let rect = {top: clientRect.top + aContentWindow.pageYOffset,
michael@0:             left: clientRect.left + aContentWindow.pageXOffset,
michael@0:             width: clientRect.width,
michael@0:             height: clientRect.height};
michael@0: 
michael@0:     // We iterate through all the parent windows.
michael@0:     while (true) {
michael@0: 
michael@0:       // Are we in the top-level window?
michael@0:       if (this.isTopLevelWindow(frameWin)) {
michael@0:         break;
michael@0:       }
michael@0: 
michael@0:       let frameElement = this.getFrameElement(frameWin);
michael@0:       if (!frameElement) {
michael@0:         break;
michael@0:       }
michael@0: 
michael@0:       // We are in an iframe.
michael@0:       // We take into account the parent iframe position and its
michael@0:       // offset (borders and padding).
michael@0:       let frameRect = frameElement.getBoundingClientRect();
michael@0: 
michael@0:       let [offsetTop, offsetLeft] =
michael@0:         this.getIframeContentOffset(frameElement);
michael@0: 
michael@0:       rect.top += frameRect.top + offsetTop;
michael@0:       rect.left += frameRect.left + offsetLeft;
michael@0: 
michael@0:       frameWin = this.getParentWindow(frameWin);
michael@0:     }
michael@0: 
michael@0:     return rect;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Returns iframe content offset (iframe border + padding).
michael@0:    * Note: this function shouldn't need to exist, had the platform provided a
michael@0:    * suitable API for determining the offset between the iframe's content and
michael@0:    * its bounding client rect. Bug 626359 should provide us with such an API.
michael@0:    *
michael@0:    * @param aIframe
michael@0:    *        The iframe.
michael@0:    * @returns array [offsetTop, offsetLeft]
michael@0:    *          offsetTop is the distance from the top of the iframe and the
michael@0:    *            top of the content document.
michael@0:    *          offsetLeft is the distance from the left of the iframe and the
michael@0:    *            left of the content document.
michael@0:    */
michael@0:   getIframeContentOffset: function LH_getIframeContentOffset(aIframe) {
michael@0:     let style = aIframe.contentWindow.getComputedStyle(aIframe, null);
michael@0: 
michael@0:     // In some cases, the computed style is null
michael@0:     if (!style) {
michael@0:       return [0, 0];
michael@0:     }
michael@0: 
michael@0:     let paddingTop = parseInt(style.getPropertyValue("padding-top"));
michael@0:     let paddingLeft = parseInt(style.getPropertyValue("padding-left"));
michael@0: 
michael@0:     let borderTop = parseInt(style.getPropertyValue("border-top-width"));
michael@0:     let borderLeft = parseInt(style.getPropertyValue("border-left-width"));
michael@0: 
michael@0:     return [borderTop + paddingTop, borderLeft + paddingLeft];
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Find an element from the given coordinates. This method descends through
michael@0:    * frames to find the element the user clicked inside frames.
michael@0:    *
michael@0:    * @param DOMDocument aDocument the document to look into.
michael@0:    * @param integer aX
michael@0:    * @param integer aY
michael@0:    * @returns Node|null the element node found at the given coordinates.
michael@0:    */
michael@0:   getElementFromPoint: function LH_elementFromPoint(aDocument, aX, aY) {
michael@0:     let node = aDocument.elementFromPoint(aX, aY);
michael@0:     if (node && node.contentDocument) {
michael@0:       if (node instanceof Ci.nsIDOMHTMLIFrameElement) {
michael@0:         let rect = node.getBoundingClientRect();
michael@0: 
michael@0:         // Gap between the iframe and its content window.
michael@0:         let [offsetTop, offsetLeft] = this.getIframeContentOffset(node);
michael@0: 
michael@0:         aX -= rect.left + offsetLeft;
michael@0:         aY -= rect.top + offsetTop;
michael@0: 
michael@0:         if (aX < 0 || aY < 0) {
michael@0:           // Didn't reach the content document, still over the iframe.
michael@0:           return node;
michael@0:         }
michael@0:       }
michael@0:       if (node instanceof Ci.nsIDOMHTMLIFrameElement ||
michael@0:           node instanceof Ci.nsIDOMHTMLFrameElement) {
michael@0:         let subnode = this.getElementFromPoint(node.contentDocument, aX, aY);
michael@0:         if (subnode) {
michael@0:           node = subnode;
michael@0:         }
michael@0:       }
michael@0:     }
michael@0:     return node;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Scroll the document so that the element "elem" appears in the viewport.
michael@0:    *
michael@0:    * @param Element elem the element that needs to appear in the viewport.
michael@0:    * @param bool centered true if you want it centered, false if you want it to
michael@0:    * appear on the top of the viewport. It is true by default, and that is
michael@0:    * usually what you want.
michael@0:    */
michael@0:   scrollIntoViewIfNeeded: function(elem, centered) {
michael@0:     // We want to default to centering the element in the page,
michael@0:     // so as to keep the context of the element.
michael@0:     centered = centered === undefined? true: !!centered;
michael@0: 
michael@0:     let win = elem.ownerDocument.defaultView;
michael@0:     let clientRect = elem.getBoundingClientRect();
michael@0: 
michael@0:     // The following are always from the {top, bottom, left, right}
michael@0:     // of the viewport, to the {top, …} of the box.
michael@0:     // Think of them as geometrical vectors, it helps.
michael@0:     // The origin is at the top left.
michael@0: 
michael@0:     let topToBottom = clientRect.bottom;
michael@0:     let bottomToTop = clientRect.top - win.innerHeight;
michael@0:     let leftToRight = clientRect.right;
michael@0:     let rightToLeft = clientRect.left - win.innerWidth;
michael@0:     let xAllowed = true;  // We allow one translation on the x axis,
michael@0:     let yAllowed = true;  // and one on the y axis.
michael@0: 
michael@0:     // Whatever `centered` is, the behavior is the same if the box is
michael@0:     // (even partially) visible.
michael@0: 
michael@0:     if ((topToBottom > 0 || !centered) && topToBottom <= elem.offsetHeight) {
michael@0:       win.scrollBy(0, topToBottom - elem.offsetHeight);
michael@0:       yAllowed = false;
michael@0:     } else
michael@0:     if ((bottomToTop < 0 || !centered) && bottomToTop >= -elem.offsetHeight) {
michael@0:       win.scrollBy(0, bottomToTop + elem.offsetHeight);
michael@0:       yAllowed = false;
michael@0:     }
michael@0: 
michael@0:     if ((leftToRight > 0 || !centered) && leftToRight <= elem.offsetWidth) {
michael@0:       if (xAllowed) {
michael@0:         win.scrollBy(leftToRight - elem.offsetWidth, 0);
michael@0:         xAllowed = false;
michael@0:       }
michael@0:     } else
michael@0:     if ((rightToLeft < 0 || !centered) && rightToLeft >= -elem.offsetWidth) {
michael@0:       if (xAllowed) {
michael@0:         win.scrollBy(rightToLeft + elem.offsetWidth, 0);
michael@0:         xAllowed = false;
michael@0:       }
michael@0:     }
michael@0: 
michael@0:     // If we want it centered, and the box is completely hidden,
michael@0:     // then we center it explicitly.
michael@0: 
michael@0:     if (centered) {
michael@0: 
michael@0:       if (yAllowed && (topToBottom <= 0 || bottomToTop >= 0)) {
michael@0:         win.scroll(win.scrollX,
michael@0:                    win.scrollY + clientRect.top
michael@0:                    - (win.innerHeight - elem.offsetHeight) / 2);
michael@0:       }
michael@0: 
michael@0:       if (xAllowed && (leftToRight <= 0 || rightToLeft <= 0)) {
michael@0:         win.scroll(win.scrollX + clientRect.left
michael@0:                    - (win.innerWidth - elem.offsetWidth) / 2,
michael@0:                    win.scrollY);
michael@0:       }
michael@0:     }
michael@0: 
michael@0:     if (!this.isTopLevelWindow(win)) {
michael@0:       // We are inside an iframe.
michael@0:       let frameElement = this.getFrameElement(win);
michael@0:       this.scrollIntoViewIfNeeded(frameElement, centered);
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Check if a node and its document are still alive
michael@0:    * and attached to the window.
michael@0:    *
michael@0:    * @param aNode
michael@0:    */
michael@0:   isNodeConnected: function LH_isNodeConnected(aNode)
michael@0:   {
michael@0:     try {
michael@0:       let connected = (aNode.ownerDocument && aNode.ownerDocument.defaultView &&
michael@0:                       !(aNode.compareDocumentPosition(aNode.ownerDocument.documentElement) &
michael@0:                       aNode.DOCUMENT_POSITION_DISCONNECTED));
michael@0:       return connected;
michael@0:     } catch (e) {
michael@0:       // "can't access dead object" error
michael@0:       return false;
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * like win.parent === win, but goes through mozbrowsers and mozapps iframes.
michael@0:    */
michael@0:   isTopLevelWindow: function LH_isTopLevelWindow(win) {
michael@0:     let docShell = win.QueryInterface(Ci.nsIInterfaceRequestor)
michael@0:                    .getInterface(Ci.nsIWebNavigation)
michael@0:                    .QueryInterface(Ci.nsIDocShell);
michael@0: 
michael@0:     return docShell === this._topDocShell;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Check a window is part of the top level window.
michael@0:    */
michael@0:   isIncludedInTopLevelWindow: function LH_isIncludedInTopLevelWindow(win) {
michael@0:     if (this.isTopLevelWindow(win)) {
michael@0:       return true;
michael@0:     }
michael@0: 
michael@0:     let parent = this.getParentWindow(win);
michael@0:     if (!parent || parent === win) {
michael@0:       return false;
michael@0:     }
michael@0: 
michael@0:     return this.isIncludedInTopLevelWindow(parent);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * like win.parent, but goes through mozbrowsers and mozapps iframes.
michael@0:    */
michael@0:   getParentWindow: function LH_getParentWindow(win) {
michael@0:     if (this.isTopLevelWindow(win)) {
michael@0:       return null;
michael@0:     }
michael@0: 
michael@0:     let docShell = win.QueryInterface(Ci.nsIInterfaceRequestor)
michael@0:                    .getInterface(Ci.nsIWebNavigation)
michael@0:                    .QueryInterface(Ci.nsIDocShell);
michael@0: 
michael@0:     if (docShell.isBrowserOrApp) {
michael@0:       let parentDocShell = docShell.getSameTypeParentIgnoreBrowserAndAppBoundaries();
michael@0:       return parentDocShell ? parentDocShell.contentViewer.DOMDocument.defaultView : null;
michael@0:     } else {
michael@0:       return win.parent;
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * like win.frameElement, but goes through mozbrowsers and mozapps iframes.
michael@0:    *
michael@0:    * @param DOMWindow win The window to get the frame for
michael@0:    * @return DOMElement The element in which the window is embedded.
michael@0:    */
michael@0:   getFrameElement: function LH_getFrameElement(win) {
michael@0:     if (this.isTopLevelWindow(win)) {
michael@0:       return null;
michael@0:     }
michael@0: 
michael@0:     let winUtils = win.
michael@0:       QueryInterface(Components.interfaces.nsIInterfaceRequestor).
michael@0:       getInterface(Components.interfaces.nsIDOMWindowUtils);
michael@0: 
michael@0:     return winUtils.containerElement;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Get the x and y offsets for a node taking iframes into account.
michael@0:    *
michael@0:    * @param {DOMNode} node
michael@0:    *        The node for which we are to get the offset
michael@0:    */
michael@0:   _getNodeOffsets: function(node) {
michael@0:     let xOffset = 0;
michael@0:     let yOffset = 0;
michael@0:     let frameWin = node.ownerDocument.defaultView;
michael@0:     let scale = this.calculateScale(node);
michael@0: 
michael@0:     while (true) {
michael@0:       // Are we in the top-level window?
michael@0:       if (this.isTopLevelWindow(frameWin)) {
michael@0:         break;
michael@0:       }
michael@0: 
michael@0:       let frameElement = this.getFrameElement(frameWin);
michael@0:       if (!frameElement) {
michael@0:         break;
michael@0:       }
michael@0: 
michael@0:       // We are in an iframe.
michael@0:       // We take into account the parent iframe position and its
michael@0:       // offset (borders and padding).
michael@0:       let frameRect = frameElement.getBoundingClientRect();
michael@0: 
michael@0:       let [offsetTop, offsetLeft] =
michael@0:         this.getIframeContentOffset(frameElement);
michael@0: 
michael@0:       xOffset += frameRect.left + offsetLeft;
michael@0:       yOffset += frameRect.top + offsetTop;
michael@0: 
michael@0:       frameWin = this.getParentWindow(frameWin);
michael@0:     }
michael@0: 
michael@0:     return [xOffset * scale, yOffset * scale];
michael@0:   },
michael@0: 
michael@0: 
michael@0: 
michael@0:   /********************************************************************
michael@0:    * GetBoxQuads POLYFILL START TODO: Remove this when bug 917755 is fixed.
michael@0:    ********************************************************************/
michael@0:   _getBoxQuadsFromRect: function(rect, node) {
michael@0:     let scale = this.calculateScale(node);
michael@0:     let [xOffset, yOffset] = this._getNodeOffsets(node);
michael@0: 
michael@0:     let out = {
michael@0:       p1: {
michael@0:         x: rect.left * scale + xOffset,
michael@0:         y: rect.top * scale + yOffset
michael@0:       },
michael@0:       p2: {
michael@0:         x: (rect.left + rect.width) * scale + xOffset,
michael@0:         y: rect.top * scale + yOffset
michael@0:       },
michael@0:       p3: {
michael@0:         x: (rect.left + rect.width) * scale + xOffset,
michael@0:         y: (rect.top + rect.height) * scale + yOffset
michael@0:       },
michael@0:       p4: {
michael@0:         x: rect.left * scale + xOffset,
michael@0:         y: (rect.top + rect.height) * scale + yOffset
michael@0:       }
michael@0:     };
michael@0: 
michael@0:     out.bounds = {
michael@0:       bottom: out.p4.y,
michael@0:       height: out.p4.y - out.p1.y,
michael@0:       left: out.p1.x,
michael@0:       right: out.p2.x,
michael@0:       top: out.p1.y,
michael@0:       width: out.p2.x - out.p1.x,
michael@0:       x: out.p1.x,
michael@0:       y: out.p1.y
michael@0:     };
michael@0: 
michael@0:     return out;
michael@0:   },
michael@0: 
michael@0:   _parseNb: function(distance) {
michael@0:     let nb = parseFloat(distance, 10);
michael@0:     return isNaN(nb) ? 0 : nb;
michael@0:   },
michael@0: 
michael@0:   getAdjustedQuadsPolyfill: function(node, region) {
michael@0:     // Get the border-box rect
michael@0:     // Note that this is relative to the node's viewport, so before we can use
michael@0:     // it, will need to go back up the frames like getRect
michael@0:     let borderRect = node.getBoundingClientRect();
michael@0: 
michael@0:     // If the boxType is border, no need to go any further, we're done
michael@0:     if (region === "border") {
michael@0:       return this._getBoxQuadsFromRect(borderRect, node);
michael@0:     }
michael@0: 
michael@0:     // Else, need to get margin/padding/border distances
michael@0:     let style = node.ownerDocument.defaultView.getComputedStyle(node);
michael@0:     let camel = s => s.substring(0, 1).toUpperCase() + s.substring(1);
michael@0:     let distances = {border:{}, padding:{}, margin: {}};
michael@0: 
michael@0:     for (let side of ["top", "right", "bottom", "left"]) {
michael@0:       distances.border[side] = this._parseNb(style["border" + camel(side) + "Width"]);
michael@0:       distances.padding[side] = this._parseNb(style["padding" + camel(side)]);
michael@0:       distances.margin[side] = this._parseNb(style["margin" + camel(side)]);
michael@0:     }
michael@0: 
michael@0:     // From the border-box rect, calculate the content-box, padding-box and
michael@0:     // margin-box rects
michael@0:     function offsetRect(rect, offsetType, dir=1) {
michael@0:       return {
michael@0:         top: rect.top + (dir * distances[offsetType].top),
michael@0:         left: rect.left + (dir * distances[offsetType].left),
michael@0:         width: rect.width - (dir * (distances[offsetType].left + distances[offsetType].right)),
michael@0:         height: rect.height - (dir * (distances[offsetType].top + distances[offsetType].bottom))
michael@0:       };
michael@0:     }
michael@0: 
michael@0:     if (region === "margin") {
michael@0:       return this._getBoxQuadsFromRect(offsetRect(borderRect, "margin", -1), node);
michael@0:     } else if (region === "padding") {
michael@0:       return this._getBoxQuadsFromRect(offsetRect(borderRect, "border"), node);
michael@0:     } else if (region === "content") {
michael@0:       let paddingRect = offsetRect(borderRect, "border");
michael@0:       return this._getBoxQuadsFromRect(offsetRect(paddingRect, "padding"), node);
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /********************************************************************
michael@0:    * GetBoxQuads POLYFILL END
michael@0:    ********************************************************************/
michael@0: };