1 files changed, 90 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/test/browser_net_tabbar_focus.js b/devtools/client/netmonitor/test/browser_net_tabbar_focus.js
new file mode 100644
index 0000000000..3bcc7c0ca1
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_tabbar_focus.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if selecting a tab in a tab bar makes it visible
+ */
+add_task(async function () {
+  Services.prefs.clearUserPref(
+    "devtools.netmonitor.panes-network-details-width"
+  );
+
+  const { tab, monitor } = await initNetMonitor(SIMPLE_URL, {
+    requestCount: 1,
+  });
+  info("Starting test... ");
+
+  const { document, store, windowRequire } = monitor.panelWin;
+  const topMostDocument = DevToolsUtils.getTopWindow(
+    document.defaultView
+  ).document;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  const networkEvent = waitForNetworkEvents(monitor, 1);
+  tab.linkedBrowser.reload();
+  await networkEvent;
+
+  store.dispatch(Actions.toggleNetworkDetails());
+
+  const splitter = document.querySelector(".splitter");
+
+  await EventUtils.synthesizeMouse(
+    splitter,
+    0,
+    1,
+    { type: "mousedown" },
+    monitor.panelWin
+  );
+  await EventUtils.synthesizeMouse(
+    splitter,
+    300,
+    1,
+    { type: "mousemove" },
+    monitor.panelWin
+  );
+  await EventUtils.synthesizeMouse(
+    splitter,
+    300,
+    1,
+    { type: "mouseup" },
+    monitor.panelWin
+  );
+
+  await waitUntil(() => document.querySelector(".all-tabs-menu"));
+  const allTabsMenu = document.querySelector(".all-tabs-menu");
+  const panelsWidth = document.querySelector(".tabs-menu").offsetWidth;
+
+  const selectTabFromTabsMenuButton = async id => {
+    EventUtils.sendMouseEvent({ type: "click" }, allTabsMenu);
+    const tabMenuElement = topMostDocument.querySelector(
+      `#devtools-sidebar-${id}`
+    );
+    if (tabMenuElement != null) {
+      tabMenuElement.click();
+      // The tab should be visible within the panel
+      const tabLi = document.querySelector(`#${id}-tab`).parentElement;
+      const ulScrollPos =
+        tabLi.parentElement.scrollLeft + tabLi.parentElement.offsetLeft;
+      ok(
+        tabLi.offsetLeft >= ulScrollPos &&
+          tabLi.offsetLeft + tabLi.offsetWidth <= panelsWidth + ulScrollPos,
+        `The ${id} tab is visible`
+      );
+    }
+  };
+
+  for (const elem of [
+    "headers",
+    "cookies",
+    "request",
+    "response",
+    "timings",
+    "security",
+  ]) {
+    await selectTabFromTabsMenuButton(elem);
+  }
+
+  await teardown(monitor);
+});