browser_html_tooltip_resize.js

Enable keyboard shortcuts

/* 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 resized.

*/

const HTML_NS = "http://www.w3.org/1999/xhtml";

const TEST_URI = CHROME_URL_ROOT + "doc_html_tooltip.xhtml";

const {

  HTMLTooltip,

} = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js");

loadHelperScript("helper_html_tooltip.js");

const TOOLBOX_WIDTH = 500;

add_task(async function () {

  await pushPref("devtools.toolbox.sidebar.width", TOOLBOX_WIDTH);

  // Open the host on the right so that the doorhangers hang right.

  const { doc } = await createHost("right", TEST_URI);

  info("Test resizing of a tooltip");

  const tooltip = new HTMLTooltip(doc, {

    useXulWrapper: true,

    type: "doorhanger",

});

  const div = doc.createElementNS(HTML_NS, "div");

  div.textContent = "tooltip";

  div.style.cssText = "width: 100px; height: 40px";

  tooltip.panel.appendChild(div);

  const box1 = doc.getElementById("box1");

  await showTooltip(tooltip, box1, { position: "top" });

  // Get the original position of the panel and arrow.

  const originalPanelBounds = tooltip.panel

    .getBoxQuads({ relativeTo: doc })[0]

    .getBounds();

  const originalArrowBounds = tooltip.arrow

    .getBoxQuads({ relativeTo: doc })[0]

    .getBounds();

  // Resize the content

  div.style.cssText = "width: 200px; height: 30px";

  tooltip.show(box1, { position: "top" });

  // The panel should have moved 100px to the left and 10px down

  const updatedPanelBounds = tooltip.panel

    .getBoxQuads({ relativeTo: doc })[0]

    .getBounds();

  const panelXMovement =

    `panel right: ${originalPanelBounds.right} -> ` + updatedPanelBounds.right;

  Assert.strictEqual(

    Math.round(updatedPanelBounds.right - originalPanelBounds.right),

    100,

    `Panel should have moved 100px to the right (actual: ${panelXMovement})`

);

  const panelYMovement =

    `panel top: ${originalPanelBounds.top} -> ` + updatedPanelBounds.top;

  Assert.strictEqual(

    Math.round(updatedPanelBounds.top - originalPanelBounds.top),

10,

    `Panel should have moved 10px down (actual: ${panelYMovement})`

);

  // The arrow should be in the same position

  const updatedArrowBounds = tooltip.arrow

    .getBoxQuads({ relativeTo: doc })[0]

    .getBounds();

  const arrowXMovement =

    `arrow left: ${originalArrowBounds.left} -> ` + updatedArrowBounds.left;

  Assert.strictEqual(

    Math.round(updatedArrowBounds.left - originalArrowBounds.left),

0,

    `Arrow should not have moved (actual: ${arrowXMovement})`

);

  const arrowYMovement =

    `arrow top: ${originalArrowBounds.top} -> ` + updatedArrowBounds.top;

  Assert.strictEqual(

    Math.round(updatedArrowBounds.top - originalArrowBounds.top),

0,

    `Arrow should not have moved (actual: ${arrowYMovement})`

);

  await hideTooltip(tooltip);

  tooltip.destroy();

});