forked from mirrors/gecko-dev
3aa417586a
The HTMLTooltip supports an additional configuration parameter "useXulWrapper". When set to true, if the tooltip is displayed in a XUL document, a XUL panel will be used as an additional container for the tooltip. This allows the tooltip to be displayed anywhere on the screen and can be useful when displayed in small toolboxes. MozReview-Commit-ID: 63kv4vAeW5R --HG-- extra : source : fc4d902ff01ee92a5b6742d44286e5feaaba1500 extra : intermediate-source : 126f43ff3be5505920946a77ad82401c6bbaebef extra : histedit_source : 863888c014723f7e95742079395497ba1a30aa36%2C13ba9aaf80acb96c587739c767c20a8f0f6a9a5a
99 lines
3.6 KiB
JavaScript
99 lines
3.6 KiB
JavaScript
/* Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/ */
|
|
/* import-globals-from helper_html_tooltip.js */
|
|
"use strict";
|
|
|
|
/**
|
|
* Test the HTMLTooltip can be displayed with vertical and horizontal offsets.
|
|
*/
|
|
|
|
const HTML_NS = "http://www.w3.org/1999/xhtml";
|
|
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
|
|
<?xml-stylesheet href="chrome://global/skin/global.css"?>
|
|
<?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
|
|
<window
|
|
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
|
htmlns="http://www.w3.org/1999/xhtml"
|
|
title="Tooltip test">
|
|
<vbox flex="1">
|
|
<hbox id="box1" flex="1">test1</hbox>
|
|
<hbox id="box2" flex="1">test2</hbox>
|
|
<hbox id="box3" flex="1">test3</hbox>
|
|
<hbox id="box4" flex="1">test4</hbox>
|
|
</vbox>
|
|
</window>`;
|
|
|
|
const {HTMLTooltip} = require("devtools/client/shared/widgets/HTMLTooltip");
|
|
loadHelperScript("helper_html_tooltip.js");
|
|
|
|
add_task(function* () {
|
|
// Force the toolbox to be 200px high;
|
|
yield pushPref("devtools.toolbox.footer.height", 200);
|
|
|
|
let [,, doc] = yield createHost("bottom", TEST_URI);
|
|
|
|
info("Test a tooltip is not closed when clicking inside itself");
|
|
|
|
let box1 = doc.getElementById("box1");
|
|
let box2 = doc.getElementById("box2");
|
|
let box3 = doc.getElementById("box3");
|
|
let box4 = doc.getElementById("box4");
|
|
|
|
let tooltip = new HTMLTooltip({doc}, {useXulWrapper: false});
|
|
|
|
let div = doc.createElementNS(HTML_NS, "div");
|
|
div.style.height = "100px";
|
|
div.style.boxSizing = "border-box";
|
|
div.textContent = "tooltip";
|
|
tooltip.setContent(div, {width: 50, height: 100});
|
|
|
|
info("Display the tooltip on box1.");
|
|
yield showTooltip(tooltip, box1, {x: 5, y: 10});
|
|
|
|
let panelRect = tooltip.container.getBoundingClientRect();
|
|
let anchorRect = box1.getBoundingClientRect();
|
|
|
|
// Tooltip will be displayed below box1
|
|
is(panelRect.top, anchorRect.bottom + 10, "Tooltip top has 10px offset");
|
|
is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset");
|
|
is(panelRect.height, 100, "Tooltip height is at 100px as expected");
|
|
|
|
info("Display the tooltip on box2.");
|
|
yield showTooltip(tooltip, box2, {x: 5, y: 10});
|
|
|
|
panelRect = tooltip.container.getBoundingClientRect();
|
|
anchorRect = box2.getBoundingClientRect();
|
|
|
|
// Tooltip will be displayed below box2, but can't be fully displayed because of the
|
|
// offset
|
|
is(panelRect.top, anchorRect.bottom + 10, "Tooltip top has 10px offset");
|
|
is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset");
|
|
is(panelRect.height, 90, "Tooltip height is only 90px");
|
|
|
|
info("Display the tooltip on box3.");
|
|
yield showTooltip(tooltip, box3, {x: 5, y: 10});
|
|
|
|
panelRect = tooltip.container.getBoundingClientRect();
|
|
anchorRect = box3.getBoundingClientRect();
|
|
|
|
// Tooltip will be displayed above box3, but can't be fully displayed because of the
|
|
// offset
|
|
is(panelRect.bottom, anchorRect.top - 10, "Tooltip bottom is 10px above anchor");
|
|
is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset");
|
|
is(panelRect.height, 90, "Tooltip height is only 90px");
|
|
|
|
info("Display the tooltip on box4.");
|
|
yield showTooltip(tooltip, box4, {x: 5, y: 10});
|
|
|
|
panelRect = tooltip.container.getBoundingClientRect();
|
|
anchorRect = box4.getBoundingClientRect();
|
|
|
|
// Tooltip will be displayed above box4
|
|
is(panelRect.bottom, anchorRect.top - 10, "Tooltip bottom is 10px above anchor");
|
|
is(panelRect.left, anchorRect.left + 5, "Tooltip left has 5px offset");
|
|
is(panelRect.height, 100, "Tooltip height is at 100px as expected");
|
|
|
|
yield hideTooltip(tooltip);
|
|
|
|
tooltip.destroy();
|
|
});
|