Waterfox 56: Impossible to add spaces and separators to toolbars in customize mode #312

remez · 2017-12-12T08:22:33Z

Hello,
I need to customize my toolbars adding a fixed space or other elements added by the CTR.
I go in "Hamburger" -> "Customize"
In the "Additional Tools And Features" Windows I see some elements that I want to move to my toolbars.
If I try to move "Space" or "Separator" or "Flexible Space" in any toolbar, when I release the left button of the mouse, the element isn't inserted in the toolbar.

Configuration:
Windows 7 64 bit
Waterfox 56.0 64bit English
Default Theme
Tried with a clean installation of Waterfox and CTR (last Official version and last beta)

Thank you

https://github.com/Aris-t2/ClassicThemeRestorer/issues/384

grahamperrin · 2017-12-23T15:49:17Z

Aris-t2/ClassicThemeRestorer#384

Also Aris-t2/ClassicThemeRestorer#383

…"Space" or "Separator" or "Flexible Space" …

Not specific to Waterfox. There's the same problem with Classic Theme Restorer with Firefox 56.0.2 (64-bit) on FreeBSD-CURRENT.

@remez to reduce duplication/multiplication, maybe close this issue; things might be progressed under the earlier issues in the Classic Theme Restorer repository.

mzso · 2018-04-26T11:40:54Z

@MrAlex94
Maybe this is an easy fix? The way Aris talks about this in the CTR issue certainly makes it sound so.

Lorienna · 2018-09-28T09:32:09Z

The following commit broke the spacers and separators in CTR:

Reverting it would probably restore their normal functioning.

And of course the pref browser.photon.structure.enabled must be always set to false to keep the Photon UI off :)

@Aris-t2

Aris-t2 · 2018-09-28T10:41:56Z

For me it was always clear Firefox code broke special toolbar items on purpose. There was no need to add such changes to Fx56, when it was actually meant for Fx57. Not sure, if this change can be reverted inside Waterfox code, but I'm optimistic. ;-)

A workaround for CTR still does the job:

Enter customizing mode after starting Waterfox.
Right-click on a spacer / empty space / flexible space item and select "Add to toolbar".
(Drag&drop is either broken or permitted by the browser, CTR only offers the items and their appearance, but not how they are handled by the browser).
Once on toolbar you can move those items wherever you like them to be.

There is a discussion about this on CTRs Github support area too: Aris-t2/ClassicThemeRestorer#383

grahamperrin · 2018-09-29T00:52:32Z

Thanks @Aris-t2 and NB (from the linked issue):

… disappearance (from available buttons) after first use of Customise …

In other words:

Enter customizing mode after starting Waterfox.

If what's required is not present in that mode, then:

a) quit/exit Waterfox
b) start Waterfox
c) repeat step (1).

grahamperrin · 2018-12-23T03:25:01Z

From Aris-t2/ClassicThemeRestorer#383 (comment) (2017-12-02):

… and Firefox 56 do not support spaces, flexible spaces and separators anymore.

Also https://www.reddit.com/r/waterfox/comments/7jndj6/-/drbun04/ (2017-12-16):

Firefox 56 … broke the ability to move flexible spaces, spaces and separators to toolbars. …

We have limited workarounds, with extensions such as Classic Theme Restorer, but this is – essentially – an issue (by design) with Mozilla Firefox 56. #824 is a duplicate.

IzzySoft · 2018-12-23T10:49:48Z

#824 is a duplicate.

I doubt that. Quoting the original description here:

In the "Additional Tools And Features" Windows I see some elements that I want to move to my toolbars. If I try to move "Space" or "Separator" or "Flexible Space" in any toolbar, when I release the left button of the mouse, the element isn't inserted in the toolbar.

In #824 those elements are not there at all – so of course they cannot be moved.

Somehow same outcome (no spacers to use) – but I'm not sure these are dupes.

grahamperrin · 2018-12-23T15:07:42Z

Compare with a new profile with Firefox 56.0.2 …

Lorienna · 2019-05-08T16:00:20Z

Note: in Waterfox/Firefox 56, the Flexible Space is available in the customization palette when the preference browser.photon.structure.enabled is set to true.

Lorienna · 2019-05-08T16:01:37Z

_{Modifying the preference to add spaces and separators}

The method of editing the browser.uiCustomization.state preference has been described multiple times, including by Aris in the CustomCSSforFx#109 (comment) and on mozillaZine forums here and there.

To place a special widget, for example, on the Navigation Toolbar, go to about:config address > search for the browser.uiCustomization.state preference > copy and paste the content of its string value into a text file > find the nav-bar array > add an entry there > update the string in about:config and restart the browser.

