[ADD-ON BAR SUPPORT THREAD] - simulate 'add-on bar' by moving 'bookmarks toolbar' to windows bottom keeping bookmark items on top

[Aris-t2]

Discuss here everything related to v1.4.0+ versions feature to simulate an add-on bar on windows bottom.

1. To keep bookmarks on top move 'Bookmarks Toolbar Items' to navigation toolbar in 'customizing' mode.
2. Shrinking window width will hide most navigation toolbar items including bookmarks in navigation toolbar.
3. Multi lined bookmarks toolbar is not compatible to this feature (yet?).

[GrosBourrin]

same problem but the page loads several times ! maybe some confusion with other part of my userchrome stylesheet.... or some other uc.js files...i will see that later

[krystian3w]

IMO no, maybe the amount of successful loading depends on the computing power of the computer, e.g. I have intel i3 very old generation, so weak processor and Windows 7.

[krystian3w]

Maybe with the issue of 66, it repairs itself with us and you will not have to increase the counter settimeout the function.

[Aris-t2]

@GrosBourrin Have you tried to setup a new browser profile, sometimes this helps .

[GrosBourrin]

hi there, the script works good now on 66.0.3, but i try to make the addonbar thicker, where could i tweak it ? i mean which params must i change ?

[Aris-t2]

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/toolbars/addonbar_move_bookmarks_toolbar_to_bottom.css#L11 https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/config/general_variables.css#L48

[GrosBourrin]

works great, i have found how to resolve with your help ! so thankful to have recover my addonbar :) thanks so much

[BrandtnerKPW]

After one of the latest FF72 updates downloads button in addon bar jumped up. I found how to put it down. In "addonbar_move_bookmarks_toolbar_to_bottom.css" for "downloads button fix" change line top: 0px !important;

[Aris-t2]

Thanks for the note.

[marty60]

Hi Aris,

In v72 and earlier this worked perfectly in userchrome.css to put the bookmark toolbar on the bottom and autohide it in full screen:

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar {
  visibility: visible !important;
}

 /* move bookmarks toolbar to bottom + style bookmarks toolbar */
    #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar {
      -moz-window-dragging: no-drag;
      display: block !important;
      position: fixed !important;
      bottom: -20px !important;
      width: 100% !important;
      height: 27px !important;
      -moz-padding-start: 1px !important;
      -moz-padding-end: 1px !important;
      border-top: 1px solid var(--toolbox-border-bottom-color) !important;
      opacity: 0 !important;
      transition: all 0.1s ease 0s !important;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar:hover  {
      opacity: 1.0 !important;
      transition-delay: 0s !important;
      bottom: 0px !important;   
}

 #PersonalToolbar {
      -moz-window-dragging: no-drag !important;
}

Is there something similar to do this in v73 nightly that can be added to userchrome.css? I've tried your latest css version but can't make it work.

[Aris-t2]

addonbar_move_bookmarks_toolbar_to_bottom_fx72.css works for me on Fx 73 too. The are some other glitches with bookmarks on bookmarks toolbar, that will bei fixed on next update, but in general the toolbar works and is at the bottom.

[marty60]

Trying to get it to autohide in full screen with no luck. I only added the three code paragraphs below "/ move bookmarks toolbar to bottom + style bookmarks toolbar /" in userchrome.css

The addonbar.uc.js script works fine enough except that there is a white line on the bottom of websites and it's clearly visible when in full screen watching youtube videos. Tried everything, adjusting margin-top etc. but can't hide it without the bar not working to autohide in full screen.

[Aris-t2]

@marty60 Enable addonbar_move_bookmarks_toolbar_to_bottom_fx72.css and additionally use this code:

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar {
  min-height: 1px !important;
  height: 1px !important;
  max-height: 1px !important;
  visibility: visible !important;
  display: block !important;
}

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar:hover {
  min-height: var(--addonbar_height) !important;
  height: var(--addonbar_height) !important;
  max-height: var(--addonbar_height) !important;
}

