I've disabled all Proton in config but I still see Proton :(

User Help for Mozilla Firefox
Post Reply
Barabba
Posts: 98
Joined: March 17th, 2015, 8:08 am

I've disabled all Proton in config but I still see Proton :(

Post by Barabba »

Hi, I don't like the new interface, when FF introduced it I've disabled Proton and it went back to the previous one. After the new update I see Proton and all settings are disable. Please help me free of it! Thank you
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: I've disabled all Proton in config but I still see Proto

Post by DSperber »

Barabba wrote:Hi, I don't like the new interface, when FF introduced it I've disabled Proton and it went back to the previous one. After the new update I see Proton and all settings are disable. Please help me free of it! Thank you
First, there's no longer any way to disable the new look using the ABOUT:CONFIG method (i.e. search for proton) and negating the Proton items. The ON/OFF ability to disable Proton no longer works "by design", because all the old non-Proton source code has been removed. So there's nothing to toggle back to.

Next: I am not a CSS expert. But I know how to copy other people's code, and make obvious small changes.

Finally, if you do want to customize the look of Firefox you MUST now use CSS style method for producing the look that you want. Here is a very good beginner's introduction authored by @jscher2000 (who's genuinely a CSS expert) on "how to do it", the required userChrome.css installed in the required \chrome folder inside \profiles, etc.

Here's another excellent supplemental tutorial about how to get proper spacing, from the same author @jscher2000. It even has an "active" section for automatically producing the correct CSS code element for you, right there, based on your parameter settings.

Here's another introductory thread which is good to start from.


But to give you a real beginner's quick headstart without first having to become an expert on CSS, here's a simple straightforward recipe you can follow:

(1) you must create a "chrome" folder inside your existing Mozilla Firefox Profile folder. Something like C:\Users\<userid>\AppData\Roaming\Mozilla\Firefox\Profiles\[whatever your active profile name is]\chrome (lowercase is required for the new chrome sub-folder)

(2) Inside this \chrome folder you create a file named "userChrome.css" which must have appropriate CSS style elements inside of it. To get you started quickly, you can populate your own userChrome.css file with the following simple code set (which is my own and reflects my like for the "old Firefox look") which very much duplicates the "old Firefox 88 and older" look. You can then modify these few items to meet your own tastes, such as perhaps playing with colors on backgrounds and foreground text, or vertical spacing between dropdown menu items (I like mine "tight", so 0px is the tightest, but you can try 1px or 2px or higher to meet your desires), tab appearance, etc.

So to start, just insert the following code into your intial userChrome.css and go from there:

Code: Select all

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* USE OLD STYLE YELLOW BOOKMARK FOLDERS IN BOOKMARK DROPDOWN MENU. */
/* ALSO FORCES USE OLD STYLE BOOKMARK FOLDERS WHEN VIEWING "Show All Bookmarks" */
/* Need the image file "folder-item.png" to be inside the chrome folder */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  list-style-image: url("folder-item.png") !important;
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}


/* v92.0 vertical menu item spacing */
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 0px !important;
  min-height: unset !important; /* v92.0 - for padding below 4px */
}

/* Bookmark and context menu spacing */
menupopup > menuitem, menupopup > menu {padding-block: 0px !important;
}

/* Options menu spacing */
:root {--arrowpanel-menuitem-padding: 0px 0px !important;
}


/* v92.0 Bookmarks Toolbar folder drop-downs background color light-gray*/
#PlacesToolbar {
    --arrowpanel-color: black !important;
    --arrowpanel-background: #eaeaea !important;
}

menupopup {
    --panel-color: black !important;
    --panel-background: #eaeaea !important;
}


/* Active menu item background pale-blue, text glowing-blue*/
menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {
  background-color: #e8eefd !important;
  color: #3d3dff !important;
}



/* Disable floating rounded tabs, revert back to square tabs stuck to the Address Bar*/
.tab-background{border-radius: 0px 0px !important; margin-bottom: 0px !important;
}

/* Inactive tabs: visible Separator line style */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
    border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}


(3) You must ENABLE the Firefox support for these CSS style elements, if you haven't already done it:

(a) Click in Firefox to get a new tab.
(b) At the new tab enter the following 'address' about:config then press the enter key.
(c) A warning page will be shown. Just click to acknowledge the risk and continue.
(d) In the Advanced Preferences page search-box enter the following search term: toolkit.legacyUserProfileCustomizations.stylesheets (you can copy and paste it from here). The search will occur automatically and the preference will be shown below the search box.
(e) If the preference is set to false click on the preference to toggle it to true. True means Firefox supports CSS files, False that it ignores them.
(f) Close the tab and restart Firefox.

That userChrome.css file you just created in \chrome folder will now produce the Firefox appearance you're looking for.

(4) One note: the prototype code I provided above also has a CSS element in it that restores the old "manila color" to Bookmarks folders, as they used to appear in old Firefox. The new look is plain un-colored gray which I find unattractive. I want the old "manila" color, just like Windows Explorer folders.

The CSS element in that code to restore the original folder color requires that you also place an item named "user-item.png" in that same \chrome folder along with your userChrome.css file. I am attaching that PNG image file to this post. Download it, and place it in your \chrome folder. Be sure to rename it after you download it from the forum's attachment name, to the required "user-item.png" when placing it into the \chrome folder.

Image

(5) Also, one final tweak you might want to install. When I open a new tab I have two rows of "Top Sites" showing as my only items, along with Web Search. I've suppressed everything else through the "gear" settings available on that page. That's my own preference, and yours may differ.