A flexible space (bold):

"nav-bar":["urlbar-container","downloads-button","customizableui-special-spring2019","home-button"]

A fixed space:

"nav-bar":["urlbar-container","downloads-button","customizableui-special-spacer2019","home-button"]

A separator:

"nav-bar":["urlbar-container","downloads-button","customizableui-special-separator2019","home-button"]

As you can see, the nav-bar array is a JSON array where the values must be enclosed in straight quotation marks and separated by commas, and the numeric suffix of the special value must be random and unique throughout the toolbar arrays for the type of item.

You can also move the Flexible Space from the customization palette onto the Navigation Toolbar, and then change the spring part to separator or spacer before restarting the browser.

Another possibility is to manually edit the prefs.js file when the browser is closed.
Make sure the quotes are escaped with backslashes there:

\"nav-bar\":[\"urlbar-container\",\"downloads-button\",\"customizableui-special-spacer2019\",\"home-button\"]

The toolbar arrays include:

nav-bar                 navigation toolbar
PersonalToolbar         bookmarks toolbar
TabsToolbar             tabs toolbar
toolbar-menubar         menu bar

ctraddon_addon-bar      classic theme restorer: add-on bar
ctraddon_extra-bar      classic theme restorer: additional bar

Lorienna · 2019-05-08T16:07:24Z

_{Modifying the toolbar items with CSS to create spaces and separators}

You can transform flexible spaces into other spacing items, hide buttons or increase their margins.
Learn about the userChrome.css file in the CustomCSSforFx/README.md or on the userchrome.org site.

Aris-t2 commented on Dec 17, 2017:

You can force flexible spacers to have fixed width values:

#main-window:not([customizing]) #nav-bar toolbarspring {
  min-width: 20px !important;
  max-width: 20px !important;
}

You can use this hack to create one separator out of two spaces (place one space after another). Make sure to use the same width everywhere like in this example (->"20px"):

#main-window:not([customizing]) #nav-bar toolbarspring {
  min-width: 20px !important;
  max-width: 20px !important;
}
#main-window:not([customizing]) #nav-bar toolbarspring + toolbarspring {
  -moz-appearance: separator !important;
  min-width: 1px !important;
  max-width: 1px !important;
  -moz-margin-start: -20px !important;
}

Turn all flexible spaces on navigation toolbar into separators:

#main-window:not([customizing]) #nav-bar toolbarspring {
  -moz-appearance: separator !important;
  min-width: 1px !important;
  max-width: 1px !important;
  -moz-margin-start: 1px !important;
}

Transform all flexible spaces on the Navigation Toolbar except the first and the last ones into separators with the :nth-of-type and the :nth-last-of-type pseudo-class selectors, and decrease the specificity of the rule with the :root pseudo-class selector instead of #main-window:

:root:not([customizing]) #nav-bar toolbarspring:nth-of-type(n+2):nth-last-of-type(n+2) {
  -moz-appearance: separator !important;
  min-width: 1px !important;
  max-width: 1px !important;
  -moz-margin-start: 1px !important;
}

Make the first and the last flexible spaces on the Navigation Toolbar into separators using the :first-of-type and the :last-of-type pseudo-class selectors:

#main-window:not([customizing]) #nav-bar toolbarspring:first-of-type,
#main-window:not([customizing]) #nav-bar toolbarspring:last-of-type {
  -moz-appearance: separator !important;
  min-width: 1px !important;
  max-width: 1px !important;
  -moz-margin-start: 1px !important;
}

Turn, for example, the 3rd and the 5th flexible spaces on the Navigation Toolbar (counting from start/left) into fixed spaces with the :nth-of-type:

#main-window:not([customizing]) #nav-bar toolbarspring:nth-of-type(2n+3):nth-of-type(-n+5) {
  min-width: 15px !important;
  max-width: 15px !important;
}

Use the :nth-last-of-type to create a fixed space from, e.g., the 2nd flexible space on the Navigation Toolbar (counting from end/right):

#main-window:not([customizing]) #nav-bar toolbarspring:nth-last-of-type(2) {
  min-width: 15px !important;
  max-width: 15px !important;
}

Transform a particular flexible space into a separator of distinct style:

:root {
  --separators-width-spring2019: 4px;
}

#main-window:not([customizing]) #customizableui-special-spring2019 {
  -moz-appearance: none !important;
  min-width: var(--separators-width-spring2019) !important;
  max-width: var(--separators-width-spring2019) !important;
  margin: 0.4em 4px !important;
  border-right-width: var(--separators-width-spring2019) !important;
  border-right-style: dotted !important;
  border-right-color: HotPink !important;
}

