Bug 1266456 - part2: HTMLTooltip setContent() use object as 2nd arg;r=jsnajdr
setContent expects 3 arguments: content, width, height. Height is already optional
but for the autocomplete migration, the width will also become optional.
Using an object argument for width and height makes this easier.
MozReview-Commit-ID: 9CiMG0BdLOR
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -22,17 +22,17 @@ add_task(function* () {
yield testComputedView(view, inspector);
});
function* testRuleView(ruleView, inspector) {
info("Showing the tooltip");
let tooltip = ruleView.tooltips.previewTooltip;
let tooltipContent = ruleView.styleDocument.createElementNS(XHTML_NS, "div");
- yield tooltip.setContent(tooltipContent, 100, 30);
+ yield tooltip.setContent(tooltipContent, {width: 100, height: 30});
// Stop listening for mouse movements because it's not needed for this test,
// and causes intermittent failures on Linux. When this test runs in the suite
// sometimes a mouseleave event is dispatched at the start, which causes the
// tooltip to hide in the middle of being shown, which causes timeouts later.
tooltip.stopTogglingOnHover();
let onShown = tooltip.once("shown");
@@ -47,17 +47,18 @@ function* testRuleView(ruleView, inspect
ok(true, "Rule view tooltip closed after a new node got selected");
}
function* testComputedView(computedView, inspector) {
info("Showing the tooltip");
let tooltip = computedView.tooltips.previewTooltip;
let tooltipContent = computedView.styleDocument.createElementNS(XHTML_NS, "div");
- yield tooltip.setContent(tooltipContent, 100, 30);
+ yield tooltip.setContent(tooltipContent, {width: 100, height: 30});
+
// Stop listening for mouse movements because it's not needed for this test,
// and causes intermittent failures on Linux. When this test runs in the suite
// sometimes a mouseleave event is dispatched at the start, which causes the
// tooltip to hide in the middle of being shown, which causes timeouts later.
tooltip.stopTogglingOnHover();
let onShown = tooltip.once("shown");
tooltip.show(computedView.styleDocument.firstElementChild);
--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -2380,17 +2380,17 @@ RequestsMenuView.prototype = Heritage.ex
// hide the tooltip immediately, not after delay
tooltip.hide();
NetMonitorController.viewSourceInDebugger(filename, lineNumber);
}, false);
el.appendChild(frameEl);
}
- tooltip.setContent(el, REQUESTS_TOOLTIP_STACK_TRACE_WIDTH);
+ tooltip.setContent(el, {width: REQUESTS_TOOLTIP_STACK_TRACE_WIDTH});
return true;
}),
/**
* A handler that opens the security tab in the details view if secure or
* broken security indicator is clicked.
*/
--- a/devtools/client/shared/test/browser_html_tooltip-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip-01.js
@@ -35,17 +35,17 @@ function getTooltipContent(doc) {
add_task(function* () {
yield addTab("about:blank");
let [,, doc] = yield createHost("bottom", TEST_URI);
let tooltip = new HTMLTooltip({doc}, {});
info("Set tooltip content");
- tooltip.setContent(getTooltipContent(doc), 100, 50);
+ tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
is(tooltip.isVisible(), false, "Tooltip is not visible");
info("Show the tooltip and check the expected events are fired.");
let shown = 0;
tooltip.on("shown", () => shown++);
--- a/devtools/client/shared/test/browser_html_tooltip-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip-02.js
@@ -37,33 +37,33 @@ add_task(function* () {
yield testClickInOuterIframe(doc);
yield testClickInInnerIframe(doc);
});
function* testClickInTooltipContent(doc) {
info("Test a tooltip is not closed when clicking inside itself");
let tooltip = new HTMLTooltip({doc}, {});
- tooltip.setContent(getTooltipContent(doc), 100, 50);
+ tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
yield showTooltip(tooltip, doc.getElementById("box1"));
let onTooltipContainerClick = once(tooltip.container, "click");
EventUtils.synthesizeMouseAtCenter(tooltip.container, {}, doc.defaultView);
yield onTooltipContainerClick;
is(tooltip.isVisible(), true, "Tooltip is still visible");
tooltip.destroy();
}
function* testConsumeOutsideClicksFalse(doc) {
info("Test closing a tooltip via click with consumeOutsideClicks: false");
let box4 = doc.getElementById("box4");
let tooltip = new HTMLTooltip({doc}, {consumeOutsideClicks: false});
- tooltip.setContent(getTooltipContent(doc), 100, 50);
+ tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
yield showTooltip(tooltip, doc.getElementById("box1"));
let onBox4Clicked = once(box4, "click");
let onHidden = once(tooltip, "hidden");
EventUtils.synthesizeMouseAtCenter(box4, {}, doc.defaultView);
yield onHidden;
yield onBox4Clicked;
@@ -76,17 +76,17 @@ function* testConsumeOutsideClicksTrue(d
info("Test closing a tooltip via click with consumeOutsideClicks: true");
let box4 = doc.getElementById("box4");
// Count clicks on box4
let box4clicks = 0;
box4.addEventListener("click", () => box4clicks++);
let tooltip = new HTMLTooltip({doc}, {consumeOutsideClicks: true});
- tooltip.setContent(getTooltipContent(doc), 100, 50);
+ tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
yield showTooltip(tooltip, doc.getElementById("box1"));
let onHidden = once(tooltip, "hidden");
EventUtils.synthesizeMouseAtCenter(box4, {}, doc.defaultView);
yield onHidden;
is(box4clicks, 0, "box4 catched no click event");
is(tooltip.isVisible(), false, "Tooltip is hidden");
@@ -94,17 +94,17 @@ function* testConsumeOutsideClicksTrue(d
tooltip.destroy();
}
function* testClickInOuterIframe(doc) {
info("Test clicking an iframe outside of the tooltip closes the tooltip");
let frame = doc.getElementById("frame");
let tooltip = new HTMLTooltip({doc});
- tooltip.setContent(getTooltipContent(doc), 100, 50);
+ tooltip.setContent(getTooltipContent(doc), {width: 100, height: 50});
yield showTooltip(tooltip, doc.getElementById("box1"));
let onHidden = once(tooltip, "hidden");
EventUtils.synthesizeMouseAtCenter(frame, {}, doc.defaultView);
yield onHidden;
is(tooltip.isVisible(), false, "Tooltip is hidden");
tooltip.destroy();
@@ -113,17 +113,17 @@ function* testClickInOuterIframe(doc) {
function* testClickInInnerIframe(doc) {
info("Test clicking an iframe inside the tooltip content does not close the tooltip");
let tooltip = new HTMLTooltip({doc}, {consumeOutsideClicks: false});
let iframe = doc.createElementNS(HTML_NS, "iframe");
iframe.style.width = "100px";
iframe.style.height = "50px";
- tooltip.setContent(iframe, 100, 50);
+ tooltip.setContent(iframe, {width: 100, height: 50});
yield showTooltip(tooltip, doc.getElementById("box1"));
let onTooltipContainerClick = once(tooltip.container, "click");
EventUtils.synthesizeMouseAtCenter(tooltip.container, {}, doc.defaultView);
yield onTooltipContainerClick;
is(tooltip.isVisible(), true, "Tooltip is still visible");
--- a/devtools/client/shared/test/browser_html_tooltip-03.js
+++ b/devtools/client/shared/test/browser_html_tooltip-03.js
@@ -127,11 +127,11 @@ function blurNode(doc, selector) {
*/
function* createTooltip(doc, autofocus) {
let tooltip = new HTMLTooltip({doc}, {autofocus});
let div = doc.createElementNS(HTML_NS, "div");
div.classList.add("tooltip-content");
div.style.height = "50px";
div.innerHTML = '<input type="text"></input>';
- tooltip.setContent(div, 150, 50);
+ tooltip.setContent(div, {width: 150, height: 50});
return tooltip;
}
--- a/devtools/client/shared/test/browser_html_tooltip-04.js
+++ b/devtools/client/shared/test/browser_html_tooltip-04.js
@@ -38,17 +38,17 @@ add_task(function* () {
yield addTab("about:blank");
let [,, doc] = yield createHost("bottom", TEST_URI);
info("Create HTML tooltip");
let tooltip = new HTMLTooltip({doc}, {});
let div = doc.createElementNS(HTML_NS, "div");
div.style.height = "100%";
- tooltip.setContent(div, TOOLTIP_WIDTH, TOOLTIP_HEIGHT);
+ tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
let box1 = doc.getElementById("box1");
let box2 = doc.getElementById("box2");
let box3 = doc.getElementById("box3");
let box4 = doc.getElementById("box4");
let height = TOOLTIP_HEIGHT, width = TOOLTIP_WIDTH;
// box1: Can only fit below box1
--- a/devtools/client/shared/test/browser_html_tooltip-05.js
+++ b/devtools/client/shared/test/browser_html_tooltip-05.js
@@ -35,17 +35,17 @@ add_task(function* () {
yield addTab("about:blank");
let [,, doc] = yield createHost("bottom", TEST_URI);
info("Create HTML tooltip");
let tooltip = new HTMLTooltip({doc}, {});
let div = doc.createElementNS(HTML_NS, "div");
div.style.height = "100%";
- tooltip.setContent(div, TOOLTIP_WIDTH, TOOLTIP_HEIGHT);
+ tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
let box1 = doc.getElementById("box1");
let box2 = doc.getElementById("box2");
let box3 = doc.getElementById("box3");
let box4 = doc.getElementById("box4");
let width = TOOLTIP_WIDTH;
// box1: Can not fit above or below box1, default to bottom with a reduced
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
@@ -55,17 +55,17 @@ add_task(function* () {
yield addTab("about:blank");
let [,, doc] = yield createHost("bottom", TEST_URI);
info("Create HTML tooltip");
let tooltip = new HTMLTooltip({doc}, {type: "arrow"});
let div = doc.createElementNS(HTML_NS, "div");
div.style.height = "35px";
- tooltip.setContent(div, 200, 35);
+ tooltip.setContent(div, {width: 200, height: 35});
let {right: docRight} = doc.documentElement.getBoundingClientRect();
let elements = [...doc.querySelectorAll(".anchor")];
for (let el of elements) {
info("Display the tooltip on an anchor.");
yield showTooltip(tooltip, el);
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
@@ -49,17 +49,17 @@ add_task(function* () {
yield addTab("about:blank");
let [,, doc] = yield createHost("bottom", TEST_URI);
info("Create HTML tooltip");
let tooltip = new HTMLTooltip({doc}, {type: "arrow"});
let div = doc.createElementNS(HTML_NS, "div");
div.style.height = "35px";
- tooltip.setContent(div, 200, 35);
+ tooltip.setContent(div, {width: 200, height: 35});
let {right: docRight} = doc.documentElement.getBoundingClientRect();
let elements = [...doc.querySelectorAll(".anchor")];
for (let el of elements) {
info("Display the tooltip on an anchor.");
yield showTooltip(tooltip, el);
--- a/devtools/client/shared/test/browser_html_tooltip_variable-height.js
+++ b/devtools/client/shared/test/browser_html_tooltip_variable-height.js
@@ -35,17 +35,17 @@ add_task(function* () {
yield addTab("about:blank");
let [,, doc] = yield createHost("bottom", TEST_URI);
let tooltip = new HTMLTooltip({doc}, {});
info("Set tooltip content 50px tall, but request a container 200px tall");
let tooltipContent = doc.createElementNS(HTML_NS, "div");
tooltipContent.style.cssText = "height: " + TOOLTIP_HEIGHT + "px; background: red;";
- tooltip.setContent(tooltipContent, CONTAINER_WIDTH, CONTAINER_HEIGHT);
+ tooltip.setContent(tooltipContent, {width: CONTAINER_WIDTH, height: CONTAINER_HEIGHT});
info("Show the tooltip and check the container and panel height.");
yield showTooltip(tooltip, doc.getElementById("box1"));
let containerRect = tooltip.container.getBoundingClientRect();
let panelRect = tooltip.panel.getBoundingClientRect();
is(containerRect.height, CONTAINER_HEIGHT,
"Tooltip container has the expected height.");
--- a/devtools/client/shared/widgets/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/HTMLTooltip.js
@@ -103,25 +103,23 @@ HTMLTooltip.prototype = {
},
/**
* 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
- * @param {Number} height (optional)
- * Preferred height for the tooltip container. If the content height is
- * smaller than the container's height, the tooltip will automatically
- * shrink around the content. If not specified, will use all the height
- * available.
+ * @param {Object}
+ * - {Number} width: preferred width for the tooltip container
+ * - {Number} height: optional, preferred height for the tooltip container. This
+ * parameter acts as a max-height for the tooltip content. If not specified,
+ * the tooltip will be able to use all the height available.
*/
- setContent: function (content, width, height = Infinity) {
+ setContent: function (content, {width, height = Infinity}) {
let themeHeight = EXTRA_HEIGHT[this.type] + 2 * EXTRA_BORDER[this.type];
let themeWidth = 2 * EXTRA_BORDER[this.type];
this.preferredWidth = width + themeWidth;
this.preferredHeight = height + themeHeight;
this.panel.innerHTML = "";
this.panel.appendChild(content);
--- a/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
@@ -155,17 +155,17 @@ EventTooltip.prototype = {
});
content.className = "event-tooltip-content-box";
this.container.appendChild(content);
this._addContentListeners(header);
}
- this._tooltip.setContent(this.container, CONTAINER_WIDTH);
+ this._tooltip.setContent(this.container, {width: CONTAINER_WIDTH});
this._tooltip.on("hidden", this.destroy);
},
_addContentListeners: function (header) {
header.addEventListener("click", this._headerClicked);
},
_headerClicked: function (event) {
--- a/devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
@@ -106,17 +106,17 @@ function setImageTooltip(tooltip, doc, i
// Calculate tooltip dimensions
let height = imgHeight + 2 * IMAGE_PADDING;
if (!hideDimensionLabel) {
height += LABEL_HEIGHT;
}
let width = Math.max(CONTAINER_MIN_WIDTH, imgWidth + 2 * IMAGE_PADDING);
- tooltip.setContent(div, width, height);
+ tooltip.setContent(div, {width, height});
}
/*
* Set the tooltip content of a provided HTMLTooltip instance to display a
* fallback error message when an image preview tooltip can not be displayed.
*
* @param {HTMLTooltip} tooltip
* The tooltip instance on which the image preview content should be set
@@ -128,14 +128,14 @@ function setBrokenImageTooltip(tooltip,
div.style.cssText = `
box-sizing: border-box;
height: 100%;
text-align: center;
line-height: 30px;`;
let message = GetStringFromName("previewTooltip.image.brokenImage");
div.textContent = message;
- tooltip.setContent(div, 150, 30);
+ tooltip.setContent(div, {width: 150, height: 30});
}
module.exports.getImageDimensions = getImageDimensions;
module.exports.setImageTooltip = setImageTooltip;
module.exports.setBrokenImageTooltip = setBrokenImageTooltip;