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

Aris-t2 · 2017-11-28T18:15:41Z

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

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

B00ze64 · 2017-11-29T03:13:38Z

So the Navigation toolbar can overflow onto a 2nd line?
And the bookmarks toolbar can be moved to the bottom?
Neat!

Aris-t2 · 2017-11-29T07:50:04Z

The trick is extending navigation toolbars bottom padding and moving bookmark items to navigation toolbar. Forcing bookmark items box to use an absolute position at navigation toolbars extended bottom area creates the effect of another bookmarks toolbar.
This should also work for location bar and search bar as both are also flexible horizontal boxes.

lazycurl · 2017-11-29T12:00:38Z

Good to know the trick is already released. It is probably the first one providing a workaround.

One thing I'm curious though. Why use a NOT selector? Isn't it more appropriate to show the toolbar at bottom even in customizing mode?

Aris-t2 · 2017-11-29T13:06:35Z

The toolbar is technically always below navigation toolbar. Keeping it on bottom in customizing mode causes dragging/dropping items there not to always work properly. At least that happened in my tests.

I found what was causing this issue. It will be fixed on next update.

lazycurl · 2017-12-01T03:00:54Z

One thing we missed. Simply add the following lines to apply background color/image based on selected theme.

File : "addonbar_move_bookmarks_toolbar_to_bottom.css"
CSS Selector : "#browser-panel > #navigator-toolbox > #PersonalToolbar"

background-repeat: no-repeat !important;
background-position: bottom left !important;
background-color: var(--lwt-accent-color) !important;
background-image: var(--lwt-footer-image) !important;

Aris-t2 · 2017-12-01T07:44:11Z

Thanks, I always forget the lw-theme stuff. ;-)

Many lw-themes stopped offering a footer image after add-on bar deprecation in Firefox 29 and this is still the case. As a result bookmarks toolbar keeps its "grey" in those cases. Unfortunately text may change color and shadow independently causing the toolbar to look weird. I suggest to reuse the top image: --lwt-header-image.

--->

#browser-panel > #navigator-toolbox > #PersonalToolbar:-moz-lwtheme {
  background-repeat: no-repeat !important;
  background-position: bottom left !important;
  background-color: var(--lwt-accent-color) !important;
  background-image: var(--lwt-header-image) !important;
}

Pizzapops · 2017-12-01T18:50:08Z

I like having the additional Add-ons bar but don't use the bookmarks bar. I prefer the bookmarks side panel. My solutions was to empty the Bookmarks Toolbar folder and change the padding in line 12 to -1. The top Bookmarks toolbar then is no longer visable. The add-ons disappear when the bookmarks bar is toggled off but the bar remains. This may be able to be avoided if browser-bottombox is collapsed when bookmarks toolbar is toggled off.

Aris-t2 · 2017-12-02T08:11:04Z

Why not simply moving "bookmark toolbar items" to toolbar palette?

You don't have to change the padding, if your bookmark items are not on navigation toolbar. The code is only triggered, if bookmark toolbar items are on navigation toolbar:

#nav-bar[currentset*="personal-bookmarks"]  {
  padding-bottom: 28px !important;
}

ghost · 2017-12-02T16:15:11Z

Addon bar is to dark in dark compat theme.

#323234 / #464646 is better than #000000.

Aris-t2 · 2017-12-02T16:51:31Z

You are right, although the default code from browser.css is used: chrome://browser/content/browser.css

:root[lwthemefooter=true] #browser-bottombox:-moz-lwtheme {
  background-repeat: no-repeat;
  background-position: bottom left;
  background-color: var(--lwt-accent-color);
  background-image: var(--lwt-footer-image);
}

I will replace --lwt-accent-color with --toolbar-bgcolor.

EDIT
I replaced the zip file with a new one.

lazycurl · 2017-12-02T17:48:59Z

Ooops, I'm too late?

This is exactly why I used filter in the first place. I did some enhancement for reference.

