MozillaZine

Separators in Firefox Quantum Fx57+ without CSS/WEs/add-ons

User Help for Mozilla Firefox
Aris

User avatar
 
Posts: 3216
Joined: February 27th, 2011, 10:14 am

Post Posted February 1st, 2018, 4:15 am

There is an undocumented way to get separators even without any add-ons/WEs or custom CSS code.

The browser preference browser.uiCustomization.state saves and loads the toolbar configuration and keeps items and positions of uninstalled add-ons or non-available/deprecated toolbar content. This can be used to trick Firefox into displaying technically still present separators. They are only hidden from customizing modes palette.

  1. Open about:config and search for browser.uiCustomization.state.
  2. Copy and paste the string content into a text file.
  3. Inside the (probably long) text string you will find an area, that looks like this
    Code: Select all
    ...,"nav-bar":["back-button","forward-button","stop-reload-button","home-button","urlbar-container",....
  4. "Create" a separator by adding customizableui-special-separator[random_4_digits] inside toolbars configuration area, so it looks like this
    Code: Select all
    ...,"nav-bar":["back-button","forward-button","stop-reload-button","customizableui-special-separator1957","home-button","urlbar-container",....
  5. Copy the new string back into browser.uiCustomization.state and restart Firefox.
  6. Repeat for other toolbars btw. positions.

Image

smsmith
Moderator

User avatar
 
Posts: 19788
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted February 1st, 2018, 11:12 am

Do the random four digits need to be different for each separator?
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

Aris

User avatar
 
Posts: 3216
Joined: February 27th, 2011, 10:14 am

Post Posted February 1st, 2018, 11:17 am

Yes they do. Firefox also always used different random digits in the past.

mikevillarroel
 
Posts: 2
Joined: October 16th, 2018, 10:56 am

Post Posted October 16th, 2018, 11:00 am

Is there any way to change the color this separators?

jscher2000

User avatar
 
Posts: 10413
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted October 17th, 2018, 7:11 pm

mikevillarroel wrote:Is there any way to change the color this separators?

Probably using a custom style rule in a userChrome.css file.

Aris

User avatar
 
Posts: 3216
Joined: February 27th, 2011, 10:14 am

Post Posted October 18th, 2018, 4:37 am

Add this to your userChrome.css to change the color of a vertical separator:

Code: Select all
toolbar toolbarseparator {
  -moz-appearance: none !important;
  width: 2px !important;
  border-left: 1px solid yellow !important;
  border-right: 1px solid red !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

mikevillarroel
 
Posts: 2
Joined: October 16th, 2018, 10:56 am

Post Posted October 18th, 2018, 6:45 am

Aris wrote:Add this to your userChrome.css to change the color of a vertical separator:

Code: Select all
toolbar toolbarseparator {
  -moz-appearance: none !important;
  width: 2px !important;
  border-left: 1px solid yellow !important;
  border-right: 1px solid red !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
perfect thank you very much!!

Yaron10
 
Posts: 447
Joined: July 5th, 2011, 6:32 am

Post Posted December 17th, 2018, 3:34 pm

Code: Select all
..,"nav-bar":["back-button","forward-button","stop-reload-button","customizableui-special-separator1957","home-button","urlbar-container",....


I can't make it work in FF 64. Any idea?
Thanks.

Aris

User avatar
 
Posts: 3216
Joined: February 27th, 2011, 10:14 am

Post Posted December 18th, 2018, 10:12 am

Just tested, it even works in Firefox 65 beta.

Yaron10
 
Posts: 447
Joined: July 5th, 2011, 6:32 am

Post Posted December 18th, 2018, 6:00 pm

Hello Aris,

Thanks for replying. I appreciate it.

I've just tested it with a new profile. It does not work for me.

This is the entry in about:config.
Code: Select all
{"placements":{"widget-overflow-fixed-list":[],"PersonalToolbar":["personal-bookmarks"],"nav-bar":["back-button","forward-button","stop-reload-button","home-button","customizableui-special-separator1957","urlbar-container","downloads-button","library-button","sidebar-button"],"TabsToolbar":["tabbrowser-tabs","new-tab-button","alltabs-button"],"toolbar-menubar":["menubar-items"]},"seen":["developer-button"],"dirtyAreaCache":["PersonalToolbar","nav-bar","TabsToolbar","toolbar-menubar"],"currentVersion":15,"newElementCount":2}

And this in prefs.js.
Code: Select all
user_pref("browser.uiCustomization.state", "{\"placements\":{\"widget-overflow-fixed-list\":[],\"PersonalToolbar\":[\"personal-bookmarks\"],\"nav-bar\":[\"back-button\",\"forward-button\",\"stop-reload-button\",\"home-button\",\"customizableui-special-separator1957\",\"urlbar-container\",\"downloads-button\",\"library-button\",\"sidebar-button\"],\"TabsToolbar\":[\"tabbrowser-tabs\",\"new-tab-button\",\"alltabs-button\"],\"toolbar-menubar\":[\"menubar-items\"]},\"seen\":[\"developer-button\"],\"dirtyAreaCache\":[\"PersonalToolbar\",\"nav-bar\",\"TabsToolbar\",\"toolbar-menubar\"],\"currentVersion\":15,\"newElementCount\":2}");


Image

***
I'm using the unbranded build if it should make any difference.

Aris

User avatar
 
Posts: 3216
Joined: February 27th, 2011, 10:14 am

Post Posted December 19th, 2018, 9:11 am

I edited browser.uiCustomization.state pref on the fly and restarted Firefox.

Try this: Customizing mode > restore defaults > restart Firefox > about:config > edit browser.uiCustomization.state pref > restart Firefox.

Yaron10
 
Posts: 447
Joined: July 5th, 2011, 6:32 am

Post Posted December 19th, 2018, 4:47 pm

Thanks again Aris.

I'm using Windows 7 Classic Theme and this seems to cause the problem.
Changing the separator color (as you've suggested in this thread) - it is displayed/visible.

If you can add some more words of enlightenment, I'd appreciate it.

Aris

User avatar
 
Posts: 3216
Joined: February 27th, 2011, 10:14 am

Post Posted December 20th, 2018, 10:10 am

Most likely Mozilla removed the separator UI for Windows classic theme. Using the above code "restyles" separators so they become visible.

dickvl

User avatar
 
Posts: 52453
Joined: July 18th, 2005, 3:25 am

Post Posted December 20th, 2018, 10:55 am

Current Firefox releases support the flexible space (spring), so it is usually easier to first use customize mode to add a flexible space and then edit browser.uiCustomization.state to change a flexible space to a separator.

"customizableui-special-separator##" (separator)
"customizableui-special-spacer##" (spacer)
"customizableui-special-spring##" (spring)

Yaron10
 
Posts: 447
Joined: July 5th, 2011, 6:32 am

Post Posted December 20th, 2018, 6:11 pm

@Aris,
I appreciate your help.

@dickvl,
Thank you too.

Return to Firefox Support


Who is online

Users browsing this forum: No registered users and 13 guests