[marty60]

The problem I'm having is that the bookmarks toolbar is there on the bottom when the page is blank but when opening a web page it disappears. Figure it probably has something to do with margins.

[Aris-t2]

Does this happen with 2.9.1 release and e.g. maximized window too?

[marty60]

v2.9.1 seems to have fixed it, it's autohiding now, must have been the "z-index: 1000 !important;" line. Thanks for your time Aris.

[Aris-t2]

The 'autohide simulated add-on bar in fullscreen' code will get an own option on next update.

[marty60]

Similar to the addonbar.uc.js script the revised code leaves a thin white line on the bottom of the page, which shows when the site is dark or in youtube full screen. I was able to hide it by adding some additional lines to the autohide code above so it looks like this:

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar { min-height: 0px !important; height: 0px !important; max-height: 0px !important; visibility: visible !important; opacity: 0 !important; transition: all 0.1s ease 0s !important; margin-top: -32px !important; display: block !important; }

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar:hover { min-height: 29px !important; height: 29px !important; max-height: 29px !important; opacity: 1.0 !important; transition-delay: 0s !important; margin-top: inherit !important; }

[Aris-t2]

That is strange, but neither the CSS solution nor the JS script cause a visible line on my system in fullscreen mode when watching a YT video. Maybe this happens only on one specific configuration?

[marty60]

Might be related to configuration but I tried it with just the Bookmark toolbar code only in the userChrome.css file and with addonbar.uc.js autohide code only and the white line is clearly visible. I can't fix it with addonbar.uc.js but can with the Bookmark toolbar so it's all working good now.

If anyone else runs into the problem that solution might help them. I think the main line is "margin-top: -32px !important;", the other lines just let you control the bar transition.

The top bars autohiding in full screen are the problem now, they open and close with the slightest movement of the mouse. Way too sensitive, wish I could slow that down somehow. Each time I open a new nightly it's almost guaranteed something else is messed up.

[Aris-t2]

@marty60 :not([inDOMFullscreen="true"]) excludes the code from full screen videos. Not sure how the bookmarks toolbar can cause the line. Setting an opacity might help too.

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar {
  min-height: 1px !important;
  height: 1px !important;
  max-height: 1px !important;
  visibility: visible !important;
  display: block !important;
  opacity: 0.1 !important;
}

#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar:hover {
  min-height: var(--addonbar_height) !important;
  height: var(--addonbar_height) !important;
  max-height: var(--addonbar_height) !important;
  opacity: 1 !important;
}

[marty60]

Including the opacity lines greatly diminishes it on dark websites, it's still there but barely visible.

With youtube videos it's completely gone so just adding those two lines are sufficient.

[BrandtnerKPW]

After January 8th FF74 Nightly update add-on icons is not visible on add-on bar. If downgrade FF to January 7th version they are visible again. How can I make them visible with actual version?

[Aris-t2]

I've added an experimental workaround to the latest release. Test custom_css_for_fx_v2.9.7_v2.zip.

[BrandtnerKPW]

Thank you! Add-on icons are displayed again. But it seems that addonbar_content_on_the_right.css does not work.

[Aris-t2]

Try to add a flex space item to the left of your toolbar.

[BrandtnerKPW]

It works. Thank you!

[3ncryp73dh45h]

Firsto of all thank you for your efforts on bringing us better Firefox experience through your project. I'm using Classic CSS tweaks for Firefox Quantum v2.9.8 mostly because of addon bottom bar where I got comfortable keeping some of most used addon icons like NoScript nad Download Statusbar, but I'd like to know if there is a way (setting/option) to define spacing between them as they're currently too close to each other. Thanks.

[Aris-t2]

This should help:

#PersonalToolbar > toolbarbutton:not(#PlacesChevron) {
  margin: 0 4px !important;
}

