1 files changed, 83 insertions, 0 deletions
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_overflow.js b/devtools/client/framework/test/browser_toolbox_toolbar_overflow.js
new file mode 100644
index 0000000000..9f964af18e
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_overflow.js
@@ -0,0 +1,83 @@
+/* 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;
+});