Flexible Spaces

[enthusiast01]

Firefox changed flexible spaces long ago. There used to be a large and a small space. With the new direction, they removed the small space. Is it possible to modify the min size of the flexible space? All the scripts I found do not work.

[krystian3w]

userChrome script solution:

You can use that `uc.js`: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js and in edit interface mode add new "short" spaces. Works fine for me. ⚠️ **Remember correctly complete steps for method 2**: https://github.com/Aris-t2/CustomJSforFx#method-2---files-in-install-and-profile-folders *I on a daily basis use xiaoxiaoflood source files (similar to legacy method 3).* ----

manually conversion springs to "short" spaces:

As a workaround, you can try manually in `about:config` (then needed is restart Firefox window) or maybe `prefs.js` replacing the names of flexible spaces with "short" spaces in key `browser.uiCustomization.state`. However, in my case it sometimes caused a complete corruption of the icon layout (then it is good to have a backup of the old value or profile files) maybe due deprecate these edition (in key I see numbers for spaces: `-spacer20` / `-spring8` - I guess we can't duplicate numbers after change spring to spacer). ---

CSS workaround:

If you absolutely must do it in CSS then something like this pseudo-code will probably work: ```css /* up to Firefox 112 */ #unique-element + toolbarspring { -moz-box-flex: 5 !important; } /* Firefox 113+ */ #unique-element + toolbarspring { flex: 5 5 0 !important; } /* the "flex: 5 5 0;" equal: flex-grow: 5; flex-shrink: 5; flex-basis: 0px; */ ```

---

https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex - can down in Firefox 112-114 based on Aris and Speravir (https://github.com/Aris-t2/CustomCSSforFx/discussions/454#discussioncomment-5482504) research.

[enthusiast01]

The CSS workaround like the 5 other ones I have tried do not work, sadly.

The https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/space_and_separator_restorer.uc.js - I assume I need to use some kind of script addon like greasemonkey, copy the contents of that link into it?

I installed tampermonkey and copied lines 18 to 178 into it as a new script. It does not like the script & reports errors. Am I doing something wrong?

[krystian3w]

No, these scripts are not installed to any GreasyMonkey/Tampermonkey/ViolentMonkey.

You need to prepare a browser profile according to method 2: https://github.com/Aris-t2/CustomJSforFx#method-2---files-in-install-and-profile-folders

And there find the file "userChrome.js" in which you enter the scripts for activation (Line 2-3: https://github.com/Aris-t2/CustomJSforFx/blob/82fc2357524da1f98d4e19a6506eeb460f98a9b6/method%202/profile/userChrome.js#L2-L3).

Then the narrow space appears in the standard customization mode (need restart (not "reset") Firefox).

---

And I think I've figured out what it is about not working. Depending on how stuffed the bar is, that's how poorly the number will work - you can test a few in the 1-100 range.

I haven't checked how it works in Firefox 113, maybe there it doesn't depend so much on stuffing in a particular bar anymore.

Or you're so helpless that you don't know what to replace "#unique-element" with correct "name" of element https://github.com/Aris-t2/CustomCSSforFx#how-to-find-item-ids-and-attributes (I prefer to change a single space instead of knocking them all down, so then you have to replace the element name).

(As for me, forcing "display: block !important;" on this element doesn't want to work to use the simpler "width: 5px !important;".)

[enthusiast01]

Overly complicated for the request. Took a while to find it, but this suits my need just fine:

/ Make Flexible Space into Fixed Space / toolbarspring { min-width: 10px !important; max-width: 10px !important; }

Change 10px to whatever works best.

[krystian3w]

I still prefer extend editor in customization mode, somewhere I like flex.