• Light/Dark
  • Ever wanted an RSS feed of all your favorite gaming news sites? Go check out our new Gaming Headlines feed! Read more about it here.
  • We have made minor adjustments to how the search bar works on ResetEra. You can read about the changes here.

Firefox Era: A year later, what are your thoughts on the "Proton" tab redesign?

Thoughts?

  • I still hate it

    Votes: 47 33.8%

  • I love it!

    Votes: 92 66.2%
  • Total voters
    139
DiipuSurotu

DiipuSurotu

Banned
Oct 25, 2017
53,148
A year ago, Firefox rolled out its new "Proton" interface, with a complete redesign of the tab bar.

Before (Firefox <89):
w3FO2JJ.jpg


After (Firefox >=89):
6AknKv0.jpg


The redesign proved controversial, with many people thinking these new, floaty tabs don't even look like tabs anymore. What are your thoughts a year later, Era? Did you get used to this design? Do you use it but still hate it? Do you use an alternative design thanks to addons or other customization methods?
 
captainmal01

captainmal01

Member
Oct 28, 2017
1,340
It's fine, nothing like web outlook changing where quick action buttons are placed for some stupid reason
 
XR.

XR.

Member
Nov 22, 2018
6,582
I'm fine with it and never think about it, but I have to admit I prefer the old layout now that I'm looking at the comparison.
 
Gaardus

Gaardus

Member
Oct 27, 2017
2,592
I'd still prefer the tabs to look like tabs, but it's not stopping me from using Firefox.
 
Fatoy

Fatoy

Member
Mar 13, 2019
7,227
I think Safari 15 did a better job of a similar concept, but I still like Firefox's current design quite a bit.
 
Spoit

Spoit

Member
Oct 28, 2017
3,988
It's the same picture.

(I use a custom css theme that has the tabs on the bottom)
 
the lizard

the lizard

Member
Nov 1, 2017
1,869
tsk tsk everything always has to be love or hate these days huh? where's the "didn't care then, don't care now" option?
 
Zero-ELEC

Zero-ELEC

The Wise Ones
Member
Oct 25, 2017
7,565
México
with some custom css, i'm right back to using them how i want, there was really nothing to complain about
 
sir_crocodile

sir_crocodile

Member
Oct 25, 2017
23,505
old design was better but it's not a big deal

nihilence said:
I don't like the mobile version, can't move tabs around our manage cookies. Not sure if that's exactly proton related.
Click to expand...
Click to shrink...

Not moving tabs is a result of the ground up firefox mobile redesign from years ago.

Tab moving is back in nightly mobile (if you disable tab groups) but hasn't made beta or mainline yet.
 
Carbon

Carbon

Deploying the stealth Cruise Missile
Member
Oct 27, 2017
10,854
It took me a couple of minutes to mod Firefox back to the way I think looks better, then went on to go about my day.
 
bounchfx

bounchfx

Member
Oct 25, 2017
6,662
Muricas
"complete redesign" what. they're just not connected and the fonts are more spaced out. both of those things should just be user options.
 
Slayven

Slayven

Never read a comic in his life
Moderator
Oct 25, 2017
93,112
it's meh, they ever going to fix the memory leaks?
 
Famicom

Famicom

Member
Oct 25, 2017
682
Until this thread I forgot there was even a redesign. I haven't noticed or thought about it and I use Firefox every day.
 
FerrisBueller

FerrisBueller

Member
Jul 15, 2018
2,873
UK
Saladin said:
I did it but nothing changed. Maybe cause I'm on Windows 11?

Thanks for your time
Click to expand...
Click to shrink...

Hmm, maybe. I'm using WIndows 10 so can't say if it works on 11 or not. Did you do this bit of the instructions?

load about:config in the Firefox address bar, then search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to True by double clicking the "Value" column.
Click to expand...
Click to shrink...
 
darkside

darkside

Member
Oct 26, 2017
11,291
I used a UI Fix to switch back to the old style. The new tabs are not tabs and they will never be tabs to me. If theres a point where I'm actually forced to switch to it no matter what then I'm switching browsers
 
FerrisBueller

FerrisBueller

