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

[Aris]

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.

[smsmith]

Do the random four digits need to be different for each separator?

[Aris]

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

[mikevillarroel]

Is there any way to change the color this separators?

[jscher2000]

Is there any way to change the color this separators?

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

[Aris]

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]

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]

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]

Just tested, it even works in Firefox 65 beta.

[Yaron10]

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}");

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

[Aris]

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]

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]

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

[dickvl]

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]

@Aris,
I appreciate your help.

@dickvl,
Thank you too.