Bug 1625121 - [devtools] scrolling the tabs to the seleted tab r=jdescottes,devtools-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D173438

devtools/client/netmonitor/test/browser.ini

@@ -284,6 +284,7 @@ skip-if = true # Bug 1373558
 skip-if = win10_2004 # Bug 1723573
 [browser_net_status-codes.js]
 [browser_net_streaming-response.js]
+[browser_net_tabbar_focus.js]
 [browser_net_telemetry_edit_resend.js]
 [browser_net_telemetry_filters_changed.js]
 [browser_net_telemetry_persist_toggle_changed.js]

devtools/client/netmonitor/test/browser_net_tabbar_focus.js

@@ -0,0 +1,89 @@
+/* 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);
+});

devtools/client/shared/components/tabs/TabBar.js

@@ -9,6 +9,7 @@
 const {
   Component,
   createFactory,
+  createRef,
 } = require("resource://devtools/client/shared/vendor/react.js");
 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
@@ -95,6 +96,7 @@ class Tabbar extends Component {
     this.onTabChanged = this.onTabChanged.bind(this);
     this.onAllTabsMenuClick = this.onAllTabsMenuClick.bind(this);
     this.renderTab = this.renderTab.bind(this);
+    this.tabbarRef = createRef();
   }
 
   // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
@@ -253,6 +255,8 @@ class Tabbar extends Component {
   }
 
   select(tabId) {
+    const docRef = this.tabbarRef.current.ownerDocument;
+
     const index = this.getTabIndex(tabId);
     if (index < 0) {
       return;
@@ -262,6 +266,12 @@ class Tabbar extends Component {
       activeTab: index,
     });
 
+    const tabDomElement = docRef.querySelector(`[data-tab-index="${index}"]`);
+
+    if (tabDomElement) {
+      tabDomElement.scrollIntoView();
+    }
+
     this.setState(newState, () => {
       if (this.props.onSelect) {
         this.props.onSelect(tabId);
@@ -345,7 +355,10 @@ class Tabbar extends Component {
     const tabs = this.state.tabs.map(tab => this.renderTab(tab));
 
     return div(
-      { className: "devtools-sidebar-tabs" },
+      {
+        className: "devtools-sidebar-tabs",
+        ref: this.tabbarRef,
+      },
       Sidebar(
         {
           onAllTabsMenuClick: this.onAllTabsMenuClick,

devtools/client/shared/components/tabs/Tabs.css

@@ -35,6 +35,7 @@ div[hidetabs=true] .tabs .tabs-navigation {
   list-style: none;
   padding: 0;
   margin: 0;
+  margin-inline-end: 15px;
   flex-grow: 1;
 }
 
@@ -45,6 +46,8 @@ div[hidetabs=true] .tabs .tabs-navigation {
 .tabs .tabs-navigation .tabs-menu {
   overflow: hidden;
   display: flex;
+  overflow-x: scroll;
+  scrollbar-width: none;
 }
 
 .tabs .tabs-menu-item {

devtools/client/shared/components/tabs/Tabs.js

@@ -333,6 +333,7 @@ define(function(require, exports, module) {
                 role: "tab",
                 onClick: this.onClickTab.bind(this, index),
                 onMouseDown: this.onMouseDown.bind(this),
+                "data-tab-index": index,
               },
               title,
               badge && !isTabSelected && showBadge()