#main-window[lwthemetextcolor=bright] #browser-panel > #navigator-toolbox > #PersonalToolbar > .webextension-browser-action > .toolbarbutton-badge-stack {
	filter: drop-shadow(1px 1px 0.5px #bbb) drop-shadow(-1px -1px 0.5px #bbb) drop-shadow(-1px 1px 0.5px #bbb) drop-shadow(1px -1px 0.5px #bbb);
}
#main-window[lwthemetextcolor=dark] #browser-panel > #navigator-toolbox > #PersonalToolbar > .webextension-browser-action > .toolbarbutton-badge-stack {
	filter: drop-shadow(1px 1px 1px #222);
}

Without shadow :

With shadow :

I also noticed that the addon bar is visible in Javascript popup (window.open) with parameter "toolbar=no". It may affect the layout especially with small popup window. It can be fixed by updating css selectors. Now the addon bar will be hidden if "toolbar=no" is specified by web dev.

Find these 2 selectors :

#browser-panel > #navigator-toolbox > #PersonalToolbar
#main-window:not([inFullscreen=true]) #browser-bottombox

And replace with :

#main-window:not([chromehidden*="toolbar"]) #browser-panel > #navigator-toolbox > #PersonalToolbar
#main-window:not([chromehidden*="toolbar"]):not([inFullscreen=true]) #browser-bottombox

Aris-t2 · 2017-12-04T08:12:20Z

Thanks for the fix in chromehidden windows.

I will add your filter tweaks to the file "optionally".

ghost · 2017-12-05T22:57:22Z

[Win][Addon bar][bookmarks bar] Falling down button stop load / refresh page when use simulated addonbar and move bookmarks to navigation toolbar:

Tested on Windows 7 and Windows 10.

Pizzapops · 2017-12-06T21:36:32Z

[Win][Fxc59][Addon Bar][status] addonbar_status_inaddonbar.ccs does not take side panel into consideration. When the side panel is activated, status text moves to the right the width of the side panel.

Pizzapops · 2017-12-06T21:59:14Z

[Win][Fx59][Addon Bar][status] With both status and content on right activated, there is an empty space of 400px on the right side of the addon bar.

Aris-t2 · 2017-12-06T23:43:35Z

I've replaced the current zip with a new one: https://github.com/Aris-t2/CustomCSSforFx/releases

fixed sidebar + addonbar_status_in_addonbar.css issue
fixed empty space issue with addonbar_status_in_addonbar.css + addonbar_content_on_the_right.css
fixed dark lw-theme support

Pizzapops · 2017-12-07T00:22:01Z

Fast fix as usual. Thanks....

ghost · 2017-12-07T08:31:23Z

Space bars in simulated addon bar behave now as fexible space or longer:


2 spaces + icon 3 spaces + icon 3 spaces + icon 3 spaces + icon

❓

Aris-t2 · 2017-12-07T09:49:12Z

I was experimenting with "flexible spaces" on last update.

Once you move a toolbar out of the top box, like happens with bookmarks/add-on bar here, it looses some to its default features. In this case flexible spaces always keep their minimum width and never go towards their maximum width.

The experiment forces a higher minimum width once you place two or more flexible spaces in a row. The result is you don't have to add that many of them to get a bigger space.

One big issue with the toolbar is the possibility of losing content once it extends full window width.

Pizzapops · 2017-12-08T17:05:20Z

Double clicking on the "addonbar"/bookmarksbar makes FxQ maximize/minimize. This can be turned off with#PersonalToolbar {-moz-window-dragging: no-drag;}

Aris-t2 · 2017-12-08T21:58:35Z

Thanks.

ghost · 2017-12-12T15:26:34Z

Hmm... 1.5.1 working again with youtube script:
https://github.com/Zren/ResizeYoutubePlayerToWindowSize/

🤗

Before 1.4.9 - 1.5.0 cuts headign first line video names at end video:

before

after

Aris-t2 · 2017-12-12T17:39:33Z

CSS code in userChrome.css or called inside userChrome.css can not affect web content.
No idea how this fixes something, but good to hear things improved for you.

gashtal · 2017-12-29T09:26:13Z

Is it possible to disable the boxes around addon and back/forward icons so that they appear flat?

Aris-t2 · 2017-12-29T10:11:19Z

Yes, unset
@import url(./css/buttons/buttons_on_navbar_classic_appearance.css); /**/ inside userChrome.css.
-->
/* @import url(./css/buttons/buttons_on_navbar_classic_appearance.css); /**/

