The Tor Browser: comparison toolkit/devtools/LayoutHelpers.jsm

--1:000000000000
+:e55ad030a4b5
+/* -*- 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
+********************************************************************/
+};

The Tor Browser / file comparison

comparison: toolkit/devtools/LayoutHelpers.jsm

toolkit/devtools/LayoutHelpers.jsm