1 files changed, 43 insertions, 0 deletions
diff --git a/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js b/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js
new file mode 100644
index 0000000000..cdd6678e6f
--- /dev/null
+++ b/devtools/client/framework/test/browser_toolbox_toolbar_minimum_width.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that all of buttons of tool tab go to the overflowed menu when the devtool's
+// width is narrow.
+
+const SIDEBAR_WIDTH_PREF = "devtools.toolbox.sidebar.width";
+
+const { Toolbox } = require("resource://devtools/client/framework/toolbox.js");
+
+add_task(async function (pickerEnable, commandsEnable) {
+  // 74px is Chevron(26px) + Meatball(24px) + Close(24px)
+  // devtools-browser.css defined this minimum width by using min-width.
+  Services.prefs.setIntPref(SIDEBAR_WIDTH_PREF, 74);
+  registerCleanupFunction(function () {
+    Services.prefs.clearUserPref(SIDEBAR_WIDTH_PREF);
+  });
+  const tab = await addTab("about:blank");
+
+  info("Open devtools on the Inspector in a side dock");
+  const toolbox = await openToolboxForTab(
+    tab,
+    "inspector",
+    Toolbox.HostType.RIGHT
+  );
+  await waitUntil(() => toolbox.doc.querySelector(".tools-chevron-menu"));
+
+  await openChevronMenu(toolbox);
+
+  // Check that all of tools is overflowed.
+  toolbox.panelDefinitions.forEach(({ id }) => {
+    const menuItem = toolbox.doc.getElementById(
+      "tools-chevron-menupopup-" + id
+    );
+    const tab = toolbox.doc.getElementById("toolbox-tab-" + id);
+    ok(menuItem, id + " is in the overflowed menu");
+    ok(!tab, id + " tab does not exist");
+  });
+
+  await closeChevronMenu(toolbox);
+});