1 files changed, 83 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_filter_buttons_overflow.js b/devtools/client/webconsole/test/browser/browser_webconsole_filter_buttons_overflow.js
new file mode 100644
index 0000000000..74e5a2ef1a
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_filter_buttons_overflow.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test the locations of the filter buttons in the Webconsole's Filter Bar.
+
+const TEST_URI =
+  "http://example.com/browser/devtools/client/webconsole/" +
+  "test/browser/test-console.html";
+
+add_task(async function () {
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const win = hud.browserWindow;
+  const initialWindowWidth = win.outerWidth;
+
+  info(
+    "Check filter buttons are inline with filter input when window is large."
+  );
+  resizeWindow(1500, win);
+  await waitForFilterBarLayout(hud, ".wide");
+  ok(true, "The filter bar has the wide layout");
+
+  info("Check filter buttons overflow when window is small.");
+  resizeWindow(400, win);
+  await waitForFilterBarLayout(hud, ".narrow");
+  ok(true, "The filter bar has the narrow layout");
+
+  info("Check that the filter bar layout changes when opening the sidebar");
+  resizeWindow(750, win);
+  await waitForFilterBarLayout(hud, ".wide");
+  const onMessage = waitForMessageByType(hud, "world", ".console-api");
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    content.console.log({ hello: "world" });
+  });
+  const { node } = await onMessage;
+  const object = node.querySelector(".object-inspector .objectBox-object");
+  info("Ctrl+click on an object to put it in the sidebar");
+  const onSidebarShown = waitFor(() =>
+    hud.ui.document.querySelector(".sidebar")
+  );
+  AccessibilityUtils.setEnv({
+    // Component that renders an object handles keyboard interactions on the
+    // container level.
+    mustHaveAccessibleRule: false,
+    interactiveRule: false,
+    focusableRule: false,
+    labelRule: false,
+  });
+  EventUtils.sendMouseEvent(
+    {
+      type: "click",
+      [Services.appinfo.OS === "Darwin" ? "metaKey" : "ctrlKey"]: true,
+    },
+    object,
+    hud.ui.window
+  );
+  AccessibilityUtils.resetEnv();
+  const sidebar = await onSidebarShown;
+  await waitForFilterBarLayout(hud, ".narrow");
+  ok(true, "FilterBar layout changed when opening the sidebar");
+
+  info("Check that filter bar layout changes when closing the sidebar");
+  sidebar.querySelector(".sidebar-close-button").click();
+  await waitForFilterBarLayout(hud, ".wide");
+
+  info("Restore the original window size");
+  await resizeWindow(initialWindowWidth, win);
+
+  await closeTabAndToolbox();
+});
+
+function resizeWindow(width, win) {
+  const onResize = once(win, "resize");
+  win.resizeTo(width, win.outerHeight);
+  info("Wait for window resize event");
+  return onResize;
+}
+
+function waitForFilterBarLayout(hud, query) {
+  return waitFor(() =>
+    hud.ui.outputNode.querySelector(`.webconsole-filteringbar-wrapper${query}`)
+  );
+}