forked from mirrors/gecko-dev
ae34b55b6a
The current default value for height of Infinity has the unfortunate side
effect that, when combined with using a XUL wrapper, there will be a large
filler element stretching vertically on one side of the tooltip that effectively
neuters all content beneath it. While this is probably fine for tooltips that
are shown on hover, it is problematic if we want to use this for DevTools menus
because it means the user is unable to click anything above/below the menu so
long as it is open (which can be particularly problematic once we make
HTMLTooltip support the "Disable popup autohide" feature"). Even if we were to
decide that clicks outside the tooltip should be consumed anyway we would still
have the problem that hover styles don't apply in this "dead" region.
As a result, this patch makes the { height: Infinity } behaviour opt-in for
those tooltips that really need it. For most uses, however, a height calculated
when the tooltip is shown should be sufficient (and later in this patch series
we will add a mechanism to HTMLTooltip to explicitly request it recalculate its
size and position in response to content changes).
This patch introduces the { height: "auto" } mechanism and also reverses the
order in which size/position properties are calculated to match the regular
manner in which layout is performed: widths first, then heights.
MozReview-Commit-ID: 7BeVkxGVhYn
--HG--
extra : rebase_source : 4f0d88b377e00efc9d443db1a5ef0a7d29295929
67 lines
2.1 KiB
JavaScript
67 lines
2.1 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 content can automatically calculate its height based on
|
|
* content.
|
|
*/
|
|
|
|
const HTML_NS = "http://www.w3.org/1999/xhtml";
|
|
const TEST_URI = CHROME_URL_ROOT + "doc_html_tooltip.xul";
|
|
|
|
const {HTMLTooltip} =
|
|
require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
|
|
loadHelperScript("helper_html_tooltip.js");
|
|
|
|
let useXulWrapper;
|
|
|
|
add_task(async function() {
|
|
await addTab("about:blank");
|
|
const [,, doc] = await createHost("bottom", TEST_URI);
|
|
|
|
info("Run tests for a Tooltip without using a XUL panel");
|
|
useXulWrapper = false;
|
|
await runTests(doc);
|
|
|
|
info("Run tests for a Tooltip with a XUL panel");
|
|
useXulWrapper = true;
|
|
await runTests(doc);
|
|
});
|
|
|
|
async function runTests(doc) {
|
|
const tooltip = new HTMLTooltip(doc, {useXulWrapper});
|
|
info("Create tooltip content height to 150px");
|
|
const tooltipContent = doc.createElementNS(HTML_NS, "div");
|
|
tooltipContent.style.cssText =
|
|
"width: 300px; height: 150px; background: red;";
|
|
|
|
info("Set tooltip content using width:auto and height:auto");
|
|
tooltip.setContent(tooltipContent);
|
|
|
|
info("Show the tooltip and check the tooltip panel dimensions.");
|
|
await showTooltip(tooltip, doc.getElementById("box1"));
|
|
|
|
let panelRect = tooltip.panel.getBoundingClientRect();
|
|
is(panelRect.width, 300, "Tooltip panel has the expected width.");
|
|
is(panelRect.height, 150, "Tooltip panel has the expected width.");
|
|
|
|
await hideTooltip(tooltip);
|
|
|
|
info("Set tooltip content using fixed width and height:auto");
|
|
tooltipContent.style.cssText =
|
|
"width: auto; height: 200px; background: red;";
|
|
tooltip.setContent(tooltipContent, { width: 400 });
|
|
|
|
info("Show the tooltip and check the tooltip panel height.");
|
|
await showTooltip(tooltip, doc.getElementById("box1"));
|
|
|
|
panelRect = tooltip.panel.getBoundingClientRect();
|
|
is(panelRect.height, 200, "Tooltip panel has the expected width.");
|
|
|
|
await hideTooltip(tooltip);
|
|
|
|
tooltip.destroy();
|
|
}
|