Member
Jul 15, 2018
2,873
UK
Saladin said:
Yeah did everything step by step. Still doesn't look like yours
Click to expand...
Click to shrink...
Ohhh that's the custom Era theme I did, not the Firefox theme, we've been thinking of two different things, lol.

That's really simple. Just install this addon - https://addons.mozilla.org/en-GB/firefox/addon/styl-us/. Once, you've installed it, click the "Write new style for -> resetera.com" option

8vVh9Kg.png


Then in the big code box, paste the following code

CSS: 
body{
    background: url(https://i.imgur.com/Tru2mVX.png) fixed top !important;
    background-size: 1920px !important;
}

.p-footer{
    opacity:0.8 !important;
    filter: grayscale(100%) brightness(50%);
}

.uix_logo{
    filter: hue-rotate(30deg) saturate(1);
}

#footer{
    display:none !important;
}

.p-body-header{
    background-size: 1920px !important;
}

.structItemContainer{
    background: #0000 !important;
}

.structItem--thread{
    background: #0000 !important; 
}

.block-body{
    background: #0000007a !important;
}

.block-container {
    color: #e2e2e2;
    background: #2a2a2c82;
}

.structItem:nth-child(2n) {
    background: #27232882;
}

.p-nav {
    color: #ccbcb2;
    background: #0b090994 !important;
}
.uix_headerContainer{
    background: #0b090900 !important;
}

.block-filterBar {
    padding: 6px;
    font-size: 1.3rem;
    color: #e2e2e2;
    background: #0b0909f0 !important;
}

.input {
    font-size: 1.4rem;
    color: #f2ded8 !important;
    background: #0000008f !important;
    border: 1px solid #4c3c4f8f !important;   
}

.fr-box.fr-basic {
    background: #00000b82 !important;
    border: 1px solid #4c3c4f8f !important;
}

.block-formSectionHeader {
    background: #00000b82 !important;
}

.formRow > dt {
    border-right: 1px solid transparent;
    background: #00000b82 !important;
}

.formSubmitRow-bar {
    background: #00000b82 !important;
}

.block-footer {
    background: #0b090994 !important;
}

.message-cell {
    background: #0b090994 !important;
}

.bbCodeBlock {
    background: #00000096 !important;
    border:0px solid #0000000a;
}

.bbCodeBlock-content {
    background: #48314800 !important;
}
.bbCodeBlock-title {
    background: #12111117 !important;
    color:#ccb2af;
    font-weight:500;
}
.message{
    color: #bebebe !important;
}
.uix_sidebarNav__inner{
    background: #0100007a !important;
    padding: 10px;
    padding-right:20px;
    border-radius:10px;
    margin-left:10px;
}
.uix_sidebarNav .uix_sidebarNavList {
  padding: 10px 0;
    padding-top: 10px;
  margin: 0;
  border-bottom: 1px solid rgba(158,159,162,.12);
  line-height: 40px;
  width: 200px;
}
.uix_sidebarNav .uix_sidebarNavList > li .is-selected .p-navEl__inner {
    color: #e0ae98 !important;
   border-radius:10px;
    padding-right:10px;
}
.p-navEl__inner:hover{
    border-radius:10px;
}
.uix_sidebarNav .uix_sidebarNavList > li .p-navEl-link, .uix_sidebarNav .uix_sidebarNavList > li .p-navEl-linkHolder, .uix_sidebarNav .uix_sidebarNavList > li .blockLink {
  color: #a6958e;
}
.fr-toolbar .fr-btn-grp{
    background: #20162300 !important;
}