[3ncryp73dh45h]

This should help:

#PersonalToolbar > toolbarbutton:not(#PlacesChevron) {
  margin: 0 4px !important;
}

Thanks. But I've only been able to locate similar line in buttons_on_bookmarks_toolbar_old_size_and_appearance.css and I'm not sure this is the right place to add this can you please tell me exactly in which file should I put it/modify or should it go to ./my_userChrome.css? Thanks.

[Aris-t2]

Yes, all additional tweaks go into my_userChrome.css or at the bottom of userChrome.css.

The code has to override the one in buttons_on_bookmarks_toolbar_old_size_and_appearance.css.

[3ncryp73dh45h]

For some reason it is only working for me if I put margin: 0 4px !important; directly into buttons_on_bookmarks_toolbar_old_size_and_appearance.css

[Aris-t2]

Its OK to modify the initial file too, but you will have to repeat this for every release.

[3ncryp73dh45h]

Its OK to modify the initial file too, but you will have to repeat this for every release.

I'm aware of it and I'm not happy but adding modifications to my_userChrome.css doesn't work.

[Aris-t2]

That is strange, but I have no explanation for that. "my_userChrome.css" is being loaded from "userChrome.css" automatically for a while now, if it exists.

[marty60]

Hi Aris,

Thanks for your help. All I use is the userChrome.css, not the full tweak program that you have. I've gone through v2.9.9_v2.zip but can't figure out what goes in there, what would be the code to just put in userChrome.css to get the bookmark toolbar icons configured normally again?

You don't have to post it if you can just direct me to which file it's located. I added all of the code from bookmarks_toolbar_multiple_lines_fx74 but it didn't change anything.

[Aris-t2]

Could you define "bookmark toolbar icons configured normally again"?

Adding the code from bookmarks_toolbar_multiple_lines_fx74.css gives the correct result. Just tested on latest Nightly.

:root {
  --bookmark_items_height: 22px; /* <- bookmark items - line height */
  --bookmark_items_lines: 3; /* <- maximum amount of lines */
}

#PersonalToolbar {
  min-height: var(--bookmark_items_height) !important;
  max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}

#personal-bookmarks,
#PlacesToolbar > hbox {
  display: block;
}

#PlacesToolbarItems {
  display: flex;
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: auto;
}

#PlacesToolbarItems > .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap; 
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important
}

#personal-bookmarks #PlacesToolbar {
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}

#personal-bookmarks #PlacesToolbar > .bookmark-item{
  visibility: visible !important;
}

#personal-bookmarks #PlacesToolbar .chevron{
  visibility: collapse;
}
#personal-bookmarks #PlacesToolbar > hbox > hbox{
  overflow-x: hidden;
  overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
  display: none;
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  vertical-align: middle;
}
/*
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
*/
#personal-bookmarks #PlacesToolbar toolbarseparator{
  -moz-appearance: none !important;
  visibility: visible !important;
  display: inline;
  text-shadow: none !important;
  border-left: 3px solid ThreeDShadow !important;
  border-right: 3px solid ThreeDHighlight !important;
  vertical-align: middle;
}

#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
  -moz-appearance: toolbarbutton;
}

#navigator-toolbox #PersonalToolbar { 
  max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}

[marty60]

That's the code I was using with no luck.

All of the icons, six of them are stacked vertically on the far left and the toolbar has expanded in height about an inch.

This is what I'm using to put the toolbar on the bottom and was working perfectly until recently:

main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar {

-moz-window-dragging: no-drag; display: block !important; position: fixed !important; bottom: 0px !important; width: 100% !important; height: var(--addonbar_height) !important; -moz-padding-start: 1px !important; -moz-padding-end: 1px !important; border-top: 1px solid var(--toolbox-border-bottom-color) !important; z-index: 1000 !important;
}

[Aris-t2]

Use display: flex instead of display: block in this case (on Fx74+).