But as far as the appearance goes of the Top Sites, I prefer the look of the actual "chiclets" (i.e. thumbnails) which have the selected graphic output for that site to actually FILL THE CHICLET WITH GRAPHICS. I don't want half of the chiclet to be white space, as it currently appears by default. This is the so-called "new tab experience "appearance and I find it unattractive and wasteful.

To disable all of that white space, and restore the "top sites" chiclets to be 100% filled with graphics (making them obviously appear larger and more obvious, but it's really just that there's now no more white space in each chiclet), the following simple tweak using ABOUT:CONFIG can be used:

(a) enter about:config in address bar URL, and acknowledge the warning if it appears in order to proceed
(b) search for: newnew
(c) the highlighted search result key of browser.newtabpage.activity-stream.newNewtabExperience.enabled is what needs to be toggled from TRUE to FALSE. True is the "new look" with 1/2 white space, and False is the"old look" that fills the chiclets with graphics.
(d) Close the tab and restart Firefox.


Good luck. Please post your results, and any questions or problems.
Noig
Posts: 87
Joined: March 2nd, 2005, 2:47 am

Re: I've disabled all Proton in config but I still see Proto

Post by Noig »

@DSperber
Thanks for you detailed post. It is slightly frustrating how the interface is frequently changed on FF. When using a browser for work amongst other programs switching quickly back to the browser and then continuing other work can be irritating when the UI changes frequently.
It also means I need to backup the user chrome file regularly to be "safe".
Everyone is becoming an expert within his own capabilities
Barabba
Posts: 98
Joined: March 17th, 2015, 8:08 am

Re: I've disabled all Proton in config but I still see Proto

Post by Barabba »

thank you a lot for your kind post, really.
It's a bit complicated and long to implement, to be honest I don't care about all these new restyles, I can deal with them, but it irritates me a lot that on tab there is that fading effect which truncates the name inside, make me difficult to understand the tab. Was good before, I don't understand this bad idea.
So I tried the last suggestion about browser.newtabpage.activity-stream.newNewtabExperience.enabled, I've set it to false and I restarted FF, I don't see big changes, maybe the tabs appear a bit larger than before (so, I can read better).
How can I get off that fading?
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: I've disabled all Proton in config but I still see Proto

Post by jscher2000 »

Barabba wrote:I tried the last suggestion about browser.newtabpage.activity-stream.newNewtabExperience.enabled, I've set it to false and I restarted FF, I don't see big changes, maybe the tabs appear a bit larger than before (so, I can read better).
How can I get off that fading?
That preference relates to the "Shortcuts" section of the built-in Firefox Home / new tab page. I think you are referring to the tabs up on the tab bar?

I don't recall how the text fading is achieved. The alternative would be a hard cut-off at the edge of the tab. Probably possible with a rule in userChrome.css.

Would it help to reduce the amount that tabs shrink in width as you open more of them? At least that is easy. You can increase the minimum from 76 pixels to, say, 100 pixels, this way:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box on the page, type or paste browser.tabs.tabMinWidth and pause while the list is filtered

(3) Double-click the preference to display to display an editing field, and change the value to 100 then press Enter or click the blue check mark button to save the change. It may take a few moments for the change to be reflected on the tab bar.
Barabba
Posts: 98
Joined: March 17th, 2015, 8:08 am

Re: I've disabled all Proton in config but I still see Proto

Post by Barabba »

jscher2000 wrote:
Barabba wrote:I tried the last suggestion about browser.newtabpage.activity-stream.newNewtabExperience.enabled, I've set it to false and I restarted FF, I don't see big changes, maybe the tabs appear a bit larger than before (so, I can read better).
How can I get off that fading?
That preference relates to the "Shortcuts" section of the built-in Firefox Home / new tab page. I think you are referring to the tabs up on the tab bar?

I don't recall how the text fading is achieved. The alternative would be a hard cut-off at the edge of the tab. Probably possible with a rule in userChrome.css.

Would it help to reduce the amount that tabs shrink in width as you open more of them? At least that is easy. You can increase the minimum from 76 pixels to, say, 100 pixels, this way:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

(2) In the search box on the page, type or paste browser.tabs.tabMinWidth and pause while the list is filtered

(3) Double-click the preference to display to display an editing field, and change the value to 100 then press Enter or click the blue check mark button to save the change. It may take a few moments for the change to be reflected on the tab bar.
To be sure I express myslef correctly I send you the image of the problem I have, the text is damply fade out and I can't understand what this tab is about, before I had more letters, it was possible, now I'm getting crazy to understand where my pages are..
Image
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: I've disabled all Proton in config but I still see Proto

Post by jscher2000 »

When I poke around with the Browser Toolbox, I see this rule is responsible for the fading:

Code: Select all

.tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), 
.tab-label-container[textoverflow]:not([labeldirection], 
[pinned]):-moz-locale-dir(ltr) {
  direction: ltr;
  mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
}
The critical part is the mask-image. I can override it by adding this custom style rule:

Code: Select all

/* Don't fade text at right end of tab */
.tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]), 
.tab-label-container[textoverflow]:not([labeldirection], 
[pinned]):-moz-locale-dir(ltr) {
  mask-image: none !important;
}
However, this maybe shows 2-3 more letters, so you might still want to widen the tabs by increasing the minimum width as suggested earlier.
Post Reply