Open Bug 1714824 Opened 4 years ago Updated 1 month ago

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

Categories

(Firefox :: Tabbed Browser, enhancement, P5)

Product:
Firefox
Component:
Tabbed Browser
Type:
enhancement

Tracking

()

People

(Reporter: adam, Unassigned)

Details

Attachments

(2 files, 2 obsolete files)

tabs-multiple-rows.patch
26.79 KB, patch
Details | Diff | Splinter Review
Bug 1714824 - Add multiple rows of tabs to Firefox, accessible with a configuration setting
48 bytes, text/x-phabricator-request
Details | Review
Attached file multiple_tab_lines.css (obsolete) —

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.

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

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

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.

Component: Untriaged → Tabbed Browser

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.

Status: UNCONFIRMED → NEW
Has Regression Range: --- → no
Has STR: --- → no
Ever confirmed: true
Version: Firefox 89 → Trunk

Thank you Flor.

Where do I vote for this?

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";

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

about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

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.

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?

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

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.

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

(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.

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.

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.

Flags: needinfo?(yurivkhan)

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

Flags: needinfo?(yurivkhan)

(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.

Flags: needinfo?(yurivkhan)

(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.

Flags: needinfo?(firestormx2k)

(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 ;)

Flags: needinfo?(yurivkhan)

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?

Flags: needinfo?(yurivkhan)

’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.

Flags: needinfo?(yurivkhan)
Attached patch tabs-multiple-rows.patch (obsolete) — — Splinter Review

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
Attachment #9225433 - Attachment is obsolete: true

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
Attachment #9329836 - Attachment is obsolete: true
  • 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

Code submitted to Phabricator for review:

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

Assignee: nobody → adam
Status: NEW → ASSIGNED
Attachment #9329843 - Attachment description: WIP: Bug 1714824 - Add multiple rows of tabs to Firefox, accessible with a configuration setting → Bug 1714824 - Add multiple rows of tabs to Firefox, accessible with a configuration setting

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

Assignee: adam → nobody
Status: ASSIGNED → NEW

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.

Flags: needinfo?(firestormx2k) → needinfo?(dao+bmo)
Severity: -- → N/A
Flags: needinfo?(dao+bmo)
Priority: -- → P5

Are there chances for any progress on the code review for this bug?

JanS,

I did get a code review for it last year from a Firefox committer. My understanding from communicating with them is that this code is a no-go because of the approach I took– modifying the C++ chrome Javascript+CSS loading code to make it load like a user script.

The approach that was recommended was to not modify the C++ loading code, but instead make my multiple tabs Javascript+CSS work as part of the existing user interface chrome loading process.

I then tried to do that, but couldn't get it to work in the time I had available. It will definitely work, but it will take some adjusting the Javascript+CSS. The reason I was able to get the multiple tabs PR working so quickly is that I didn't have to do much to the Javascript+CSS userscript it was based on. I was relying on the work of many others who created and debugged the userscript. I'm not an expert front end developer, and I think the recommended approach needs someone willing to:

  1. take the time to understand how the multiple tabs userscript works
  2. take the time to understand how the Firefox Javascript+CSS chrome works
  3. take the time to find out how to merge them together
  4. work through the PR review process

Realistically, at this time it's not me. But I'm happy to help anyone who wants to try it. :)

Assignee: nobody → adam
Status: NEW → ASSIGNED

For those who want multiple rows of tabs, this extension works very well: https://github.com/onemen/TabMixPlus

I avoided switching back to firefox until the above was relatively bug free, and it works very well now. And the author responds to bug reports, and fixes them usually within a day or 2.

Come on firefox, get it together!

Interestingly, on a superuser.com question about this topic, a screenshot is rendered of Firefox seemingly displaying multiple tabs. I presume that this was previously possible?

It has always been possible to achieve this via user scripts or userChrome.css, but never via an built-in option.

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

Assignee: adam → nobody
Status: ASSIGNED → NEW
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: