Add ToolBar separator to Firefox
Solution 1:
Is it possible to add a toolbar separator to Firefox?
To the left of the window you show in your question should be "Additional Tools and Features" which contains the available toolbar buttons. You can drag and drop these buttons onto an open toolbar.
You can install the Classic Theme Restorer add-on to get additional toolbar buttons as well as other useful features.
If you don't have any open toolbars to use a a drop target, then click on "Show/Hide Toolbar" at the bottom of the "Additional Tools and Features" screen.
See Customize Firefox controls, buttons and toolbars for more information.
Disclaimer
I am not affiliated with Classic Theme Restorer in any way, I am just an end user of the software.
Solution 2:
You can add vertical-line separators to Firefox's toolbars without any add-on, even with the new Photon UI. I've tested this in Firefox Nightly (currently 57.0a1). The graphical option to do so, however, was removed long, long ago.
- Type
about:config
into the address bar. - Search for the preference with the name
browser.uiCustomization.state
. - Double-click on the value, which will allow you to edit it. It contains the placement of all the widgets/icons/etc. that Firefox uses. Place
customizableui-special-separator2
(separated by commas) wherever you want a separator. - Restart Firefox.
In the case below I've added a separator between the new container tab and uBlock Origin buttons, so those particular values in that preference look like this: "containers-panelmenu","customizableui-special-separator2","ublock0_raymondhill_net-browser-action"
Please note that these separators only work in the toolbar itself, not in the Overflow Menu.