--- a/devtools/client/shared/widgets/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/HTMLTooltip.js
@@ -26,23 +26,23 @@ const IFRAME_CONTAINER_ID = "tooltip-ifr
* - {Boolean} consumeOutsideClicks
* Defaults to true. The tooltip is closed when clicking outside.
* Should this event be stopped and consumed or not.
*/
function HTMLTooltip(toolbox,
{type = "normal", autofocus = true, consumeOutsideClicks = true} = {}) {
EventEmitter.decorate(this);
- this.document = toolbox.doc;
+ this.doc = toolbox.doc;
this.type = type;
this.autofocus = autofocus;
this.consumeOutsideClicks = consumeOutsideClicks;
// Use the topmost window to listen for click events to close the tooltip
- this.topWindow = this.document.defaultView.top;
+ this.topWindow = this.doc.defaultView.top;
this._onClick = this._onClick.bind(this);
this.container = this._createContainer();
// Promise that will resolve when the container can be filled with content.
this.containerReady = new Promise(resolve => {
if (this._isXUL()) {
@@ -64,25 +64,16 @@ function HTMLTooltip(toolbox,
module.exports.HTMLTooltip = HTMLTooltip;
HTMLTooltip.prototype = {
position: {
TOP: "top",
BOTTOM: "bottom",
},
- get parent() {
- if (this._isXUL()) {
- // In XUL context, we are wrapping the HTML content in an iframe.
- let win = this.container.contentWindow.wrappedJSObject;
- return win.document.getElementById(IFRAME_CONTAINER_ID);
- }
- return this.container;
- },
-
/**
* Set the tooltip content element. The preferred width/height should also be
* specified here.
*
* @param {Element} content
* The tooltip content, should be a HTML element.
* @param {Number} width
* Preferred width for the tooltip container
@@ -91,18 +82,18 @@ HTMLTooltip.prototype = {
* @return {Promise} a promise that will resolve when the content has been
* added in the tooltip container.
*/
setContent: function (content, width, height) {
this.preferredWidth = width;
this.preferredHeight = height;
return this.containerReady.then(() => {
- this.parent.innerHTML = "";
- this.parent.appendChild(content);
+ this.panel.innerHTML = "";
+ this.panel.appendChild(content);
});
},
/**
* Show the tooltip next to the provided anchor element. A preferred position
* can be set. The event "shown" will be fired after the tooltip is displayed.
*
* @param {Element} anchor
@@ -128,64 +119,73 @@ HTMLTooltip.prototype = {
this.container.style.top = top + "px";
this.container.style.left = left + "px";
this.container.style.display = "block";
if (this.autofocus) {
this.container.focus();
}
- this.attachEventsTimer = this.document.defaultView.setTimeout(() => {
+ this.attachEventsTimer = this.doc.defaultView.setTimeout(() => {
this.topWindow.addEventListener("click", this._onClick, true);
this.emit("shown");
}, 0);
});
},
/**
* Hide the current tooltip. The event "hidden" will be fired when the tooltip
* is hidden.
*/
hide: function () {
- this.document.defaultView.clearTimeout(this.attachEventsTimer);
+ this.doc.defaultView.clearTimeout(this.attachEventsTimer);
if (this.isVisible()) {
this.topWindow.removeEventListener("click", this._onClick, true);
this.container.style.display = "none";
this.emit("hidden");
}
},
+ get panel() {
+ if (this._isXUL()) {
+ // In XUL context, we are wrapping the HTML content in an iframe.
+ let win = this.container.contentWindow.wrappedJSObject;
+ return win.document.getElementById(IFRAME_CONTAINER_ID);
+ }
+ return this.container;
+ },
+
/**
* Check if the tooltip is currently displayed.
* @return {Boolean} true if the tooltip is visible
*/
isVisible: function () {
- let win = this.document.defaultView;
+ let win = this.doc.defaultView;
return win.getComputedStyle(this.container).display != "none";
},
/**
* Destroy the tooltip instance. Hide the tooltip if displayed, remove the
* tooltip container from the document.
*/
destroy: function () {
this.hide();
this.container.remove();
},
_createContainer: function () {
let container;
if (this._isXUL()) {
- container = this.document.createElementNS(XHTML_NS, "iframe");
+ container = this.doc.createElementNS(XHTML_NS, "iframe");
container.classList.add("devtools-tooltip-iframe");
- this.document.querySelector("window").appendChild(container);
+ this.doc.querySelector("window").appendChild(container);
} else {
- container = this.document.createElementNS(XHTML_NS, "div");
- this.document.body.appendChild(container);
+ container = this.doc.createElementNS(XHTML_NS, "div");
+ this.doc.body.appendChild(container);
}
container.classList.add("theme-body");
container.classList.add("devtools-htmltooltip-container");
return container;
},
@@ -197,23 +197,23 @@ HTMLTooltip.prototype = {
this.hide();
if (this.consumeOutsideClicks) {
e.preventDefault();
e.stopPropagation();
}
},
_isInTooltipContainer: function (node) {
- let contentWindow = this.parent.ownerDocument.defaultView;
+ let contentWindow = this.panel.ownerDocument.defaultView;
let win = node.ownerDocument.defaultView;
if (win === contentWindow) {
// If node is in the same window as the tooltip, check if the tooltip
// parent contains node.
- return this.parent.contains(node);
+ return this.panel.contains(node);
}
// Otherwise check if the node window is in the tooltip window.
while (win.parent && win.parent != win) {
win = win.parent;
if (win === contentWindow) {
return true;
}
@@ -221,20 +221,20 @@ HTMLTooltip.prototype = {
return false;
},
_findBestPosition: function (anchor, position) {
let top, left;
let {TOP, BOTTOM} = this.position;
let {left: anchorLeft, top: anchorTop, height: anchorHeight}
- = this._getRelativeRect(anchor, this.document);
+ = this._getRelativeRect(anchor, this.doc);
let {bottom: docBottom, right: docRight} =
- this.document.documentElement.getBoundingClientRect();
+ this.doc.documentElement.getBoundingClientRect();
let height = this.preferredHeight;
// Check if the popup can fit above the anchor.
let availableTop = anchorTop;
let fitsAbove = availableTop >= height;
// Check if the popup can fit below the anchor.
let availableBelow = docBottom - (anchorTop + anchorHeight);
let fitsBelow = availableBelow >= height;
@@ -285,11 +285,11 @@ HTMLTooltip.prototype = {
// Compute right and bottom coordinates using the rest of the data.
let right = left + width;
let bottom = top + height;
return {top, right, bottom, left, width, height};
},
_isXUL: function () {
- return this.document.documentElement.namespaceURI === XUL_NS;
+ return this.doc.documentElement.namespaceURI === XUL_NS;
},
};