devtools/client/netmonitor/test/browser_net_tabbar_focus.js

   1 /* Any copyright is dedicated to the Public Domain.
   2    http://creativecommons.org/publicdomain/zero/1.0/ */
   3
   4 "use strict";
   5
   6 /**
   7  * Tests if selecting a tab in a tab bar makes it visible
   8  */
   9 add_task(async function () {
  10   Services.prefs.clearUserPref(
  11     "devtools.netmonitor.panes-network-details-width"
  12   );
  13
  14   const { tab, monitor } = await initNetMonitor(SIMPLE_URL, {
  15     requestCount: 1,
  16   });
  17   info("Starting test... ");
  18
  19   const { document, store, windowRequire } = monitor.panelWin;
  20   const topMostDocument = DevToolsUtils.getTopWindow(
  21     document.defaultView
  22   ).document;
  23   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
  24
  25   const networkEvent = waitForNetworkEvents(monitor, 1);
  26   tab.linkedBrowser.reload();
  27   await networkEvent;
  28
  29   store.dispatch(Actions.toggleNetworkDetails());
  30
  31   const splitter = document.querySelector(".splitter");
  32
  33   await EventUtils.synthesizeMouse(
  34     splitter,
  35     0,
  36     1,
  37     { type: "mousedown" },
  38     monitor.panelWin
  39   );
  40   await EventUtils.synthesizeMouse(
  41     splitter,
  42     300,
  43     1,
  44     { type: "mousemove" },
  45     monitor.panelWin
  46   );
  47   await EventUtils.synthesizeMouse(
  48     splitter,
  49     300,
  50     1,
  51     { type: "mouseup" },
  52     monitor.panelWin
  53   );
  54
  55   await waitUntil(() => document.querySelector(".all-tabs-menu"));
  56   const allTabsMenu = document.querySelector(".all-tabs-menu");
  57   const panelsWidth = document.querySelector(".tabs-menu").offsetWidth;
  58
  59   const selectTabFromTabsMenuButton = async id => {
  60     EventUtils.sendMouseEvent({ type: "click" }, allTabsMenu);
  61     const tabMenuElement = topMostDocument.querySelector(
  62       `#devtools-sidebar-${id}`
  63     );
  64     if (tabMenuElement != null) {
  65       tabMenuElement.click();
  66       // The tab should be visible within the panel
  67       const tabLi = document.querySelector(`#${id}-tab`).parentElement;
  68       const ulScrollPos =
  69         tabLi.parentElement.scrollLeft + tabLi.parentElement.offsetLeft;
  70       ok(
  71         tabLi.offsetLeft >= ulScrollPos &&
  72           tabLi.offsetLeft + tabLi.offsetWidth <= panelsWidth + ulScrollPos,
  73         `The ${id} tab is visible`
  74       );
  75     }
  76   };
  77
  78   for (const elem of [
  79     "headers",
  80     "cookies",
  81     "request",
  82     "response",
  83     "timings",
  84     "security",
  85   ]) {
  86     await selectTabFromTabsMenuButton(elem);
  87   }
  88
  89   await teardown(monitor);
  90 });