gecko/browser/devtools/shared/LayoutHelpers.jsm

255 lines
8.5 KiB
JavaScript

/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is the Mozilla LayoutHelpers Module.
*
* The Initial Developer of the Original Code is
* The Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2010
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Rob Campbell <rcampbell@mozilla.com> (original author)
* Mihai Șucan <mihai.sucan@gmail.com>
* Julian Viereck <jviereck@mozilla.com>
* Paul Rouget <paul@mozilla.com>
* Kyle Simpson <ksimpson@mozilla.com>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
const Cu = Components.utils;
const Ci = Components.interfaces;
const Cr = Components.results;
var EXPORTED_SYMBOLS = ["LayoutHelpers"];
LayoutHelpers = {
/**
* Compute the position and the dimensions for the visible portion
* of a node, relativalely to the root window.
*
* @param nsIDOMNode aNode
* a DOM element to be highlighted
*/
getDirtyRect: function LH_getDirectyRect(aNode) {
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.
rect = {top: clientRect.top,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height};
// We iterate through all the parent windows.
while (true) {
// Does the selection overflow on the right of its window?
let diffx = frameWin.innerWidth - (rect.left + rect.width);
if (diffx < 0) {
rect.width += diffx;
}
// Does the selection overflow on the bottom of its window?
let diffy = frameWin.innerHeight - (rect.top + rect.height);
if (diffy < 0) {
rect.height += diffy;
}
// Does the selection overflow on the left of its window?
if (rect.left < 0) {
rect.width += rect.left;
rect.left = 0;
}
// Does the selection overflow on the top of its window?
if (rect.top < 0) {
rect.height += rect.top;
rect.top = 0;
}
// Selection has been clipped to fit in its own window.
// Are we in the top-level window?
if (frameWin.parent === frameWin || !frameWin.frameElement) {
break;
}
// We are in an iframe.
// We take into account the parent iframe position and its
// offset (borders and padding).
let frameRect = frameWin.frameElement.getBoundingClientRect();
let [offsetTop, offsetLeft] =
this.getIframeContentOffset(frameWin.frameElement);
rect.top += frameRect.top + offsetTop;
rect.left += frameRect.left + offsetLeft;
frameWin = frameWin.parent;
}
return rect;
},
/**
* 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.
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 (frameWin.parent === frameWin || !frameWin.frameElement) {
break;
}
// We are in an iframe.
// We take into account the parent iframe position and its
// offset (borders and padding).
let frameRect = frameWin.frameElement.getBoundingClientRect();
let [offsetTop, offsetLeft] =
this.getIframeContentOffset(frameWin.frameElement);
rect.top += frameRect.top + offsetTop;
rect.left += frameRect.left + offsetLeft;
frameWin = frameWin.parent;
}
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];
},
/**
* Apply the page zoom factor.
*/
getZoomedRect: function LH_getZoomedRect(aWin, aRect) {
// get page zoom factor, if any
let zoom =
aWin.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindowUtils)
.screenPixelsPerCSSPixel;
// adjust rect for zoom scaling
let aRectScaled = {};
for (let prop in aRect) {
aRectScaled[prop] = aRect[prop] * zoom;
}
return aRectScaled;
},
/**
* 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] = LayoutHelpers.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;
},
};