Lepton – Firefox UI Fix(github.com)
github.com
Lepton – Firefox UI Fix
https://github.com/black7375/Firefox-UI-Fix
68 comments
> most people use touchscreens (phones / tablets) but there is still a group of people who have bigger screens and would love to see more data than empty space.
They do/might but adding all that empty space in the desktop version of Firefox is quite pointless, considering that it has a mobile version.
I get that there are people with Surfaces and whatever. There are also people with 30" screens. A mobile UI that fits a phone's screen but not a tablet's is considered poorly-designed. It's high time we acknowledge the same thing is true on non-mobile systems.
That being said, things are not as easy to fix as they seem. Paddings have been getting bigger as the use of contrast in UI designs has decreased, and as UI elements have gone increasingly fatter. Without either of these visual cues, the only way to "isolate" pieces of information is by keeping it apart from other pieces of information -- i.e. by whitespace. If you just took one of these interfaces and reduced all padding values by 50%, you would get sane spacing, but the whole thing would be a jumbled, unreadable mess.
(Edit: obviously, adding some visual cues like borders, if not full-on 3D frames, or at least using colours that people over 30 can differentiate on a cheap monitor in a well-lit room, does fix the readability issues, but it also gets you burnt at the design stake for being a heretic so ¯\_(ツ)_/¯ )
They do/might but adding all that empty space in the desktop version of Firefox is quite pointless, considering that it has a mobile version.
I get that there are people with Surfaces and whatever. There are also people with 30" screens. A mobile UI that fits a phone's screen but not a tablet's is considered poorly-designed. It's high time we acknowledge the same thing is true on non-mobile systems.
That being said, things are not as easy to fix as they seem. Paddings have been getting bigger as the use of contrast in UI designs has decreased, and as UI elements have gone increasingly fatter. Without either of these visual cues, the only way to "isolate" pieces of information is by keeping it apart from other pieces of information -- i.e. by whitespace. If you just took one of these interfaces and reduced all padding values by 50%, you would get sane spacing, but the whole thing would be a jumbled, unreadable mess.
(Edit: obviously, adding some visual cues like borders, if not full-on 3D frames, or at least using colours that people over 30 can differentiate on a cheap monitor in a well-lit room, does fix the readability issues, but it also gets you burnt at the design stake for being a heretic so ¯\_(ツ)_/¯ )
having some padding is nice to have a spot to 'grab' when you want to move windows around. Firefox chrome has gotten so small its a hard to find a 'safe' place to grab.
> Firefox chrome has gotten so small its a hard to find a 'safe' place to grab.
That might suggest that having no titlebars on systems that can display more than one window at a time isn't the best idea, either ;-)
That might suggest that having no titlebars on systems that can display more than one window at a time isn't the best idea, either ;-)
The lack of vertical space on modern 16:9 screens makes them do that. You can make it 9:16 by rotating it 90°, but it isn't common so the default is no bar. Keyboard-oriented browsers often go further than that, offering just a plain page with little to no visible controls.
Anyway, at least you can easily turn the title bar back on.
Anyway, at least you can easily turn the title bar back on.
I know this was the original argument 10+ years ago when this trend started, but it has long stopped any sense. Firefox' tab bar is now 48px. If you add in the insane padding of the address and search boxes, that's practically the same size -- if not thicker -- than the old titlebar + tab bar + address bar combo. No space has been saved in this manner for years now.
yeah - the huge chunk of space between 'home' and the address field is just wasted..It's plenty big enough to shrink it a bit and add some 'outside' padding to the ends of the bar.
I'd be happier if there was just more padding on the 'ends' of the address bar, and less padding 'internal' to it. The space between 'home' and address bar would be a lot more useful if it was split between the to ends and gave you someplace to grab.
yeah. I'm blind as a bat, so I only get 1 window per monitor anyway - so the extra space wouldn't be an issue.
P.S. Am I the only one losing the fight with smaller pixels? As monitors get higher res, I keep having to increase the font size to be able to read them. Even on 4K, twenty-mumble inch monitors, I can only get one 'visible' window at a time.
P.S. Am I the only one losing the fight with smaller pixels? As monitors get higher res, I keep having to increase the font size to be able to read them. Even on 4K, twenty-mumble inch monitors, I can only get one 'visible' window at a time.
You can give yourself that space by showing the menu bar and/or the title bar. I wouldn't be surprised if they take those options away but at least for now you can do it.
that's valid reason, didn't think of that as I got used to moving windows with win+cursor keys
I hate increasing padding and the removal of borders, leading to UI elements that just seem to run into each other. It looks like an unfinished mess.
Even with this fix it's still ridiculously tall --- in the space it manages to show only 3 lines: tabs, address bar/controls, and booksmarks bar, my current browser has 4 lines: a title bar (which shows the full title of the page, not these horrid cut-off fragments), a menu bar, tabs, and controls/address bar.
most people use touchscreens (phones / tablets)
...running Windows? I doubt that.
Even with this fix it's still ridiculously tall --- in the space it manages to show only 3 lines: tabs, address bar/controls, and booksmarks bar, my current browser has 4 lines: a title bar (which shows the full title of the page, not these horrid cut-off fragments), a menu bar, tabs, and controls/address bar.
most people use touchscreens (phones / tablets)
...running Windows? I doubt that.
>> most people use touchscreens (phones / tablets)
> ...running Windows? I doubt that.
of course not, windows 10 mobile is already dead. I am talking about general trend - a lot of people are fine with just smartphone and/or tablet and do not really need to use windows pc/laptop
[edit: formatting]
> ...running Windows? I doubt that.
of course not, windows 10 mobile is already dead. I am talking about general trend - a lot of people are fine with just smartphone and/or tablet and do not really need to use windows pc/laptop
[edit: formatting]
> most people use touchscreens (phones / tablets)
The problem here is that for some bizarre reason, most designers try to come up with a single solution that fits both mice and touchscreens. That should never happen. And that especially should never happen with something that is supposed to run on platforms where touchscreens are a gimmick — which they are on all those Windows laptops.
And, I mean, phones and tablets don't even run the OSes that desktop Firefox runs on. This particular redesign thus makes zero sense.
The problem here is that for some bizarre reason, most designers try to come up with a single solution that fits both mice and touchscreens. That should never happen. And that especially should never happen with something that is supposed to run on platforms where touchscreens are a gimmick — which they are on all those Windows laptops.
And, I mean, phones and tablets don't even run the OSes that desktop Firefox runs on. This particular redesign thus makes zero sense.
Vertical padding make me so angry, vertical space is a scarce resource that is already wasted with giant title bars on top, a dock on the bottom, layers of toolbars stacked on useless icons. If most screens where using a 9x16 ratio it would not be a problem, but they are 16x9 ...
Why do you leave your dock on the bottom? The sides are better places for that on most screens.
I wonder if we really are that small a group. I'm in the same boat and I hear this all around me more and more.
I expect current UI trends are informed by focus group testing that starts with the application in a blank state and adds small amounts of data. You’d get very different results if the focus groups concentrated on using the application in a mature state with ~months worth of data in it.
My hypothesis is that UI designers optimize towards "pretty" at the detriment of functional because pretty is much easier to show with a screenshot in a portfolio or on Twitter.
The decisions are made based on shared telemetry which many power users turn off. I keep my deliberately on for this exact reason.
I keep it on as well - just hope that they can see that after 89.0 was releases there was an increase (not big, but still) in changes to default look'n'feel and make some conclusions :)
I'm the opposite - I have 4K monitors, but it seems like there is no chrome left to grab when you want to move windows in 'modern' apps. Anyplace you click - does something you probably didn't want to do.
I'm not arguing with you, but I like the "feel" of the padding for the tab area, as someone with a 27" 1440p screen. I /don't/ like padding on repeated elements like lists (gmail, reddit, etc.) that are cumulative when evaluating dozens of items on a page, though.
OTOH, I don't see why they couldn't have kept things adjustable with a ratio. And I miss the Status Bar on the bottom.
OTOH, I don't see why they couldn't have kept things adjustable with a ratio. And I miss the Status Bar on the bottom.
You can get a condensed version of the new UI by setting browser.uidensity to 1 in about:config.
true, but that works only with one app, as I see in this thread there is a group of users (likely - very small) that would like to see it in other apps / part of the system.
Reminder that you can disable Firefox's new 'Proton' UI by going to about:config and setting browser.proton.enabled to false.
For maximum effect I also use:
* browser.compactmode.show=true - enable compact mode
* browser.menu.showViewImageInfo=true - show menu icons
* browser.compactmode.show=true - enable compact mode
* browser.menu.showViewImageInfo=true - show menu icons
Reminder that Firefox is most easily customized through Firefox Color at https://color.firefox.com/
That simply allows you to create firefox themes. OP's changes are not possible with the firefox theme engine
It's handy but I've found no way to change the teal/cyan accent of the browser (or at least the color of links in the address bar)
There's no visible teal/cyan anywhere for me. These are my Firefox Color settings: https://color.firefox.com/?theme=XQAAAAJAAQAAAAAAAABBqYhm849...
I've hidden the tab bar, though, so there will likely still be an accent there.
I've hidden the tab bar, though, so there will likely still be an accent there.
The links in the address bar dropdown is teal/cyan for me: https://i.imgur.com/NfOavJ7.png
The increased menu item height was driving me nuts. Copying the stuff from "Menu - Reduce Padding" fixed that for me. Great!
The code that changes the look is entirely CSS. What’s stopping FF from allowing this level of theming from normal addons?
The browser’s UI is currently implementation detail: they can change structures, markup, &c. as they desire. If they allow add-ons to apply arbitrary CSS to the chrome, they can’t change it any more. Perhaps they could operate a selector whitelist or something like that, but it’d subsequently limit what they could do when they wanted or needed to change things.
This was basically the problem with old-style XUL addons; they prevented the browser from improving, actively hindering in important areas like performance and security (by which I mean security of the browser itself even with no extensions—architectural things like sandboxing and going multiprocess), and so eventually they were done away with because they just kept on causing trouble.
And that’ only considering the practical problems of allowing this. The security implications of allowing it are rather significant too: a malicious add-on could almost completely conceal its existence, preventing you from removing it.
This was basically the problem with old-style XUL addons; they prevented the browser from improving, actively hindering in important areas like performance and security (by which I mean security of the browser itself even with no extensions—architectural things like sandboxing and going multiprocess), and so eventually they were done away with because they just kept on causing trouble.
And that’ only considering the practical problems of allowing this. The security implications of allowing it are rather significant too: a malicious add-on could almost completely conceal its existence, preventing you from removing it.
Not that Mozilla has ever really cared a lot to maintain backwards compatibility for the APIs that are public. Maybe it has improved in the last years, but some years ago I developed an extension which didn't need a lot of updates for its actual functionality, but I had to revisit it time and time again just so it would still work with the newest Firefox version...
And that showed the problem of the XUL approach: when everything is public interface, nothing is stable.
WebExtensions, on the other hand, has a carefully-defined API with much more dependable stability guarantees.
WebExtensions, on the other hand, has a carefully-defined API with much more dependable stability guarantees.
I agree it was a good idea to get rid of the XUL-based UI and XUL addons. But I think allowing addons to apply some limited CSS changes to the new UI could be a good compromise.
It would be significantly less powerful than what could be done with XUL, but it would provide a more reasonable interface to go beyond simply changing colours and background images.
I can acknowledge that there would be challenges creating such a feature in a way that is resistant to abuse, but I think it could allow the browser to regain a big competitive advantage at a fraction of the cost of the old implementation.
It would be significantly less powerful than what could be done with XUL, but it would provide a more reasonable interface to go beyond simply changing colours and background images.
I can acknowledge that there would be challenges creating such a feature in a way that is resistant to abuse, but I think it could allow the browser to regain a big competitive advantage at a fraction of the cost of the old implementation.
The only thing that bugged me enough to change it are the tiles on the new tab page. The new default is an absurd degree of nested padding so that the tile icons were tiny relative to the space given for each tile.
If each and every tile is 60% whitespace then there's too much whitespace for me.
If each and every tile is 60% whitespace then there's too much whitespace for me.
Honestly the new appearance has grown on me and I don't see the need for change. I would rather have them focus on some features that can add value to the overall usage.
For example, ability to add a folder to the toolbar and being able to put icons for plugins into it - right now, every plugin's icon just shows up and clutters the toolbar instead of me being able to only show those that I use most often and put the rest in a folder. Another example is ability to export a sub-folder of bookmarks so that if I need to save them to another browser, I don't need to do hacks like exporting all of them only to import them to a scratch folder and picking what I need.
For example, ability to add a folder to the toolbar and being able to put icons for plugins into it - right now, every plugin's icon just shows up and clutters the toolbar instead of me being able to only show those that I use most often and put the rest in a folder. Another example is ability to export a sub-folder of bookmarks so that if I need to save them to another browser, I don't need to do hacks like exporting all of them only to import them to a scratch folder and picking what I need.
> ability to add a folder to the toolbar and being able to put icons for plugins into it - right now, every plugin's icon just shows up and clutters the toolbar instead of me being able to only show those that I use most often
I've put most of those icons in the 'Other tools' double-right arrow submenu (translating the name, may not be the exact phrase). When you rightclick and choose Customize toolbar, the little window that appears on the top right part is that submenu's contents, and you can drag and drop from anywhere else into there to move things around.
I've put most of those icons in the 'Other tools' double-right arrow submenu (translating the name, may not be the exact phrase). When you rightclick and choose Customize toolbar, the little window that appears on the top right part is that submenu's contents, and you can drag and drop from anywhere else into there to move things around.
All I wanted was tabs on the side instead of at the top, for maximum vertical space.
It must be hard to implement seeing as no one bothered, though very old FF versions had an addon that did exactly that.
It must be hard to implement seeing as no one bothered, though very old FF versions had an addon that did exactly that.
The tab redesign is such a nonissue. "Is it a tab or is it a button". UI is very contextual, and in Firefox's case they're very obviously tabs.
If you have more tabs opened than the window fits, there is no separator between them, other than fade away.
The favicon acts as a separator. I often have way too many tabs and the new style doesn't change anything, it's still very clear where a tab starts and where it ends.
What do we gain by separating the button from the content it's connected to?
I'm not a fan of the new Safari style either, but in that case it's at least because they are trying to let the pages bleed into the full window.
I'm not a fan of the new Safari style either, but in that case it's at least because they are trying to let the pages bleed into the full window.
Good point. In Safari's case the redesign "tab as button" approach makes sense for the overall UI approach, whereas Firefox only made it half way.
I beg to differ, to me they lost the tab identity. I'm no purist but I'm really tired of the reinvention of wheels here. Latest firefox ui efforts (beside the download progress icon which was great) were a negative on me from day one. Sorry. Mozilla, save your energy for other things .. I don't think you're losing users due to the shape of tabs.
- some people are doing tab summary in their browser (nlp)
- tab grouping is re-explored in chrome, it was nice in past firefox, it's not a useless idea but could be revisited
- archiving helper (no more 404 maybe ?, partner with wayback machine maybe ? or archive.is)
- history view
- some people are doing tab summary in their browser (nlp)
- tab grouping is re-explored in chrome, it was nice in past firefox, it's not a useless idea but could be revisited
- archiving helper (no more 404 maybe ?, partner with wayback machine maybe ? or archive.is)
- history view
> I don't think you're losing users due to the shape of tabs
They very might lose users because of the design of tabs. Tabs is almost the only UI most users see. If they feel dated, the whole browser feels dated.
The "floating tabs" style is very minimal, fresh and modern, and honestly still unambiguous. I'm pretty sure this new style was a good move.
They very might lose users because of the design of tabs. Tabs is almost the only UI most users see. If they feel dated, the whole browser feels dated.
The "floating tabs" style is very minimal, fresh and modern, and honestly still unambiguous. I'm pretty sure this new style was a good move.
Well that's interesting. I'd be curious what average users see.
Average users are more likely to think "WTF happened? Why does it look different again?"
...and to them, "dated" is more likely to mean a step towards having a relationship with someone.
...and to them, "dated" is more likely to mean a step towards having a relationship with someone.
You know, I try to not be biased but that's what I thought inside. The average Joe has zero understanding of what's going on and this indeed is a strange unexplained change that also brings zero feature. For some older folks it's mind boggling I assure you.
> "Is it a tab or is it a button". UI is very contextual, and in Firefox's case they're very obviously tabs
Agree. I don't believe one second anyone was like "geeee, where are tabs and what are these buttons?". It's very obvious it's just a tab redesign which doesn't change anything at all.
Agree. I don't believe one second anyone was like "geeee, where are tabs and what are these buttons?". It's very obvious it's just a tab redesign which doesn't change anything at all.
I hope Mozilla reverts this absurd change as soon as possible, or at least maintains the previous UI indefinitely.
Aside: I thought one of the big features of this release was Native menus. I was most looking forward to "look up" being an option in FF on Mac now. Do I have some weird setting that is stopping that, or is that still not possible?
I thought it was really interesting that Apple is moving towards making the chrome even smaller on Safari while Firefox is increasing their chrome.
Why use a browser that actively fights against the user by introducing pointless and unwanted changes?
Because I need to use some browser and Firefox is still the least bad?
Which browser is that? Chrome or Firefox?
I actually wanted changes like this and I welcome them. To each his own, I guess.
What alternative do you suggest?
I really hate the trend of increasing padding in various apps / websites. One of the first things I usually do is search for "how do I make more condensed view here".
I am probably in minority here - most people use touchscreens (phones / tablets) but there is still a group of people who have bigger screens and would love to see more data than empty space.