What exactly has this navigation toolbar button change to do with simulated add-on bar.

Null-Kelvin · 2020-06-07T11:36:36Z

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 · 2020-06-08T17:11:11Z

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 · 2020-06-11T00:35:35Z

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

Aris-t2 · 2020-06-11T12:30:25Z

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

kpedro88 · 2020-06-11T12:57:16Z

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.

B00ze64 · 2020-06-13T06:39:23Z

Good day.

Just started playing around with your archive Aris, and of course first thing I tried is the AddOn bar. Is there a way to have a border between the bar and the page? It normally isn't a problem with no border, most pages are a different color, but when you open the Findbar it kinda looks merged with the AddOn bar...

EDIT: Strange, I had a look at the code, there IS a border, but it's not showing for me unless I add the following variable: --toolbox-border-bottom-color: rgb(204,204,204);

Thanks.
Best Regards,

B00ze64 · 2020-06-14T04:15:59Z

I'm not sure what below is doing inside the AddOnBar CSS, this should be its own file. The middle portion of it is also causing the tracking protection shield to go invisible instead of turning blue when stuff is blocked (I'm using FF77):

/* remove animations */
#tracking-protection-icon-box[active][animate] #tracking-protection-icon-animatable-image,
#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-duration: 0ms !important;
}

#tracking-protection-icon-animatable-box,
#reload-button > .toolbarbutton-animatable-box,
#stop-button > .toolbarbutton-animatable-box {
  visibility: hidden !important;
}

#tracking-protection-icon-box:not([hasException])[active][animationsenabled] > #tracking-protection-icon {
  display: block !important;
}

Aris-t2 · 2020-06-14T07:49:35Z

@B00ze64
Relying on browsers default variables always causes issues. I will replace the border with a fixed value.

The animation removal was required, because animation position altered after the simulated add-on bar was created. Instead of trying to find values to match the correct position for every ui config (compact, normal, touch) and every Firefox version, I just removed it.

Edit:
It will be restored for Fx 77+ on next update.

B00ze64 · 2020-06-14T18:04:13Z

Hi Aris,

I commented out the animation block and I do not see anything out of place, stuff animates correctly at the correct positions. I don't really care one way or another for the shield turning blue, but it disappearing is kinda annoying, lol.

PS: While I'm not using a lot of the CSS in your package, you have some very nifty stuff in here, wow, thank you for all your work! My yellow folders in the bookmarks are back, woohoo! Still playing with it, gonna try content stuff today ;-) I'm upgrading from FF52 to FF77, LOTS of stuff to adjust and redo (they finally fixed AddOn CSP injection so now is the time to upgrade.)

Best Regards,

kpedro88 · 2020-06-14T19:56:44Z

Is there any way to force display of the full url in the status bar? Longer urls get abbreviated with "..." in the middle, even though there's plenty of space in the status bar. I tried adjusting the width of #statuspanel, but this didn't seem to have an effect.

Aris-t2 · 2020-06-15T10:21:57Z

@B00ze64
Most likely the code changed between Fx versions and the previous/old workarounds are not needed anymore. I have to look into this.

@kpedro88
This did not make it in 3.1.6 release, but you can replace addonbar_status_in_addonbar.css files content with the code below an change the value of --status-width variable:

new css

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

:root {
  --status-width: 400px;
}

.browserContainer :-moz-any(statuspanel,#statuspanel) {
  -moz-box-ordinal-group: 3 !important;
  position: fixed !important;
  display:block !important;
  bottom: 2px !important;
  z-index: 1001 !important
}

.browserContainer :-moz-any(statuspanel,#statuspanel):-moz-locale-dir(ltr) {
  left: 0px;
}
.browserContainer :-moz-any(statuspanel,#statuspanel):-moz-locale-dir(rtl) {
  right: 0px;
}

.browserContainer :-moz-any(statuspanel,#statuspanel) :-moz-any(#statuspanel-label,.statuspanel-label) {
  -moz-appearance: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  min-width: var(--status-width) !important;
  width: var(--status-width) !important;
  max-width: var(--status-width) !important;
  color: black !important;
}

.browserContainer :-moz-any(statuspanel,#statuspanel):-moz-lwtheme-brighttext :-moz-any(#statuspanel-label,.statuspanel-label) {
  color: white !important;
}


/* add space for status text on add-on bar */
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
  padding-left: var(--status-width) !important;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):-moz-locale-dir(rtl) {
  padding-right: var(--status-width) !important;
}

#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;
}

purgnoop · 2021-05-05T22:14:32Z

I'm having an issue with the addonbar in dev 89.0b8. The extra bar has moved up to below the bookmarks bar, and the spacing is weird on top of that.
https://i.imgur.com/tUpgtBL.png

@import "./css/toolbars/addonbar_extra_bookmarks_toolbar_below_navbar_fx65.css";
is the line i'm using to do this, it all worked a few versions ago, but i ignored updates for a while, so i'm unsure what version broke it.

Aris-t2 · 2021-05-06T15:41:04Z

Looks fine for me.

marty60 · 2021-05-31T17:35:53Z

Fixing autohide of the bookmarks toolbar on proton turned out to be easy. It was just changing two lines within 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;
display: block !important;
}

These lines changed from 0 to 1:

min-height: 1px !important;
height: 1px !important;

Aris-t2 · 2021-06-01T15:10:21Z

Thanks marty60.

Speravir · 2021-07-01T18:56:22Z

@Underx01 in #368 on 25th June:

In Firefox 89+, is it possible to change the color of the "Footer" through a style-code inside my_userChrome.css that can override a Firefox Theme?

If so, would be really appreciate the help with the code.
Thanks in advance for the info.

… and on 30th June:

Enabled it through the CustomCSSforFx feature “Simulate add-on bar by moving bookmarks toolbar to the bottom".

OK. I do not use this myself and did not test it, but looking into addonbar_move_bookmarks_toolbar_to_bottom.css this should work:

#navigator-toolbox > #PersonalToolbar:-moz-lwtheme {
  background-color: fuchsia !important;
  background-image: none !important;
}

Instead of fuchsia choose your favorite colour, cf. <color> - CSS (MDN). I’ve just use it here as very distinctive colour.

BrandtnerKPW · 2021-07-01T19:30:22Z

To set the background image for add-on bar as it was in themes before, using a custom theme, I'm using this code:

#main-window[style*='--lwt-header-image'] :-moz-any(#PersonalToolbar):-moz-lwtheme{
  background-repeat: no-repeat !important;
  background-position: bottom left !important;
  background-color: var(--toolbar-bgcolor) !important;
  background-image: url("./my_images/footer.png") !important;
}

With #navigator-toolbox > #PersonalToolbar:-moz-lwtheme { ... } the background image is only displayed when using standard lw-themes.

Underx01 · 2021-07-02T00:02:30Z

@Speravir
Thank you for the replies.
Unfortunately the code you provide works with few themes but not with the theme I created via
addons.mozilla.org/en-US/developers (same goes with the created theme via color.firefox.com)
The same issue with the code provided by @BrandtnerKPW (thank you aswell mate)