As far as I know the "combination of simulated add-on bar" (using the bookmarks toolbar at windows bottom) is not compatible to "multiple bookmark lines".

"Multiple bookmark lines" feature requires a dynamic bookmarks toolbar or area to expand while forcing a top toolbar like bookmarks toolbar to windows bottom requires fixed non-dynamic height and vertical margin/padding values.

It should however work with the js version of add-on bar.

[marty60]

That was simple, spent all that time trying to figure out the problem and it was one word. Thanks again for the help.

[Benuzar]

content

But it seems that addonbar_content_on_the_right.css does not work.

For floating right the addonbar content I added this code:

personal-bookmarks {

justify-content: flex-end; }

[Aris-t2]

The flexible space does the job for a while now.

[samehb]

OS / OS version / OS theme: Windows 7 x64. browser (default Firefox or a fork): Firefox Browser 74.0.1. browser theme (default theme, dark/light theme, lw-theme): Default theme.

Hello, Aris-t2. I came across two issues regarding the addon-on bar. First issue was the alignment of icons. They are centered, by default. I have tried using a flexible space element, but it pushed the icons into one another. No matter. I have solved the issue using

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox>#PersonalToolbar {
    justify-content: flex-end;
}

which is also suggested by Benuzar.

Anyway, the second issue is regarding the placement of #statuspanel. I have noticed that Firefox places the panel on both the bottom left and bottom right sides. You can confirm this by opening the bookmarks menu, and then moving your mouse to the right and left edges of bookmark items. Move it slowly, and you can see it.

This issue is caused by Firefox using mirroring:

#statuspanel[mirror]:-moz-locale-dir(ltr) {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

It also adds margins:

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) {
    border-left-style: solid;
    margin-left: 1em;
}

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) {
    border-right-style: solid;
    margin-right: 1em;
}

Here is the fix that I am currently using:

#statuspanel[mirror]
{
    inset-inline-start: unset !important;
    inset-inline-end: unset !important;
}

#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) 
{
    margin-left: 0px !important;
}

#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl)
{
    margin-right: 0px !important;
}

Best Wishes.

[Aris-t2]

Thanks for the code/fix, I will add it on next update. This will restore the deprecated "addonbar_content_on_the_right.css" option.

[samehb]

You are welcome, Aris-t2.

[Null-Kelvin]

OS Windows 10 x64 browser: Firefox Browser 77.0.1. browser theme: Default theme. custom css: v3.1.4 v3

Hi. I have visual glitch on new Firefox 77 bookmarks_toolbar_simulate_second_bm_toolbar_fx65.css - disabled addonbar_move_bookmarks_toolbar_to_bottom_fx72.css - disabled

bookmarks_toolbar_simulate_second_bm_toolbar_fx65.css - enabled addonbar_move_bookmarks_toolbar_to_bottom_fx72.css - enabled

[Aris-t2]

The issue is caused by the second bookmarks toolbar. I will add a workaround on next updte.

/* fix for megabar */
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
  top: 5px !important;
}

:root[uidensity="compact"] #urlbar[breakout],
:root[uidensity="compact"] #urlbar[breakout][breakout-extend] {
  top: 3px !important;
}

:root[uidensity="touch"] #urlbar[breakout],
:root[uidensity="touch"] #urlbar[breakout][breakout-extend] {
  top: 4px !important;
}

[kpedro88]

Is there a way to horizontally center the bookmark items when addonbar_extra_bookmarks_toolbar_below_navbar_fx65.css is enabled?

[Aris-t2]

Increase this value: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/toolbars/addonbar_extra_bookmarks_toolbar_below_navbar_fx65.css#L20

[kpedro88]

That moves it vertically, but thanks for pointing out the right place to modify the values. I achieved a horizontal center by adding these lines in that block:

  left: 50% !important;
  margin-left: -25% !important;

Doesn't quite adjust correctly when the window isn't maximized, but oh well.