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. 

 

50 REPLIES 50

KellyClowers
Making moves

Will this still be able to work well with things like Tree-Style Tabs and Sidebery? I mean they might need to update APIs or whatever, but should still have the flexibility to work generally the same yeah?

Hi!

Yes, we plan to keep supporting existing sidebar API.

Additionally, new sidebar will allow hiding horizontal tabs, so that folks using a variety of extensions and customizations can keep their workflow if they prefer it to native vertical tabs.

This is great—just wish there were official flatpaks for nightly + developer edition so that I could actually get to use this! I will cry tears of joy if it makes it to stable (and tears of despair if it is abandoned)

Regardless of API additions for tree-style tab plugins, I'll be happy as long as we get native vertical tabs at all. It's so painful to have the tabstrip duplicated, opening other sidebar features making tree-style tabs disappear, and not even having any shortcut to bring tree style tabs back up.

ilikefirefox99
Making moves

I noticed that in the demo/test build there was the option to pin sites to sidebar, which is great addons. But, if/when implementing that, please implement also the functionality of extensions, userstylus, userscripts, etc, etc.. also work on those spaces (aka, make them to have same privileges as tabs). Many browsers that implement such functionality, such as Microsoft Edge, don't implement this. Which make those pinned sites considerably less useful, sense things such as Dark Mode and your other extensions won't work on it.

Also, sense you guys are working on the sidebar, I'm not sure how feasible would this be, but I think the idea of having multiple sidebars (well, actually more like 2) could be useful. Like, suppose you want to have a sidebar in your left with your browser history opened, and you want to have OTHER sidebar in the right with your bookmarks or a site opened there.

Hi! We hope to get to pinned tabs in the sidebar, but this will likely be coming a little down the line precisely for the reasons you mentioned - we want pinned tabs (that would be first and foremost useful to folks who would decide to stick to horizontal tab layout) to have functionality similar to what existing tab strip has. Unfortunately, that's a fairly large engineering lift.

Nich
Making moves

That's great.
If there is an opportunity to improve the sidebar, it would be nice to have it:

Auto-hide sidebar function.
The ability to move the History, Bookmarks buttons around.
Ability to add your favorite site to open in the sidebar.
The ability to change the size of the sidebar very subtly.
Ability to have 2 sidebars, for example 1 on the left and 2 on the right
Thank you for listening!

Hi Nich!

Thank you for your suggestions! Some of these things are already in progress, others are stretch goals/might come in later releases.

One thing that's not on our radar for now are two sidebars - most of our users report being pressed for space, so we are working on an interaction model that tries to use less rather more screen space.

myspace
Making moves

Thanks for the update. Can't wait to hear more!

wutongtaiwan
Making moves

Since I'm planning to improve the sidebar functionality, I'd like to mention some of my requests. There is a function in the sidebar of Edge called Drop, which is to transfer files, videos, text, and pictures between Edges of different devices. I love this feature. If you're going to develop this feature, remember not to throttle the speed

wutongtaiwan
Making moves

I want your sidebar UI to look a little better, I like the chrome style. A good-looking UI is also important to make people more comfortable and enjoyable

wutongtaiwan_0-1713276237109.png

 

adamrecvlohe
Making moves

Maybe this is already obvious, but in setting up sidebery by updating my profile css, I wanted to hide the tab bar so only the sidebery tabs show. The same option should exist for the native implementation

I think it should work as an option where you want to see the tabs (if at all): top/bottom/left/right/nowhere. In that case, there is no need to turn off the original one. This is how Vivaldi does it:

halmai_0-1713445168171.png

 

 

We are planning to support hiding the horizontal tab strip and address this long-standing need.

SilvaAnderson
Making moves

I think Browser Arc is the most disruptive in the browser market today. We brought the Safari experience on Mac to Windows. I believe that Mozilla should be inspired by cleaner experiences, and provide users with solutions to create their own experience with "complements" that add this possibility.


Unfortunately #arcbrowser does not work in Windows 10 and older versions so I believe there is a window of opportunity there. BTW have you seen the sidebars for Youtube music and whatsapp in Opera browser?

okay_okay
Making moves

Great news 👏

tilwiti
Making moves

@Jon Hello, will it be possible to expand the sidebar so that it takes up half of the screen? This feature would be a good starting point for implementing Split View, similar to what's available in Microsoft Edge (or Vivaldi).


The new sidebar will be able to expand to 75% of the screen (with an eye for future of the split view and, before that, for the convenience of viewing, say, History in nearly full screen for some use cases)

wutongtaiwan
Making moves

Mozilla can refer to the design of the Floorp browser and the Midori browser, both of which are browsers based on the gecko kernel. But your UI needs to learn from Chrome

Chrome has horrible UI, please don't imitate it more than already, in fact imitate it less...

But Chrome's UI is really good-looking, and of course everyone's aesthetic is different

Corb
Making moves

Expanding and contracting the sidebar by clicking on the edge is a good function, but if a user (like me) drags the sidebar whole way to the left side of the window, there is no way to expand the sidebar to become visible again. I have tried closing the window, restarting, but nothing works. Adding a minimum size or a condition for the sidebar size to be reverted would fix this massive issue.

Also: The child tabs when using tree-style tabs appear to not always expand even when the "expand all" button is selected. I obviously can not continue testing this because the above error has locked me out of using sidebar, but making the collapse and expand function of tree-style tabs more reliable also seems necessary.

I am using the Waterfox engine if this has any effect on these issues.

Hi Corb,

The prototype you're using has lots of known troubles - it's something we put together as a proof-of-concept to motivate longer-term investment into the sidebar improvements, then moved on to working on making it right in Nightly.

We will definitely work on ensuring the stability of the updates to the sidebar and key extensions in Nightly.

As you know, Firefox forks are specialized modifications, so if you keep seeing discrepancies between the fork and the standard Nightly as more sidebar functionality becomes available, I'd suggest filing issues in your fork's repository so that development team can look into the reasons for unexpected behaviors/bugs.

 

tilwiti
Making moves

Haven't figured out how to use the sidebar in Firefox Nightly yet.

Anonymous
Not applicable

It'd be nice if the sidebar stretched the length of the whole window, like the spaces toolbar does in thunderbird.

Also, I hope the new sidebar is just as extensible as the old one and doesn't make extensions like sideberry impossible.

Hi aoeui,

The updated sidebar will remain compatible with existing sidebar-ready extensions. As we make the new functionality available in Nightly, we will kindly ask our community to report any problems with key extensions to us and extension developers so we can collaborate and ensure that everyone's workflows remain uninterrupted.

The new sidebar will stretch to 75% of the screen👍

 

Could you gradually refine this feature to Split View? (at least for 3 tabs in one window maximum)

It would be wow.

ilikefirefox99
Making moves

On that note, it's probably asking too much, but it would be amazing if you could put like 4 different split views, like you can do on browsers such as Vivaldi. It might seem a little bit overblown, but many sites today use responsive design, and you can neatly put them side by side.

ilikefirefox99_0-1714343178280.png

 

Jon
Community Manager
Community Manager

This is great and welcome feedback here too 😀

@ilikefirefox99 and if you feel like also sharing it in the split view idea thread, feel free to.

Four websites at a time can have performance implications, but we are going to look into split view later in the year and see how it goes😉

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