But got it working with the following code (within my_userChrome.css):
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar {
instead of
#navigator-toolbox > #PersonalToolbar:-moz-lwtheme {
or
#main-window[style*='--lwt-header-image'] :-moz-any(#PersonalToolbar):-moz-lwtheme{

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar {
 background-repeat: no-repeat !important;
 background-position: bottom left !important;
 background-color: fuchsia !important;
/* background-image: url("./images/footer.png") !important; /**/
}

Don't know why that works (I tried copying and pasting from addonbar_move_bookmarks_toolbar_to_bottom.css) but it works at least for my theme.
Hope this was helpful and thank you lads again for your help!

Aris-t2 · 2022-03-18T20:35:49Z

I think this does not need an own discussion anymore.
Use main thread: #454

Aris-t2 added DISCUSSION enhancement labels Nov 28, 2017

Aris-t2 changed the title ~~[add-on bar] - simulate 'add-on bar' by moving bookmarks toolbar to the bottom (issues and suggestions)~~ [ADD-ON BAR SUPPORT THREAD] - simulate 'add-on bar' by moving 'bookmarks toolbar' to windows bottom keeping bookmark items on top Nov 28, 2017

Aris-t2 removed the enhancement label Dec 10, 2017

HugoBo-SS mentioned this issue Dec 19, 2017

[Windows classic OS theme] black text color in the dark blue menu bar not visible #95

Closed

hemigary mentioned this issue Oct 9, 2020

bookmarks toolbar problem in firefox 78.3.1 #320

Closed

FrozenAsh1337 mentioned this issue Mar 29, 2021

Aero Glass theme not working #336

Closed

trofey mentioned this issue May 19, 2021

when i use "TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS" and "MOVE NAVIGATION TOOLBAR TO HIGHER POSITON" adressbar and buttons are lefter than it is posssible #346

Closed

CoSoCo mentioned this issue Jun 5, 2021

tabs_multiple_lines_fx81 -> corrupted tab size #370

Closed

bembosh mentioned this issue Jun 14, 2021

Multiple tabs blank space on FF89 Proton #388

Closed

Speravir mentioned this issue Jul 1, 2021

GENERAL discussion, feedback, questions belong here! (v12) #368

Closed

Aris-t2 added Support Thread and removed DISCUSSION IMPORTANT labels Jul 20, 2021

joefiesta mentioned this issue Dec 3, 2021

changing back/forward buttons #429

Closed

Aris-t2 closed this as completed Mar 18, 2022

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

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

Comments

Aris-t2 commented Nov 28, 2017

B00ze64 commented Nov 29, 2017

Aris-t2 commented Nov 29, 2017

lazycurl commented Nov 29, 2017 • edited

Aris-t2 commented Nov 29, 2017 • edited

lazycurl commented Dec 1, 2017

Aris-t2 commented Dec 1, 2017 • edited

Pizzapops commented Dec 1, 2017

Aris-t2 commented Dec 2, 2017

ghost commented Dec 2, 2017 • edited by ghost

Aris-t2 commented Dec 2, 2017 • edited

lazycurl commented Dec 2, 2017 • edited

Aris-t2 commented Dec 4, 2017

ghost commented Dec 5, 2017 • edited by ghost

Pizzapops commented Dec 6, 2017

Pizzapops commented Dec 6, 2017

Aris-t2 commented Dec 6, 2017

Pizzapops commented Dec 7, 2017

ghost commented Dec 7, 2017 • edited by ghost

Aris-t2 commented Dec 7, 2017

Pizzapops commented Dec 8, 2017

Aris-t2 commented Dec 8, 2017

ghost commented Dec 12, 2017 • edited by ghost

Aris-t2 commented Dec 12, 2017

gashtal commented Dec 29, 2017

Aris-t2 commented Dec 29, 2017

Null-Kelvin commented Jun 7, 2020

Aris-t2 commented Jun 8, 2020

kpedro88 commented Jun 11, 2020

Aris-t2 commented Jun 11, 2020

kpedro88 commented Jun 11, 2020

B00ze64 commented Jun 13, 2020 • edited

B00ze64 commented Jun 14, 2020

Aris-t2 commented Jun 14, 2020 • edited

B00ze64 commented Jun 14, 2020

kpedro88 commented Jun 14, 2020

Aris-t2 commented Jun 15, 2020

purgnoop commented May 5, 2021

Aris-t2 commented May 6, 2021

marty60 commented May 31, 2021 • edited

Aris-t2 commented Jun 1, 2021

Speravir commented Jul 1, 2021

BrandtnerKPW commented Jul 1, 2021 • edited

Underx01 commented Jul 2, 2021 • edited

Aris-t2 commented Mar 18, 2022

lazycurl commented Nov 29, 2017 •

edited

Aris-t2 commented Nov 29, 2017 •

edited

Aris-t2 commented Dec 1, 2017 •

edited

ghost commented Dec 2, 2017 •

edited by ghost

Aris-t2 commented Dec 2, 2017 •

edited

lazycurl commented Dec 2, 2017 •

edited

ghost commented Dec 5, 2017 •

edited by ghost

ghost commented Dec 7, 2017 •

edited by ghost

ghost commented Dec 12, 2017 •

edited by ghost

B00ze64 commented Jun 13, 2020 •

edited

Aris-t2 commented Jun 14, 2020 •

edited

marty60 commented May 31, 2021 •

edited

BrandtnerKPW commented Jul 1, 2021 •

edited

Underx01 commented Jul 2, 2021 •

edited