Replace flexible spaces situated after the Location Bar with separators using the General / Following Sibling Combinator (~):

#main-window:not([customizing]) #urlbar-container ~ toolbarspring {
  -moz-appearance: separator !important;
  min-width: 1px !important;
  max-width: 1px !important;
  -moz-margin-start: 1px !important;
}

Replace one flexible space situated immediately after a button with a separator using the Adjacent / Next Sibling Combinator (+):

#main-window:not([customizing]) #downloads-button + toolbarspring {
  -moz-appearance: separator !important;
  min-width: 1px !important;
  max-width: 1px !important;
  -moz-margin-start: 1px !important;
}

Increase margins of individual buttons targeting them by #ID that can be found using the Browser Toolbox; within the string value of the browser.uiCustomization.state preference; in the style recipes of CustomCSSforFx; etc.:

#main-window:not([customizing]) #downloads-button,
#main-window:not([customizing]) #home-button {
  margin-right: 15px !important;
}

:-moz-any(#downloads-button, #home-button) {
  margin-right: 15px !important;
}

Leave empty space instead of an unneeded button:

#main-window:not([customizing]) #home-button {
  visibility: hidden !important;
}

The set of pseudo-class selectors matching the sibling elements of the same type (toolbarspring) within a container (nav-bar) and its descendant containers:

:first-of-type            the first elements
:last-of-type             the last elements
:only-of-type             the only elements
:nth-of-type()            the nth elements (counting from start)
:nth-last-of-type()       the nth elements (counting from end)

The toolbar ID selectors include:

#nav-bar                  navigation toolbar
#PersonalToolbar          bookmarks toolbar
#TabsToolbar              tabs toolbar
#toolbar-menubar          menu bar

#ctraddon_addon-bar       classic theme restorer: add-on bar
#ctraddon_extra-bar       classic theme restorer: additional bar

The element selectors of spaces and separators on toolbars and in the hamburger menu:

toolbarspring             flexible spaces
toolbarspacer             fixed spaces
toolbarseparator          separators

The ID selectors of individual special widgets (custom spaces and separators on the main window toolbars):

#customizableui-special-spring2019       [id$=spring2019]           a flexible space
#customizableui-special-spacer2019       [id$=spacer2019]           a fixed space
#customizableui-special-separator2019    [id$=separator2019]        a separator

grahamperrin · 2019-11-02T14:56:28Z

Cross reference https://redd.it/dqk4h5

IzzySoft mentioned this issue Dec 21, 2018

Freshly installed Waterfox missing spacers in Customize #824

Closed

MrAlex94 closed this as completed Jun 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Waterfox 56: Impossible to add spaces and separators to toolbars in customize mode #312

Waterfox 56: Impossible to add spaces and separators to toolbars in customize mode #312

remez commented Dec 12, 2017

grahamperrin commented Dec 23, 2017 •

edited

mzso commented Apr 26, 2018

Lorienna commented Sep 28, 2018

Aris-t2 commented Sep 28, 2018

grahamperrin commented Sep 29, 2018

grahamperrin commented Dec 23, 2018

IzzySoft commented Dec 23, 2018

grahamperrin commented Dec 23, 2018

Lorienna commented May 8, 2019

Lorienna commented May 8, 2019

Lorienna commented May 8, 2019 •

edited

grahamperrin commented Nov 2, 2019

Waterfox 56: Impossible to add spaces and separators to toolbars in customize mode #312

Waterfox 56: Impossible to add spaces and separators to toolbars in customize mode #312

Comments

remez commented Dec 12, 2017

grahamperrin commented Dec 23, 2017 • edited

mzso commented Apr 26, 2018

Lorienna commented Sep 28, 2018

Aris-t2 commented Sep 28, 2018

grahamperrin commented Sep 29, 2018

grahamperrin commented Dec 23, 2018

IzzySoft commented Dec 23, 2018

grahamperrin commented Dec 23, 2018

Lorienna commented May 8, 2019

Lorienna commented May 8, 2019

Modifying the preference to add spaces and separators

Lorienna commented May 8, 2019 • edited

Modifying the toolbar items with CSS to create spaces and separators

grahamperrin commented Nov 2, 2019

grahamperrin commented Dec 23, 2017 •

edited

_{Modifying the preference to add spaces and separators}

Lorienna commented May 8, 2019 •

edited

_{Modifying the toolbar items with CSS to create spaces and separators}