gecko-dev/toolkit/devtools/LayoutHelpers.jsm

510 строки
16 KiB
JavaScript

/* -*- 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
********************************************************************/
};