Bug 1625121 - [devtools] scrolling the tabs to the seleted tab r=jdescottes,devtools-reviewers (a7ae7e42) · Commits · The Tor Project / Applications / Mullvad Browser

devtools/client/netmonitor/test/browser.ini

+1 −0

Original line number	Diff line number	Diff line
		@@ -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 → 100644

+89 −0

Original line number	Diff line number	Diff line
		/* 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

+14 −1

Original line number	Diff line number	Diff line
		@@ -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

+3 −0

Original line number	Diff line number	Diff line
		@@ -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

+1 −0

Original line number	Diff line number	Diff line
		@@ -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()