diff -r 000000000000 -r 6474c204b198 toolkit/devtools/LayoutHelpers.jsm --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/toolkit/devtools/LayoutHelpers.jsm Wed Dec 31 06:09:35 2014 +0100 @@ -0,0 +1,509 @@ +/* -*- 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 + ********************************************************************/ +};