browser_toolbox_toolbar_overflow.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

 * http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that a button to access tools hidden by toolbar overflow is displayed when the

// toolbar starts to present an overflow.

const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");

add_task(async function () {

  const tab = await addTab("about:blank");

  info("Open devtools on the Inspector in a bottom dock");

  const toolbox = await openToolboxForTab(

    tab,

    "inspector",

    Toolbox.HostType.BOTTOM

);

  const hostWindow = toolbox.topWindow;

  const originalWidth = hostWindow.outerWidth;

  const originalHeight = hostWindow.outerHeight;

  info(

    "Resize devtools window to a width that should not trigger any overflow"

);

  let onResize = once(hostWindow, "resize");

  hostWindow.resizeTo(1350, 300);

  await onResize;

  info("Wait for all buttons to be displayed");

  await waitUntil(() => {

    return (

      toolbox.panelDefinitions.length ===

      toolbox.doc.querySelectorAll(".devtools-tab").length

);

});

  let chevronMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");

  ok(!chevronMenuButton, "The chevron menu button is not displayed");

  info("Resize devtools window to a width that should trigger an overflow");

  onResize = once(hostWindow, "resize");

  hostWindow.resizeTo(800, 300);

  await onResize;

  await waitUntil(() => !toolbox.doc.querySelector(".tools-chevron-menu"));

  info("Wait until the chevron menu button is available");

  await waitUntil(() => toolbox.doc.querySelector(".tools-chevron-menu"));

  chevronMenuButton = toolbox.doc.querySelector(".tools-chevron-menu");

  ok(chevronMenuButton, "The chevron menu button is displayed");

  info(

    "Open the tools-chevron-menupopup and verify that the inspector button is checked"

);

  await openChevronMenu(toolbox);

  const inspectorButton = toolbox.doc.querySelector(

    "#tools-chevron-menupopup-inspector"

);

  ok(!inspectorButton, "The chevron menu doesn't have the inspector button.");

  const consoleButton = toolbox.doc.querySelector(

    "#tools-chevron-menupopup-webconsole"

);

  ok(!consoleButton, "The chevron menu doesn't have the console button.");

  const storageButton = toolbox.doc.querySelector(

    "#tools-chevron-menupopup-storage"

);

  ok(storageButton, "The chevron menu has the storage button.");

  info("Switch to the performance using the tools-chevron-menupopup popup");

  const onSelected = toolbox.once("storage-selected");

  storageButton.click();

  await onSelected;

  info("Restore the original window size");

  onResize = once(hostWindow, "resize");

  hostWindow.resizeTo(originalWidth, originalHeight);

  await onResize;

});