Bug 1266456 - part2: HTMLTooltip setContent() use object as 2nd arg;r=jsnajdr draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 23 Jun 2016 17:27:32 +0200
changeset 380919 23e7db84e99d2be9471ed0db3dcb546ee1b162f6
parent 380918 8db00d649687a4f0fb0b5accfc08934ec4a1b83d
child 380920 a0f2700eea4407287ea8818803c4da70ccc54aa2
child 381150 c99aba735f0ed75fb79ff161afd1a848688a45b6
push id21344
push userjdescottes@mozilla.com
push dateThu, 23 Jun 2016 15:32:30 +0000
reviewersjsnajdr
bugs1266456
milestone50.0a1
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
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
devtools/client/netmonitor/netmonitor-view.js
devtools/client/shared/test/browser_html_tooltip-01.js
devtools/client/shared/test/browser_html_tooltip-02.js
devtools/client/shared/test/browser_html_tooltip-03.js
devtools/client/shared/test/browser_html_tooltip-04.js
devtools/client/shared/test/browser_html_tooltip-05.js
devtools/client/shared/test/browser_html_tooltip_arrow-01.js
devtools/client/shared/test/browser_html_tooltip_arrow-02.js
devtools/client/shared/test/browser_html_tooltip_variable-height.js
devtools/client/shared/widgets/HTMLTooltip.js
devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
devtools/client/shared/widgets/tooltip/ImageTooltipHelper.js
--- 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;