search

firefox-devtools / ux

Firefox DevTools UX Community
Mozilla Public License 2.0
103 stars 21 forks source link

Implement horizontal scroll to move through Devtool tabs #114

Open kartikcho opened 4 years ago

kartikcho commented 4 years ago

The Devtools UI could benefit from having horizontal scroll enabled in different tabs under inspector. It would be faster to use the two finger scroll to float through tabs on laptops than pressing the drop down every time or resizing the inspector to take up more space to show all tabs.

This could be implemented by hijacking vertical scroll to move horizontally as achieved when scrolling through browser tabs.

Screenshot:

IMG_20200215_152232_008

fvsch commented 4 years ago

So we would keep the overflow button, and add scrolling, right?

kartikcho commented 4 years ago

Yes, maybe option to turn scrolling off or on in settings although this would be useful in every case I think.

digitarald commented 4 years ago

Related, #111 discusses this for Network. A big use case seems small spaces here, so one question would be about how far this is "responsively" handled.

Would this maybe detect on some horizontal scrolling capabilities like a touchpad? There might be telemetry that could tell us how many people use swipe-capable devices.

digitarald commented 4 years ago

@violasong this would align the tab bars with Firefox's tab bars and we keep running into limited space issues with our menus. Should we just follow the existing UX there and open it up for somebody to implement?

fvsch commented 4 years ago

Note that we have at least 3 different tab overflow implementations:

  1. Toolbox tabs
  2. The tab component used for Inspector tabs and Network request details. (Note: the CSS is shared but the DOM/JS implementation might not be.)
  3. Debugger tabs

We should focus on one, with the possible goal of extending our solution to other tab bars. The Inspector tabs could be a good start.

digitarald commented 4 years ago

Makes sense. The sidebar tabs are also the most affected by space constrains. Just noting that Debugger and Toolbox tabs are also sortable.

violasong commented 4 years ago

I like the similarity to the main Firefox tabs, although I see that as more related to the Debugger file tabs than all the static "sectional" tabs.

Do we have an example of where this behavior exists in programs with static tabs as opposed to openable tabs? In any case, experimenting with this sounds good to me.