1714824 - Add multiple rows of tabs to Firefox, accessible with a configuration setting

Status: NEW

(Firefox :: Tabbed Browser, enhancement, P5)

Description

[adam]

Attachment: multiple_tab_lines.css

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Multiple rows of tabs are essential to my use of Firefox, and many other people. It's hard to have many tabs open and manage them without the ability to have multiple rows of them.

Installing this file as userChrome.css under Firefox 89's Proton user interface enables multiple rows of tabs:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/proton/multiple_tab_lines.css

It works very well– as if it were built in. Can you build in this CSS, and set the right config settings, based on a configuration setting? This would allow many more people to use this feature.

Actual results:

Got multiple rows of tabs by installing a custom userChrome.css file.

Expected results:

I should be able to set a configuration setting and turn this on, instead of installing a userChrome.css file and having to manipulate a bunch of configuration settings.

Comment 1

[adam]

Here's the GitHub repo the multiple_tab_lines.css userChrome file comes from:

https://github.com/Aris-t2/CustomCSSforFx

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Tabbed Browser' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 3

[Florencia Di Ciocco, NI to vbalducci]

Hi,

I've set this bug as new. I believe that the enhancement has the proper component, so we'll await for a developer to take a look.

Regards, Flor.

Comment 4

[adam]

Thank you Flor.

Comment 5

[Ivan Pozdeev]

Where do I vote for this?

Comment 6

[Alireza Haghshenas]

You can vote here: https://mozilla.crowdicity.com/post/748484

Comment 7

[adam]

Just putting this here for anyone who wants a workaround. Installing this userChrome framework and configuring it can give you multiple rows of tabs:

https://github.com/Aris-t2/CustomCSSforFx

• Clone the above git repo
• Create a chrome directory in your Firefox profile directory
• Create a symbolic link to it in the chrome directory
• save the below lines as userChrome.css:

@import "tabs_multiple_lines.css";
/* @import "tab_close_hidden.css"; */
@import "tab_close_always_visible.css";

Comment 8

[adam]

You will also need to set the following about:config setting:

about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

Comment 9

[adam]

I have a fix for this bug that implements multiple tab rows, using the CustomCSSforFx CSS code, accessible via the Firefox about:config configuration settings. I will work on getting the patch submitted over the next few days.

Comment 10

[Yuri Khan]

One issue with CSS-based solutions to multiple tab rows is erratic behavior when using drag-and-drop to reorder tabs. Are you fixing that, too?

Comment 11

[adam]

Yuri, I haven't noticed erratic behavior using this CSS solution. Can you say more and/or provide reproduction steps?

Comment 12

[adam]

Yuri– ok, hmmm, I see what you mean. I mainly use the keyboard to move tabs around. But with this solution if you are trying to move a tab out of the first row, or from row 2+ to a different row, the drag and drop does not work consistently.

For me, the trade-off of having multiple tabs is worth it. But I will look into whether its possible to fix this behavior.

Comment 13

[firestormx2k]

+1 Hey Adam, rarranging the tabs with drag & drop would be great :) ! Thanks for looking into it!

Comment 14

[Yuri Khan]

