cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Improvements to the Firefox sidebar are on the way…

Jon
Community Manager
Community Manager

In the latest Nightly Blog post, our product team has announced some exciting work aimed at improving the sidebar experience in Firefox.

To quickly summarize…

We have been exploring (including listening to all your feedback and ideas here on Connect) how to best enhance the existing sidebar and strengthen productivity use cases. You may have even discovered these early concept builds in Nightly behind preferences—good catch 👀!

This is very much at an experimental prototype stage, but we are encouraged by the early positive feedback. And we look forward to engaging with you here for additional feedback once sidebar features are ready for testing. 

Stay tuned and feel free to drop any questions or comments below. 

 

78 REPLIES 78

ikpjr
Familiar face

My view on what the future sidebar can be ( behave and look like ) :

  • Pinned tabs are "CSS sticky" ( horizontal and faviconized, scrollable "pinned tabs strip" and optionally multi-row - positioned at the sidebar's top ) - I have this working on my setup(s)/profile(s) with custom CSS .
  • Views like history and others are shown their full contents in their own "popup window" not occupying the sidebar and occluding webpage viewing for quick glancing and summoning ( of history view and others of interest ) , but can be triggered from their respective buttons placed on it . Those buttons could be drag and droppable within it and to other places like nav bar or status bar .
  • Be moveable to the right-side ( this is also achievable with custom CSS ) .
  • Auto hideable like in Edge ( same as above ) .
  • Auto detection of sidebar extensions and prompt or not for hiding of horizontal tab bar ? ( I have this currently with userChrome script and stylesheet(s) ) .
  • Creation and functionality of tab stacks like in Vivaldi ( FF has tab grouping addons like Tab Sidebar available that aren't as featureful as Vivaldi's stacks ) .
  • Ability of integration of non native vertical extensions with the upgraded sidebar API .

Also to note that stuff could live in other places other than the sidebar, instead being placed on nav bar strip or even status bar ( at top, for straightforward checking and confirmation of underlying URLs for links, actions for mouse gestures and other page in progress actions like loading, downloading, extension and page specific actions and tasks progresses ) .

The status bar at top ( below other top UI like horizontal bars, including bookmark bar, if enabled ) option makes sense, because usually for text, but presumably also for all webpage content, one has the current line of text scrolled at the top of the viewport/"window" for better head and body posture and less eye and body movement from top of viewport where content is being consumed to status ( currently on bottom ) while also having the benefit of more focused workflow and less distraction .

As always, this kind of status bar is possible with JS and CSS mods, allowing placing/relocation/reordering of addons or scripts buttons to, from and within it .

Buttons or extensions/actions that make sense to have  in status bar, specially the top one ( I have some/all of them already with custom JS/CSS status bar ) ignore the emoji 😞 :

  • Current time ( down to seconds ) and optionally date .
  • Day of week/month and / or period of day ( like afternoon ).
  • Weather info .
  • Page actions or page menus like those of Vivaldi that among other things allow for highlighting/contrasting/hiding, translating or screenshotting parts of a page, reader view, bookmark page, page zoom slider/buttons, sidebar toggle, RSS/Atom feed discovery, extensions with badges ( like notification count or time ellapsed ), you get an idea .

Find on page at top, ( below top bars/strips and top status bar ), follows a similar logic.

On the topic of hidden top tab bar, I have nav bar mostly displaying page title and window controls , ( when it or it's address bar is not focused or hovered ) in what's called an "oneliner" on /r/FirefoxCSS community . The page title is animated to fade in, making disappear the address/search bar ( at a minimum ). When the nav bar or address/search widget are focused or hovered then the title is animated away and address bar/widget is animated in, with both animations happening simultaneously ( also simultaneously for previous case when nav bar is not focused ). I think it's cool, space and information efficient, makes use of animations instead of abrupt transitions, thereby making clear what's going on .

"Small things" like these make a difference in an user's workflow, productivity ( or stylistic ) preferences, comfort/accessibility, customizability and "wow factor" .

ikpjr
Familiar face

Actually, I'm making a minor correction to the above:

Nav bar animations aren't simultaneous, they are timed to happen sequentially, if I remember correctly.

Also they have been done solely for Vivaldi as I have not ported them over to Firefox ( I have different sets of modifications on each that I didn't port to each other yet ) .

ikpjr
Familiar face

Vivaldi and particularly the Arc browser have interesting sidebar layouts and features ( judging by Arc reviews, unlike Vivaldi which I have first-hand usage experience ).

While Vivaldi has straight away ( natively - without addons ) the most featureful sidebar of the four ( counting Firefox in obviously, and Edge ), like ability to see history, reading lists, bookmarks, downloads and other native organization features like tab stacks on its sidebar, Arc in my view, has one of the best browser sidebar layouts out there, so let me describe it and how Firefox can presumably do a sidebar even better than theirs:

  • "spaces" are akin to Firefox's tab groups ( enabled by tab group addons ) or Vivaldi workspaces ( native feature ) .
  • "favorites" are like pinned, faviconized tabs arranged horizontally at the sidebar's top, that are kept when one switches between spaces ( in the same "profile" ) .
  • spaces are switched to by selecting a space icon among a spaces icon row which exists at the sidebar's bottom .
  • Like Vivaldi's tab stacks, a folder contains tasks's tabs ( in a space ) .
  • Right below the favorites, there is a pinned list section that is particular to a space ( not shared among spaces ) .
  • Each space can have its background color or even color gradient customized, and switching them is like turning an image gallery or carrousel ( gradual page turning animation ) .
  • Search ( address bar ) is at the very sidebar's top, above the favorites .
  • Arc's main window UI is mostly comprised of its sidebar which doesn't have an option to move to the browser's right side, and of a comparatively very thin top bar for windows controls ( and other stuff like browser menus or addons, I surmise ) .

Now, I think Arc's design can be better and Firefox can seek some inspiration from the suggested modifications, listed below :

  • spaces switch row can be instead a slidable from bottom grid of icons and/or short text identifiers ( like 5 character strings ), which is also vertically scrollable ( as to not annoy too much an user by occluding most of the sidebar's tabs or whatever happens to be shown there, like history or bookmarks, for example ) .
  • For the same reasons as above, what I refer to as "pinned list section" in Arc's sidebar description, is of dubious utility with it's current layout, presumedly blocking tab navigation if a sufficient number of folders and other pinnable to that section stuff is added to it .
  • Finally, address bar on sidebar seems to not be a great choice if one wants to see a full query typed in it or most parts of an URL ( besides its website domain ) without too much horizontall scrolling .

Whatever their motivations to have address bar on sidebar, whether to maximize webpage space and/or have sidebar packed and be the UI element which draws attention ( or is supposed to ), it seems like they went a bit extreme on those components layouts .

So I make another suggestion related to the address bar ( the other is detailed on my other post in this discussion thread ), as it doesn't really occupy that much vertical space and needs not be relegated to a less prominent role in a browser's overall component layout and sizing .
The rationale for the below modification suggestions, is that the browser can proactively meet an user's needs and make clear to the person the action to be performed in a single interaction"entry point" ( to minimize user confusion by having too much choice or more cluttered UI with several input choices available ) . I have witnessed such confusion in non computer savvy people, typically from older adults . Presumably, all other users, including power users, would also appreciate this kind of straightforward interaction .
The mentioned suggestions:

Whenever an user digits alphanumeric keys or words( that way excluding among others, hotkeys and arrows) outside input controls on a webpage or menus, then address bar or search in the nav bar is faded out while being morphed ( and resized ) to a quick commands style widget fading in to center of viewport, being progressively shown/rendered from top ( where its command/ search widget is located ) to bottom, like it had an animation on its height ( maybe with a (de)materialize CSS animations effects or "Thanos snap" as seen on Telegram, when one deletes a message) . Of course, this would be enabled optionally by a setting.
In principle, the fadings ( maybe not for optional morphing and materializing effects ) should be doable and triggered by a Quick Commands launch. The trigger of Quick Commands launch by keyboard user input as described, is the tricky part it seems.
Would this feature be a resource hog and/or difficult to implement, either on user side with JS/CSS ( I haven't given it a try ) or by FF developers?

Notes on the above:
1) The user keyboard input would be passed to and shown by Quick commands on its search widget .
2) There exists a quick commands addon for FF .
3) A page load triggered by entering input followed by Enter key either on address bar or quick commands could possibly have an animation to the entire page ( or just its top ) , to make clear its connection to those components/widgets. For example, maybe those components would take part in such animation(s) by pretending to be or referring to the concept of a document printer's or typewriter mouth spewing a page out .
An user wouldn't or feel the need to know what such devices are as long as a visual and logical connection of cause and effect between involved components is established . Nor am I saying that such animations have to have any mimicking or fidelity to such devices .

What do you think about any of this ?

We definitely need a meeting with the UX team; hopefully, someone will respond soon.

I've suggested this here, but it seems my proposal got lost in the forum's overall flow: https://connect.mozilla.org/t5/discussions/let-s-organize-q-amp-a-session-with-ux-team/td-p/55936

Please support this suggestion on Reddit, as my account keeps getting placed in read-only mode.

I think this will resolve a lot of issues 😀

silvajohni
Making moves

It sounds great.

silvajohni
Making moves

asafko
Employee
Employee

Hi folks,

A few quick updates from the sidebar team:

- you might have already seen a thread on thread from the Firefox team on a variety of exciting updates we have in the works, but dropping the link here just in case,

- on the sidebar side of things, we are making progress on the vertical tabs and improvements to the history and synced tabs views that already exist in the sidebar. We're going to start sharing demos and invite the community to join testing the new feature set once it's a little less rough around the edges.

i would love to test the vertical sidebar out as and when you release into the nightly builds! Very excited to hear this movement after such a long time!

Agentvirtuel
Contributor

 Hello


ikpjr wrote:

Weather info


For information purposes
Take a look at https://www.camp-firefox.de/forum/thema/137932-wetterangaben-firefox-startseite
Clarification : To avoid displaying my actual geolocation, i use a vpn
https://www.youtube.com/embed/4einVxdxvzQ

DrBolero
Making moves

I would like to see the Bookmarks Sidebar work the same way as Manage Bookmarks. For example, Manage Bookmarks allows selecting multiple bookmarks (e.g., Shft-select or Ctrl-select), but the Bookmarks Sidebar only allows selecting one bookmark or folder at a time. I often have Manage Bookmarks and Bookmarks Sidebar open at the same time to facilitate moving bookmarks (singular or in groups) from one folder to another without having to scroll or cut & paste. This is only one example of the differences.

 

I agree with DrBolero, to the extent that he would concur with the following:

I find that having both Bookmarks Manager and the current bookmarks open at the same time can be useful.  Each has strengths and weaknesses.

The ability to select multiple tabs(bookmark-creation), from open tabs selected, then drag them directly onto the sidebar.Bookmarks(at any place) is quite useful.

The ability to selectivly expand/contract sidebar.Bookmarks, is of greate advantage, in exploring the relationships among the tree of bookmarks.

The BmrksManger, might have this capability (i have not tested);
It does not show the content of bookmark heirarchy of folders in its Sidebar; but  it's a limited, ie  a "folder view", which is useful.. 

However if one is trying to find which folders hold _what_, in a logical comparison mode, then  the sidebar.Bookmarks menu is, at least by me preferred.
The Manager does not have this functionality, from a single, albeit scrollable, view like the sidebar.Bookmarks allows.

 

I DO AGREE that the ability to select multiple bookmarks within sidebar.Bookmarks  would be a very useful feature (for now it is tedious manual), But I would still allow sidebar.Bookmarks & ManageBookmarks tools, rather than trying to make one fit all needs.

Corrrection:  RE BookmarksMgr:

It does not show    //wrong, typo error

Should BE:
It does, explicitly and only show

cluxter
Making moves

It would be awesome to be able to detach the sidebar in order to have it on any screen. This way we could have one dedicated screen for tabs management, or it would allow people using a tiling window manager like i3 to have the sidebar exactly where they want it to be on their screen.

Why would I want to put it on another screen? Because I could have a vertical screen to see all my tabs in the vertical sidebar, and my other horizontal screens to work. I tried that with Sidebery just to see how it would look, and it's actually amazing because:

  • you see way more tabs;
  • it separates tabs management from actual browsing, it's better for your mental organization;
  • you enjoy your full horizontal screen(s) for browsing.

Is this something that is already considered, and if it's not, is this something that could be considered in the future?

EDIT: it would be even better to be able to have several sidebars, so I could have one sidebar per profile, or per tab container, each on a dedicated screen. This would be so great for tab management.

Maverick74
Making moves

Really GREAT news!!!

I have a question, however: What about the rest of Library?

Would be great to have the entire Library available on the sidebar (see: https://bugzilla.mozilla.org/show_bug.cgi?id=1420403 )

Will we have that as well?

( At least let us get about:downloads on the sidebar...)

dom
Making moves

Consider me a bit biased, but Sidebery along with this userchrome is a really great trade-off between having an unobtrusive tab interface along with behavior a user would predict of their tabs. Other vertical tab implementations (Edge, Floorp, Vivaldi) with expanding sidebars tend to be cumbersome to use due to animation speeds and whatnot

Particularly of note here is:

- the separation of the tabs column and the pinned tabs (other sidebar apps could potentially be accessed beneath the pinned tabs)

- the (animated & fast) hovering expansion of the sidebar and its contents.

- Easily accessible tab utilities along the bottom (new tab, history, settings, bookmarks)

 

Thank you for considering these ux tidbits 🙂

aminought
Making moves

I really hope that you will add web panels (aka pinned tabs) to the sidebar and make it possible to open them without closing Tree Style Tab / Sideberry. For me now, this feature in Floorp is a killer feature. To be honest, I don't really know how to do this without a second sidebar, but it seems convenient to me to have tree-style vertical tabs on the left, and bookmarks, history, downloads and web panels on the right. I see two options:

  1. Implement native tree-style vertical tabs that will be located on the left and the sidebar on the right, then I will be just happy.
  2. Make it possible to pin Tree Style Tab to the sidebar, and display the rest as an overlay.

asafko
Employee
Employee

Hi folks,

Thank you so much for all the thoughtful feedback and ideas.

Many of the things you are asking for are on our backlog or "wish list" (we would like to work on it, but it's not a part of the roadmap yet).

We are currently working on the foundational pieces that will pave the way for more complex functionality in the sidebar. For instance, we want to provide options for the sidebar to be displayed or expanded on hover. However, doing this without compromising performance will take some time, so we're pushing this work past the first version.

In any case, we want to share what we're working on with you and we put together a brief video showing the basics of the interaction model over here. We know that no model will perfectly fit everyone's workflow, but this current version is based on extensive user testing, quantitative data, and the feedback from the community here, SUMO, and Bugzilla we had at the time we started. We will tweak it along the way, taking your feedback into account and guided by how most folks will use it in release. We want to provide a reasonable number of customization options, but keep in mind we're a small group working on this fairly large chunk of functionality.

Couple of notes:

  • the video has closed captions enabled, and they are handy, as we were having some troubles during the recording,
  • I made a verbal "typo" at 4:25, calling the horizontal tab strip a horizontal sidebar. 🙂 I meant disabling the horizontal tab strip, of course, and the video shows the correct control in the Customize sidebar panel.
  • what I'm showing is not the final visual design. The final design will be polished along the way.

    We'll be in touch once Nightly is in shape and ready for peeking and testing, but we're reading your feedback and doing our best to deliver a solid first version. However, it's to be expected we will not be able to fit the perfect sidebar of our dreams into the first release, and we'll be improving and enhancing it for a good bit after the first version is available. Hopeful for your support, patience, and willingness to work with us as we make it more useful and helpful for you.

Thank you for sharing your progress! I doubt you'll listen to what I have to say, but I have a few suggestions.

1. Instead of the sidebar settings button, I expect to see a Firefox settings button like in Vivaldi or Floorp. And the sidebar settings button can be moved to the context menu.
2. I need web panels (something like pinned tabs, but opening directly in the sidebar). Moreover, these web panels should not be unloaded from memory when they are closed. Now I miss it the most after switching from Vivaldi. I see that work is underway in many areas, but I can get vertical tabs or tab grouping using Sidebery, but only you can add web panels.
3. I really want to be able to open several panels at the same time, for example Sidebery and bookmarks.
4. Will it be possible to add your own elements to the sidebar via Customize Toolbar?

the settings allows to open the firefox settings, but with an extra click.

I agree a right click menu is needed.

Also moving anything there, and drag-dropping in the "customize toolbar" menu, which should be made more accessible.

Hello! I just wanted to say that the Figma model for the sidebar looks amazing and has everything I would want from a baseline vertical tabs functionality. One thing I would hope to see is the ability to have the vertical tabs on one side, and the sidebar panel itself on the other. In the case where the vertical tabs pane is expanded and the sidebar panel (history for example) is open at the same time, it seems better that the web content be sandwiched between the two rather than both panels pushing the content all the way to one side.

Here's an example from my custom configuration:

Octuris_0-1719080438416.png

Thanks for all your work!

the feature looks awesome so far, i don't really have any feedback for the vertical tabs that haven't already been mentioned, but for the sidebar itself, id like to see is the possibility to put any button on the sidebar (the way you currently can with the tab bar) and/or the option to open any website in the sidebar view (the one that certain extensions and the history can use).

Ill probably come back and give feedback once the feature lands in nightly.

funny enough, that website does not work on FF android or on FF Nightly on Linux. Autoplay does not work, the video is duplicate, no audio...

dom
Making moves

Thank you for this update! I appreciate your community-oriented approach and the preliminary designs are looking really nice - it's good to see that you are considering native support of plugins like Sidebery and TST!

Aside from my feedback from earlier RE: the responsive collapsible sidebar - one thing I wanted to mention in response to your cross-referencing portion of the video is split tabs - Vivaldi has a great implementation of this, and Floorp has one too, which could give the engineers an idea of how this could look in practice since it is open source.

source: https://medium.com/@meymigrou/how-i-use-vivaldi-browser-to-organize-my-workflow-7a4b42c1c64csource: https://medium.com/@meymigrou/how-i-use-vivaldi-browser-to-organize-my-workflow-7a4b42c1c64c

 

 

 

 

Floorp:

dom_1-1719336282872.png

Floorp in particular (as im sure the community has not let you forget) is probably the best example of the sorts of UX a lot of us are looking for (aside from the sidebar expansion being so slow D:). I'd be willing to bet they'd be very open to collaborating and sharing their knowledge and even their work upstream if you find its quality acceptable.

Thanks for listening and best of luck!

By modifying the CSS I currently have fully hidden tabs at the top of the browser. I use sidebery to have tabs on the side. It's more convenient for me because it's easier for me to see the names of the cards, and I'm blind as a bat.

  • I have to hover my mouse over the left edge of the screen to make the vertical tabs panel show up - it doesn't move the website content, but overlap it. I think that even a minimal bar with icons on the side would be a waste of space (for me). If I don't hover mouse over the left edge, it is fully hidden. If I want to quickly check the status of tabs (where exactly I'm right now) or I don't want to move the mouse over the left edge, I set up button shortcut in sidebery, that shows me the tab panel for as long as I hold it.
  • I'm not interested in the grid view. If it can be turned off, that's fine.
  • I am interested in creating a tabs tree - the main topic and the possibility of nesting sub-topics and possibly subsequent topics within them.
  • I'm also interested in the ability to create groups of cards without nesting cards.
  • It would be nice to combine the tabs tree and groups together.
  • A useful function of sidebery is the coloring of tabs - I have immunology set to blue, parasitology to green, and immunoparasitology to purple etc. - with my poor eyesight, it makes navigating through the tabs much faster.

What you showed looks fine to me. I don't mind starting with basic functionality and adding new things over time.

Hello, I want to arrange vertical tabs on the left, and the current sidebar on the right, so that I can see on the right the history, or bookmarks panel, and have the web page more or less centerec on the screen.

In your demo I saw vertical tabs and history side by side, and I don't like it, because the web page is all on the right, not in the center of the firefox window. It's horrible to see.

 

xUxSxExR
Making moves

your "spam flood" detection does not work, when I list the wished buttons (Like addons settings, overview and individual entries) but with the word "A d d o n" multiple times I cannot send it.

jcpaclapp
Making moves

Will do,

Agentvirtuel
Contributor

BloodAngel_san
Making moves

Very interested, Today I moved from gx to firefox, I am deeply missing the sidebar of gx where I can keep the meesege sites like Discord, whatsapp,X. Googleing it brought me here hope it's public soon

Eragon
Making moves

Thank you for allowing the tabs to be on the side.

But here are some things that you can improve

  • Allow the tabs to be on th right of the screen while the sidebar is on the left. I find it better that way.
  • When you use containers it can be hard to identify which tab is in the container, the tab design needs to separate tabs from each other in a better way.

    Eragon_0-1719829494743.png Here one tab is selected, one is in a container and one is not. Tr's easy to see the selected tab but quite hard to see which one is in the container. It should be better with a shadow or a border to each tab (and have the container color inside of that border).

  • Move that arrow button in the sidebar. That'll allow to get back that height from a now unused space. Eragon_1-1719829869045.png

  • Display the tab sidebar when in "Customise toolbar" view
  • Allow to get the dropdown menu (the one with the "Customise toolbar") on right click in the side tab bar.
  • Allways display the X to close the sidebars, it's more intuitive. It's absent from: Notes and Side View extensions, and from the Bookmarks sidebar.

I think that Floorp tab bar is a great source on inspiration, their browser sidebar is great, with the ability to open "web pannels" which are like pinned tabs in side view.

Agentvirtuel
Contributor

Hello

In addition, https://www.youtube.com/embed/_sT33xEUVDY
And of course this is a test of customisation colors with the help of userChrome.css

/* colors tabs */

.tab-text {color:red !important;}
.tabbrowser-tab[selected] .tab-content {
  background-color: #33cc33 !important; }
.tabbrowser-tab:hover:not([selected]) .tab-content {
  background-color: #cccc33 !important; }
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-content {
  background-color: #6691D5 !important; }
.tab-close-button:hover{background-color:red !important;}

Mte90
Making moves

I can confirm that they are working on the sidebar.
They have fixed this the other day https://bugzilla.mozilla.org/show_bug.cgi?id=1904640 that I reported.

My first commit yup. I knew it wasn't hard to fix. And it was a really good point to start learning to contribute to firefox. Thank you for that issue.

Ponda
Making moves

What about the addition of second sidebar? It seems this idea has never been reviewed by the team.

Jon
Community Manager
Community Manager

let me surface it to the team to see if there are any plans

facni
Making moves

Will there be an option to use the old drop-down menu of the sidebar with the new features?

peterpmarchant
Making moves

Since the latest update 128.0 (64 Bit)  when using Firefox it seems to randomly activate the Windows desktop Sidebar.  It seems unlikely but I fail to see what else can cause it.  In the windows sidebar set-up I have the sidebar set to "off".  When the problem arises, which can be a couple of times a day, the only way to restore my desktop is a hard switch off and reboot of the PC.   Very annoying.  Please consider whether this could be a bug in the latest Firefox edition.

Peter Marchant