.re_message--selfQuote .bbCodeBlock-content {
    background: #5d1c7d54 !important;
}
.re_message--selfQuote .bbCodeBlock-title {
    background: #490a6854 !important;
    color: #ffa200 !important;
}
.thTopic--header:not(.cover) .pageContent, [class*="node-header"]:not(.cover) .pageContent {
    background-image: url(styles/resetera/resetera/images/thread-title-bar.png);
    background-size: 1920px !important;
}
.node-header-9:not(.thTopic--header) {
    background-image: linear-gradient(310.77deg,#29aa61 0%,#4c0e83 100%) !important;
    padding: 15px;
    padding-bottom: 16px;
    font-size: 14px;
}
.node-header-10:not(.thTopic--header) {
    background-image: linear-gradient(310.77deg,#aa2929 0%,#b0920f 100%) !important;
    padding: 15px;
    padding-bottom: 16px;
    font-size: 14px;
}
.node-header-7:not(.thTopic--header) {
    background-image: linear-gradient(310.77deg,#aa2929 0%,#098ea6 100%) !important;
    padding: 15px;
    padding-bottom: 16px;
    font-size: 14px;
}
.node-header-8:not(.thTopic--header) {
    background-image: linear-gradient(310.77deg,#aa9d29 0%,#830e77 100%) !important;
    padding: 15px;
    padding-bottom: 16px;
    font-size: 14px;
}
.node-body {
    background: url(https://i.imgur.com/2RfKCUA.png) repeat !important;
}

.node--id7 > .node-body {
    background-image: linear-gradient(310.77deg,#aa2929 0%,#098ea6 100%) !important;
    background-color: #29aa9f !important;
    background-color: var(--node-backgroundColor,#29aa9f) !important;
}
.node--id8 > .node-body {
    background-image: linear-gradient(310.77deg,#aa9d29 0%,#830e77 100%) !important;
    background-color: #29aa9f !important;
    background-color: var(--node-backgroundColor,#29aa9f) !important;
}
.node--id9 > .node-body {
    background-image: linear-gradient(310.77deg,#29aa61 0%,#4c0e83 100%) !important;
    background-color: #29aa9f !important;
    background-color: var(--node-backgroundColor,#29aa9f) !important;
}
.node--id10 > .node-body {
    background-image: linear-gradient(310.77deg,#aa2929 0%,#b0920f 100%) !important;
    background-color: #29aa9f !important;
    background-color: var(--node-backgroundColor,#29aa9f) !important;
}
.re_footer--secondaryBg{
    display:none;
}
.re_footer--tertiaryBg{
    display:none;
}
.pageNav-jump {
    display: inline-block;
    background: #00000078;
    color: #6e7072;
    border-radius: 5px;
}
.pageNav-page{
    background: #00000078;
    color: #6e7072;
    border-radius: 5px;
}
.blockStatus {
    color: #e2e2e2;
    background: #5c106466;
    border: 1px solid #000000b5;
}
.bbCodeBlock-shrinkLink, .bbCodeBlock-expandLink {
    display: none;
    position: absolute;
    top: 99px;
    left: 0;
    right: 0;
    height: 75px;
    cursor: pointer;
    z-index: 100;
    background: 0 0;
    background: linear-gradient(to bottom,rgba(47,47,49,0) 20%,#0b0b0b 70%);
    opacity:1;
    color: #fff !important;
}
.bbCodeBlock-shrinkLink a, .bbCodeBlock-expandLink a {
    color: #daa44b !important;
    font-style:italic;
}
.pageNav-page {
    background: #00000078;
    color: #ab8169 !important;
    border-radius: 5px;
}
.pageNav-jump {
    display: inline-block;
    background: #01000078;
    color: #ab8169;
    border-radius: 5px;
}

.pageNav-page.pageNav-page--current {
  box-shadow: 0 -1px #bf7b50c2 inset;
  cursor: pointer;
}

a {
  color: #e8d2c0;
  text-decoration: none;
}

.label.label--hidden {
  color: #eb5536b5;
}

.pairs > dt {
  color: #8f7f77db;
}

.contentRow-minor {
  font-size: 1.3rem;
  color: #ffffff8c;
}

.structItem-cell.structItem-cell--latest a:not(:hover) {
  color: #d5beb2;
}
.button.button--link, button.button a.button.button--link {
    color:#d1b1a0;
  background: #00000080;
}
.menu-content {
  color: #eedac7;
  background: #000000bf;
  border: 0 solid rgba(158,159,162,.12);
}

.menu-linkRow.is-selected, .menu-linkRow:hover, .menu-linkRow:focus {
  color: #d29571;
  text-decoration: none;
  background: #000;
}

.menu {
  color: #eedac7;
  background: #2a2a2c00;
}

.menu-footer, .menu-header {
  color: #9e9fa2;
  background: #0000006e;
}

.fr-box.fr-basic .fr-toolbar.fr-top {
  background: #0000007d !important;
    border: 0 !important;
}

.fr-box.fr-basic .fr-element {
  color: #decdc9 !important;
}
.fr-toolbar .fr-btn-grp {
  border-style: dashed;
  border-width: 0;
    border-bottom-width: 0px;
    border-left-width: 0px;
  border-color: #ffffff26;
  margin: 0;
}

.p-breadcrumbs > li a {
  color: #ffede9;
}
.p-breadcrumbs > li:last-child a {
  font-weight: 400;
  color: #ffede9;
}

.p-breadcrumbs {
  color: #ffffff91;
}

.structItem-minor {
  font-size: 1.3rem;
  color: #a4816d;
}

.structItem-pageJump a {
  color: #ffffffe6;
  background: #00000082;
  border: 1px solid rgba(158,159,162,.12);
  display: inline-block;
  max-width: 100%;
  padding: 0 6px 1px;
  margin: 0 0 2px;
  border-radius: 3px;
  text-decoration: none;
  border-radius: 4px;
  padding: 0 3px;
  opacity: .5;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.structItem-pageJump a:hover {
  text-decoration: none;
  background: #908277;
}
.is-unread .structItem-title {
  color: #e6cfc1;
}
    
.structItem-title {
  color: #ffffff9c;
}
.structItem-title a:hover {
  color: #c79e8e;
}
.structItem-cell.structItem-cell--latest a:not(:hover) {
  color: #c1a494;
}
.structItem-cell.structItem-cell--latest a:hover {
  color: #c1a494;
}
body .uix_sidebarNav .uix_sidebarNavList > li .p-navEl__inner:hover a, body .uix_sidebarNav .uix_sidebarNavList > li .blockLink:hover a, .uix_sidebarNav .uix_sidebarNavList .menu-linkRow:hover a {
  color: #fb9e1f;
}

Then click save.


yogurt said:
I stopped thinking about it after a few days.


How do you get ERA to look like that? That's fucking cool.
Click to expand...
Click to shrink...

Just posted above :)
 
darkside

darkside

Member
Oct 26, 2017
11,291
xxracerxx said:
Serious?
Click to expand...
Click to shrink...

Yes I absolutely hate it. I'm the kind of person who keeps like 10+ tabs open all the time and I found the new style to be not functional -at all-. I tried fighting against my browser before I gave up, was going to switch browser but found out someone made a UI fix that switched it back to the old style.
 
xxracerxx

xxracerxx

Avenger
Oct 25, 2017
31,222
darkside said:
Yes I absolutely hate it. I'm the kind of person who keeps like 10+ tabs open all the time and I found the new style to be not functional -at all-. I tried fighting against my browser before I gave up, was going to switch browser but found out someone made a UI fix that switched it back to the old style.
Click to expand...
Click to shrink...
What am I missing here in the image below? How is that not the same as 10+ tabs open the old way?

screenshot2022-06-15axoj2p.png
 
Zomba13

Zomba13

#1 Waluigi Fan! Current Status: Crying
Member
Oct 25, 2017
8,936
I dunno. I changed them back to how I liked them so I've not had to deal with anything new. My tabs are on the bottom of the toolbar stuff and look good and work so I'm happy. Until they inevitably break them again.
 
darkside

darkside

Member
Oct 26, 2017
11,291
xxracerxx said:
What am I missing here in the image below? How is that not the same as 10+ tabs open the old way?

screenshot2022-06-15axoj2p.png
Click to expand...
Click to shrink...

Theres literally no indentations at all to all your other pages? Like I'm not sure how you're not seeing it. The new style just highlights the one tab and doesn't put any separation between the other pages at all - its functionally not actually tabs.
 
xxracerxx

xxracerxx

Avenger
Oct 25, 2017
31,222
darkside said:
Theres literally no indentations at all to all your other pages? Like I'm not sure how you're not seeing it. The new style just highlights the one tab and doesn't put any separation between the other pages at all - its functionally not actually tabs.
Click to expand...
Click to shrink...
The separation comes from the Favicons and page title, but I get you about little line between tabs.
 
You must log in or register to reply here.