(In reply to adam from comment #12)

Yuri– ok, hmmm, I see what you mean. I mainly use the keyboard to move tabs around. But with this solution if you are trying to move a tab out of the first row, or from row 2+ to a different row, the drag and drop does not work consistently.

For me, the trade-off of having multiple tabs is worth it. But I will look into whether its possible to fix this behavior.

Yeah, that’s what I meant. It’s a passable external workaround, but from an integrated feature users will probably expect better behavior.

Comment 15

[adam]

Thanks, I'll work to fix this before submitting.

I did some more testing and worked out that the behavior is not really erratic– it's seems to be that the tabbrowser-tabs.js code doesn't take into account any tab that is not in the first row. So it can only drop tabs into the first first row, or the last position in the last row if that is visible. I'll keep testing to see if there are other problems.

Comment 16

[adam]

I have a fix for the problematic tab behavior. It alters the javascript in tabbrowswer-tabs.js. If the ui.multipleRowsOfTabs.enabled setting is true, instead of doing the moving tabs animation, during a tab drag event, it places the blue tab-drag-indicator.svg where the tab will be dropped. I decided to disable the moving tags animation because the it looked too weird with multiple rows.

I'll clean this up and try to submit it for review.

Let me know if this method doesn't sound good, and if so, what I should do instead.

Comment 17

[Yuri Khan]

I have no deciding power here, just a user who sorely misses TabMixPlus. Please find a reviewer from the core team.

Comment 18

[adam]

(In reply to Yuri Khan from comment #17)

I have no deciding power here, just a user who sorely misses TabMixPlus. Please find a reviewer from the core team.

No problem, I will do that once I get the code cleaned up.

What do you think about the above approach though? And also, would you be interested in testing out a custom Nightly build with this included? I could send you a binary.

Comment 19

[adam]

(In reply to firestormx2k from comment #13)

+1 Hey Adam, rarranging the tabs with drag & drop would be great :) ! Thanks for looking into it!

Hey firestormx2k, would you be willing to test a custom Nightly build of this? I could send you a binary. It would be great to get another set of eyes on it. If so, what platform are you on? I could easily make one for Linux or macOS. Might be able to dig out a Windows machine too if that's what you run.

Comment 20

[Yuri Khan]

(In reply to adam from comment #18)

What do you think about the above approach though?

I think any approach would be good, as long as it gets accepted into the code base.

And also, would you be interested in testing out a custom Nightly build with this included? I could send you a binary.

Why don’t you put up a patch instead? You’ll have to do that sooner or later anyway for the review, and in the mean time interested users could apply it to a local build.

Suggesting people that they accept and run a binary built by a stranger doesn’t seem like good Internet hygiene ;)

Comment 21

[adam]

Yuri,

Re: binaries, and internet hygiene, you are right about that. I retract that suggestion!

Re: patch, I will do that as soon as I get things cleaned up. I've never contributed to Firefox before– I've read the "How to Contribute" docs, but I'm still not clear on the process. By "put up a patch" did you mean submit it via Phabricator? Or attach a patch file to this bug? Or something else?

Comment 22

[Yuri Khan]

’s been a long time since I contributed, but yes, it seems Phabricator is the way to go these days. In the past, it was also possible to attach a patch or a few right in bugzilla and tag your chosen reviewer; maybe it still works.

Comment 23

[adam]

Attachment: tabs-multiple-rows.patch

This is a proposed fix for this bug:

Bug 1714824 - Add multiple rows of tabs to Firefox, accessible with a configuration setting

- when enabled, multiple rows of tabs will be visible if there are enough tabs.
- config settings:
  - tabs.ui.multipleRows.enabled - boolean setting, defaults to false
  - tabs.ui.multipleRows.numberOfRows - integer setting, defaults to 3
- tab move animation is disabled for multiple rows
  - blue tab drop indicator is used instead
- CSS for this addition comes from https://github.com/Aris-t2/CustomCSSforFx
  - which is MPL 2.0 licensed

Comment 24

[adam]

Attachment: tabs-multiple-rows.patch

Bug 1714824 - Add multiple rows of tabs to Firefox, accessible with a configuration setting

- when enabled, multiple rows of tabs will be visible if there are enough tabs.
- config settings:
  - tabs.ui.multipleRows.enabled - boolean setting, defaults to false
  - tabs.ui.multipleRows.numberOfRows - integer setting, defaults to 3
- tab move animation is disabled for multiple rows
  - blue tab drop indicator is used instead
- CSS for this addition comes from https://github.com/Aris-t2/CustomCSSforFx
  - which is MPL 2.0 licensed

Comment 25

[adam]

Attachment: Bug 1714824 - Add multiple rows of tabs to Firefox, accessible with a configuration setting

• when enabled, multiple rows of tabs will be visible if there are
  enough tabs.
• config settings:
  • tabs.ui.multipleRows.enabled - boolean setting, defaults to false
  • tabs.ui.multipleRows.numberOfRows - integer setting, defaults to 3
• tab move animation is disabled for multiple rows
  • blue tab drop indicator is used instead
• CSS for this addition comes from https://github.com/Aris-t2/CustomCSSforFx
  • which is MPL 2.0 licensed

Comment 26

[adam]

Code submitted to Phabricator for review:

https://phabricator.services.mozilla.com/D176222

Comment 27

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Comment 28

[BugBot [:suhaib / :marco/ :calixte]]

Redirect a needinfo that is pending on an inactive user to the triage owner.
:dao, since the bug doesn't have a severity set, could you please set the severity or close the bug?

For more information, please visit BugBot documentation.