Affected versions

• 75.0a1 (2020-02-24)

Affected platforms

• Windows 10, macOS 10.13, Ubuntu 19.04;

Steps to reproduce

1. Open http://todomvc.com/examples/jquery/#/all
2. Open Debugger;
3. In Sources panel, click on several files to open them in the Editor panel;
4. Click on one tab and drag it (on x-y axis);

Expected result / Enhancement suggestion

• tabs are contained in the available area;
• as per DevTools tabs their movement is locked on the x axis(tabs cannot be moved up/down)

Actual result

• tabs can be dragged around the browser;
• if dragged in the page_display area the page is scrolled - UX wise, that feels clunky;

Regression range

• visible after the patch in 1568404;
• prior to this the tabs were static;

Additional notes

• attached recording with the issue in comparison with the DevTools tabs to better illustrate the report-enhancement suggestion;
• moving the tabs in the page_display area or anywhere where the Cancel/Deny icon is displayed doesn't trigger the movement on another position;
• tab can be dragged in the js/debug area, shifting the cursor.

The priority flag is not set for this bug.
:jlast, could you have a look please?

For more information, please visit auto_nag documentation.

Thanks for the report!

I can easily see the issue on my machine.

Anybody interested in this bug can look at how it's implemented for the DevTools tabs in bug 1226272

This module is especially interesting
https://searchfox.org/mozilla-central/rev/070a000dd49aac4a26147e137efcd91a728d13b8/devtools/client/framework/toolbox-tabs-order-manager.js#17

Honza