How do you find out that you need to use those specific class names?
I tried looking this up, but came back rather empty-handed. Loads of examples abound, but it’s never very clear to me what classes apply to what exactly and how people figure out what the class names are in the first place.
I noticed the change for all of about 18 seconds, then went about my day.
I’m not a fan of change because UX/UI people need to make it seem like their job is relevant.
And yet you are prepared to spend hours customizing css, and then blogging about it? Clearly “I see no reason for this change” is not the whole story, if it were you would shrug and ignore it. So what is it? Why are so many people here flipping out like firefox just put its hand down their pants? I am genuinely confused about this.
I found myself rather appreciative of the change by mozilla’s designers, the spacing feels more approachable for direct manipulation environments (tablets). The author lost me with lacking space for considering other perspectives.
Most of us are not on tablets, we are on desktop computers and laptops - the interface should not be “improved” by making it harder to use Firefox on our platforms of choice
I am on a desktop too. Maybe you could be the first to answer my original question. You say the change makes it harder to use a desktop machine. Care to elaborate?
The statement seemed dismissive of the likely science behind the UX/UI changes. Folks generally don’t change software like someone repainting their bedroom on a whim.
I genuinely like the new UX/UI, and I’ve just recently come back to Firefox from a decade as a Chrome user.
I miss the orange line I put on the active tab. It was probably overkill but the current ‘slightly lighter’ bg for active tab is far too subtle, especially in sunlight. What I could previously determine at a glance now requires a royal hunt. I’ll have to get cracking on my rules again.
/* Let's do this over again, damn you firefox */
/* 2020-06-14 Tabs on bottom! */
#nav-bar {-moz-box-ordinal-group: 1 !important;} /*url bar*/
#PersonalToolbar {-moz-box-ordinal-group: 2 !important;} /*bookmarks?*/
#titlebar {-moz-box-ordinal-group: 3 !important;} /*aka tabbar*/
:root
{
--toolbarbutton-inner-padding: 0px 3px !important;
--toolbarbutton-outer-padding: 0px !important;
--toolbarbutton-height: 20px !important;
--tab-min-height: 20px !important;
--tab-min-width: 30px !important;
--urlbar-height: 20px !important;
--urlbar-toolbar-height: 20px !important;
--urlbar-container-height: 20px !important;
}
#titlebar
{
height: 20px;
}
#nav-bar
{
height: 25px;
margin-top: -5px; /*Hack, but it works*/
}
.tab-line
{
background-color: orange !important;
}
/*** Megabar Styler General - version 2020-04-19 ***/
/*** General Preferences ***/
:root {
/* Number of pixels of enlargement when URL bar is focused */
--mbarstyler-popout-pixels: 0px; /* [0px - 7px] */
/* Top Bar Display or Not */
--mbarstyler-top-bar-display: none; /* [block,none] */
/* Rows to show without scrolling */
--mbarstyler-max-rows-without-scrolling: 12;
/* Bottom border for each result row */
--mbarstyler-bottom-border-width: 0px; /* [0px or 1px] */
/* Match display style */
--mbarstyler-match-weight: 700; /* [400,700] */
--mbarstyler-match-background-opacity: 0.0; /* [0.0,0.05,0.1] */
}
/*** URL bar enlargement or lack thereof ***/
/* Compute new position, width, and padding */
#urlbar[breakout][breakout-extend] {
top: calc(5px - var(--mbarstyler-popout-pixels)) !important;
left: calc(0px - var(--mbarstyler-popout-pixels)) !important;
width: calc(100% + (2 * var(--mbarstyler-popout-pixels))) !important;
padding: var(--mbarstyler-popout-pixels) !important;
}
[uidensity="compact"] #urlbar[breakout][breakout-extend] {
top: calc(3px - var(--mbarstyler-popout-pixels)) !important;
}
[uidensity="touch"] #urlbar[breakout][breakout-extend] {
top: calc(4px - var(--mbarstyler-popout-pixels)) !important;
}
/* Prevent shift of URL bar contents */
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding: 0 !important;
}
/* Do not animate */
#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;;
}
/* Remove shadows */
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}
/*** Top "Blue Bar" Display ***/
.urlbarView-row:first-of-type {
display: var(--mbarstyler-top-bar-display) !important;
}
/*** Font Sizes and Scrolling ***/
/* Set max-height for items visible without scrolling */
#urlbarView-results, #urlbar-results {
height: unset !important;
overflow-y: auto !important;
}
/* Clean up extra spacing at the top and bottom */
#urlbar-results {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Match Styling Like Fx43-47 */
[lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-title strong,
[lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-url strong {
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, calc(var(--mbarstyler-match-background-opacity) * 2));
background-color: rgba(0, 0, 0, var(--mbarstyler-match-background-opacity));
border-radius: 2px;
}
[lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-title strong,
[lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-url strong {
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, calc(var(--mbarstyler-match-background-opacity) * 2));
background-color: rgba(255, 255, 255, var(--mbarstyler-match-background-opacity));
border-radius: 2px;
}
/*** End of: Megabar Styler General ***/
(I’m having troubles finding the source of “Megabar Style general” now, my search-fu is not working. I noticed that many of these Firefox CSS repos seem to come and go, maybe this one has been deleted?)
(EDIT: you will probably also have to set firefox’s UI to ‘compact’ for my style above to work)
Ooh. Are the vertical tabs done entirely via the CSS?
No, most of the userChrome.css effort is spent on getting rid of Mozilla’s tab “ideas”, not on the added vertical tabs, for which I’m using Sidebery, the best vertical tab extension at the moment.
I’m gradually getting used to the proton tabs, and I like bits of it, like the fact that it will tell you which tabs are playing media etc. But I cannot fathom why they changed the borders of the tabs the way they did – indeed, it destroys the tabs visual metaphor itself, and the way the active tab is rendered looks like a button, which of course does nothing when you click on it because it’s already active.
Before Proton there was an icon in every playing tab. That icon needed no additional vertical space and was very clear, so for me even this point is moot. And I wholeheartedly agree with your point about the border design.
I’ve finally switched to Vivaldi after this Firefox update. I had to swallow the fact that the engine is based on Chrome, but as I get older I more often choose practicality over ideology.
My “pragmatic choice” was trying Proton for a couple of weeks and getting used to it. But I’ll admit I’m heavily biased and have strong feelings about Browser engine diversity :)
ditto. well, for me it was more about not caring enough to futz around with CSS files. then again, I use a separate addon for my tabs, so this change doesn’t really affect me.
How is the performance for you? I have the same “I’m getting too old for this shit” feeling as you and tried Vivaldi last week. It gets many things right, but on my system it’s just … slow. There’s a noticeable latency in pretty much everything, from typing things in the address bar to closing tabs to, well, almost everything. I’m not that sensitive to these things, but found it very annoying and gave up after a few days. This is on Linux btw, and was also the experience when I tried Vivaldi last year, and the year before that.
Brave unfortunately doesn’t allow opening tabs at the end (always next to current), which I find such annoying behaviour and was kind of a show-stopper. I also don’t really care much for all the cryptostuff they’re pushing just a little too much in-your-face. Oh, and scrolling on Linux is kind-of broken in Brave as well.
Yeah, I’m not measuring anything; I wouldn’t care if it’s a bit slower in some benchmark or even uses twice the RAM; as long as it feels good it’s good for me.
Do you use X or Wayland btw? Maybe it has something to do with dwm not implementing/using some stuff that GNOME or whatnot does? 🤔
Is there a particular reason that you’re excluding hardware differences? My first thought when I read GP comment was “their machine is probably fast enough that they don’t notice anything”.
It could be the hardware, but I can’t really fix that short of buying a new laptop, but I can try adjusting the software to see if it makes a difference. Plus, I just have an average laptop; nothing super-fancy, nothing especially slow (Ryzen 5 2500U) which is probably fairly representative of “the average user”.
Oh, I wasn’t using “hardware” as a way to discard your claims - quite the opposite. I think that if hardware differences cause an experience difference, then that suggests that Firefox is not optimized for latency/CPU, which (as you may recall from a previous comment) I consider to be the wrong choice.
You shouldn’t need even average hardware in order to get an acceptable user experience.
Oh, I wasn’t using “hardware” as a way to discard your claims - quite the opposite.
No worries, that’s not how I took it at all. I just mentioned the “average laptop” because I think it’s probably not a hardware issue. Although having an dedicated nVidia card instead of the AMD integrated one may actually make a big difference, so idk 🤷
I had performance problems with Firefox before that didn’t exist under GNOME or KDE; this turned out to be caused by xf86-video-intel driver (no idea why it didn’t show under GNOME or KDE), so that’s why I asked for software setup. I’ll have to try it at some point to see if it makes a difference.
I’m on openSUSE + Nvidia + X11 + KDE, and everything I do simply works. I sometimes open a simple online game which runs faster than under Firefox. Google Maps/Street View is faster. Scrolling feels faster, no latency in tab switching, I even configured the bundled e-mail client, and that didn’t slow things down (although I’ll stay with Firefox, because the Vivaldi one doesn’t have many features yet).
MS Teams is slower than under a dedicated Electron app (but fortunately I use it only for 8hrs a day), I had some font scaling issues on the beginning (resolved with --force-device-scale-factor=1), and font kerning in context menus is a little bit off (but other Electron apps + Chrome + VS Code suffer from the same issue).
I was an Opera user years ago, so I’m happy with the change.
I am also a Vivaldi user (and possibly evangelist?) and it’s the best of the browsers IMO. It gets everything right that I need and has really great understanding of being user-centric. Highly recommend it, even if you’re not overly fond of chrome.
Or you could switch to firefox ESR. If you do this, you’ll have to start FF the first time with --allow-downgrade, and maybe futz around with ~/.mozilla/firefox-esr/profiles.ini. Consider enabling the telemetry so that they can tell.
ESR versions of Firefox are the Enterprise/Extended Support Release versions. They get (some) security updates but no new features. A maintained version of an older Firefox, that updates only yearly or so. Eventually it will also switch to a Proton version of Firefox. Just later.
Switching to ESR is essentially downgrading which comes with the profile data hazards that you typically get when downgrading a software but not it’s configuration. Make a backup before you try it.
It had a release 2 months ago - it lags significantly behind Firefox development, but is still quite useable if you don’t need modern features. Getting add-ons to work can be a faff though.
How do you know which styles to use?
Like, say:
How do you find out that you need to use those specific class names?
I tried looking this up, but came back rather empty-handed. Loads of examples abound, but it’s never very clear to me what classes apply to what exactly and how people figure out what the class names are in the first place.
You can inspect the UI via the Browser Toolbox (You can enable it in the Developer Tools settings and then press Ctrl+Alt+Shift+I)
Aha, brilliant! Thank you
Thanks! I’ve cited you in the post, as my changes only involved editing existing styles from other people.
I noticed the change for all of about 18 seconds, then went about my day.
And yet you are prepared to spend hours customizing css, and then blogging about it? Clearly “I see no reason for this change” is not the whole story, if it were you would shrug and ignore it. So what is it? Why are so many people here flipping out like firefox just put its hand down their pants? I am genuinely confused about this.
I found myself rather appreciative of the change by mozilla’s designers, the spacing feels more approachable for direct manipulation environments (tablets). The author lost me with lacking space for considering other perspectives.
Most of us are not on tablets, we are on desktop computers and laptops - the interface should not be “improved” by making it harder to use Firefox on our platforms of choice
I am on a desktop too. Maybe you could be the first to answer my original question. You say the change makes it harder to use a desktop machine. Care to elaborate?
The statement seemed dismissive of the likely science behind the UX/UI changes. Folks generally don’t change software like someone repainting their bedroom on a whim.
I genuinely like the new UX/UI, and I’ve just recently come back to Firefox from a decade as a Chrome user.
Surprisingly my custom extra-compact userChrome.css is still somehow usable.
I miss the orange line I put on the active tab. It was probably overkill but the current ‘slightly lighter’ bg for active tab is far too subtle, especially in sunlight. What I could previously determine at a glance now requires a royal hunt. I’ll have to get cracking on my rules again.
(I’m having troubles finding the source of “Megabar Style general” now, my search-fu is not working. I noticed that many of these Firefox CSS repos seem to come and go, maybe this one has been deleted?)
(EDIT: you will probably also have to set firefox’s UI to ‘compact’ for my style above to work)
My own UI fixes escaped this change unscathed, which is a rather pleasant surprise for once. :-)
Ooh. Are the vertical tabs done entirely via the CSS?
It’s probably a bad sign, but I initially though the garbage can icon was an Internet Archive favicon :P
No, most of the userChrome.css effort is spent on getting rid of Mozilla’s tab “ideas”, not on the added vertical tabs, for which I’m using Sidebery, the best vertical tab extension at the moment.
Haha, no, it’s a chef’s hat. ;-)
I’m gradually getting used to the proton tabs, and I like bits of it, like the fact that it will tell you which tabs are playing media etc. But I cannot fathom why they changed the borders of the tabs the way they did – indeed, it destroys the tabs visual metaphor itself, and the way the active tab is rendered looks like a button, which of course does nothing when you click on it because it’s already active.
Before Proton there was an icon in every playing tab. That icon needed no additional vertical space and was very clear, so for me even this point is moot. And I wholeheartedly agree with your point about the border design.
I’ve finally switched to Vivaldi after this Firefox update. I had to swallow the fact that the engine is based on Chrome, but as I get older I more often choose practicality over ideology.
My “pragmatic choice” was trying Proton for a couple of weeks and getting used to it. But I’ll admit I’m heavily biased and have strong feelings about Browser engine diversity :)
ditto. well, for me it was more about not caring enough to futz around with CSS files. then again, I use a separate addon for my tabs, so this change doesn’t really affect me.
How is the performance for you? I have the same “I’m getting too old for this shit” feeling as you and tried Vivaldi last week. It gets many things right, but on my system it’s just … slow. There’s a noticeable latency in pretty much everything, from typing things in the address bar to closing tabs to, well, almost everything. I’m not that sensitive to these things, but found it very annoying and gave up after a few days. This is on Linux btw, and was also the experience when I tried Vivaldi last year, and the year before that.
Brave unfortunately doesn’t allow opening tabs at the end (always next to current), which I find such annoying behaviour and was kind of a show-stopper. I also don’t really care much for all the cryptostuff they’re pushing just a little too much in-your-face. Oh, and scrolling on Linux is kind-of broken in Brave as well.
For me, on NixOS, Vivaldi feels as snappy as other browsers (eyeballing, not measuring).
Yeah, I’m not measuring anything; I wouldn’t care if it’s a bit slower in some benchmark or even uses twice the RAM; as long as it feels good it’s good for me.
Do you use X or Wayland btw? Maybe it has something to do with dwm not implementing/using some stuff that GNOME or whatnot does? 🤔
X11 + Plasma, nothing fancy here.
Is there a particular reason that you’re excluding hardware differences? My first thought when I read GP comment was “their machine is probably fast enough that they don’t notice anything”.
It could be the hardware, but I can’t really fix that short of buying a new laptop, but I can try adjusting the software to see if it makes a difference. Plus, I just have an average laptop; nothing super-fancy, nothing especially slow (Ryzen 5 2500U) which is probably fairly representative of “the average user”.
Oh, I wasn’t using “hardware” as a way to discard your claims - quite the opposite. I think that if hardware differences cause an experience difference, then that suggests that Firefox is not optimized for latency/CPU, which (as you may recall from a previous comment) I consider to be the wrong choice.
You shouldn’t need even average hardware in order to get an acceptable user experience.
No worries, that’s not how I took it at all. I just mentioned the “average laptop” because I think it’s probably not a hardware issue. Although having an dedicated nVidia card instead of the AMD integrated one may actually make a big difference, so idk 🤷
I had performance problems with Firefox before that didn’t exist under GNOME or KDE; this turned out to be caused by xf86-video-intel driver (no idea why it didn’t show under GNOME or KDE), so that’s why I asked for software setup. I’ll have to try it at some point to see if it makes a difference.
I’m on openSUSE + Nvidia + X11 + KDE, and everything I do simply works. I sometimes open a simple online game which runs faster than under Firefox. Google Maps/Street View is faster. Scrolling feels faster, no latency in tab switching, I even configured the bundled e-mail client, and that didn’t slow things down (although I’ll stay with Firefox, because the Vivaldi one doesn’t have many features yet).
MS Teams is slower than under a dedicated Electron app (but fortunately I use it only for 8hrs a day), I had some font scaling issues on the beginning (resolved with
--force-device-scale-factor=1), and font kerning in context menus is a little bit off (but other Electron apps + Chrome + VS Code suffer from the same issue).I was an Opera user years ago, so I’m happy with the change.
I meant “stay with Thunderbird” ;)
I am also a Vivaldi user (and possibly evangelist?) and it’s the best of the browsers IMO. It gets everything right that I need and has really great understanding of being user-centric. Highly recommend it, even if you’re not overly fond of chrome.
I’m so tired of taking new measures against Firefox UI changes every few months. Is it really too much to ask to turn off animations? Apparently.
Or you could switch to firefox ESR. If you do this, you’ll have to start FF the first time with
--allow-downgrade, and maybe futz around with~/.mozilla/firefox-esr/profiles.ini. Consider enabling the telemetry so that they can tell.What is it?
ESR versions of Firefox are the Enterprise/Extended Support Release versions. They get (some) security updates but no new features. A maintained version of an older Firefox, that updates only yearly or so. Eventually it will also switch to a Proton version of Firefox. Just later.
Switching to ESR is essentially downgrading which comes with the profile data hazards that you typically get when downgrading a software but not it’s configuration. Make a backup before you try it.
Would it also be an idea to use Seamonkey? Or does that lack behind severely?
It had a release 2 months ago - it lags significantly behind Firefox development, but is still quite useable if you don’t need modern features. Getting add-ons to work can be a faff though.
This is the first time I hear of SeaMonkey in years. Afaiu it’s an independent community project. I honestly don’t know more.