[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?).

[B00ze64]

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

[Aris-t2]

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]

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]

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]

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]

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]

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]

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]

Addon bar is to dark in dark compat theme.

#323234 / #464646 is better than #000000.

[Aris-t2]

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]

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]

Thanks for the fix in chromehidden windows.

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

[ghost]

[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]

[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]

[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]

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

• fixed _sidebar + addonbar_status_inaddonbar.css issue
• fixed empty space issue with _addonbar_status_in_addonbar.css + addonbar_content_on_theright.css
• fixed dark lw-theme support

[Pizzapops]

Fast fix as usual. Thanks....

[ghost]

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

:question:

[Aris-t2]

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]

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

[Aris-t2]

Thanks.

[ghost]

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]

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]

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

[Aris-t2]

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.

[gashtal]

Great, thank you. I must have missed that option when I was checking the userChrome.css file earlier.

[Pizzapops]

[Win10-64][FxQ59]{Aris1.5.6] Did today's FxQ update break the add-on bar on the bottom for anyone else? I tried using the three previous versions of Chrome (153-155) with the same results. Everything is back below the location bar.

[Pizzapops]

A couple more observations. Moving the Bookmarks Toolbar Items to the Location Bar creates a bookmarks bar below the location bar with add-ons bar below it. Any flexible spaces in the add-ons bar are no longer removable. There is a bottom bar that shows nothing and cannot be customized.

[Aris-t2]

Mozilla removed #browser-panel node. CSS code based on it or using it got ignored. 1.5.7 fixes that.

Moving the Bookmarks Toolbar Items to the Location Bar creates a bookmarks bar below the location bar with add-ons bar below it.

This is a feature of simulated add-on bar option. Bookmarks items are almost unusable on bookmarks toolbar once it becomes the simulated add-on bar and cheating another bookmarks toolbar was a nice workaround to keep bookmarks on top.

Edit _addonbar_move_bookmarks_toolbar_tobottom.css and remove the code marked on screenshot to "disable" this feature.

Flexible spaces on simulated add-on bar are removable via drag&drop in customizing mode.

The "empty bottom bar" is a Fx 59 bug occurred once "simulated add-on bar" was active. It is fixed in 1.5.7.

[Pizzapops]

@Aris-t2 Thanks for the quick fix, as usual. I upgrade to 1.5.7, added all my mods and am back to normal.

1.5.7 doesn't include the mod you posted to move icons to the left on addonslist. To be added? Any possibility of a mod to the left side of the addonslist? (drop the text & narrow)

[Aris-t2]

I can add this on next update.

[LionWrathz]

can you please make it black transparency or black like this

On 19 January 2018 at 12:50, Aris notifications@github.com wrote:

I can add this on next update.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Aris-t2/CustomCSSforFx/issues/73#issuecomment-358903290, or mute the thread https://github.com/notifications/unsubscribe-auth/ANXvJZ1AuGj0tlznYu6iNGn08TGGESTLks5tMFdVgaJpZM4QtrxU .

[Aris-t2]

@LionWrathz Sorry, I don't see any example in your post. Normally transparency is controlled by the OS (or an application like Glass8 on Win8/10). You only need to enable the toolbar transparency files or the AeroGlass files of this project.

It looks like this for me:

• color variables > AeroGlass
• appbutton in titlebar > transparent
• toolbars > simulated add-on bar option (bookmark items in navigation toolbar)

[LionWrathz]

one more thing about tooltips i run this code

but this one on google icon and other buttons onsearchbar search box icon tooltips it still white can you make it black.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul );

tooltip { -moz-appearance: none !important; background: black !important; opacity: 0.8 !important; border: 1px solid black !important; border-radius: 3px !important; color: white !important; }

tooltip label { color: white !important; border: 1px solid black !important; border-radius: 3px !important; }

menubar, menupopup > * { color: red !important; background: black !important; opacity: 0.8 !important; border: 1px solid black !important; border-radius: 3px !important; color: white !important; }

On 19 January 2018 at 21:04, Aris notifications@github.com wrote:

@LionWrathz https://github.com/lionwrathz Sorry, I don't see any example in your post. Normally transparency is controlled by the OS (or an application like Glass8 on Win8/10). You only need to enable the toolbar transparency files or the AeroGlass files of this project.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Aris-t2/CustomCSSforFx/issues/73#issuecomment-359028150, or mute the thread https://github.com/notifications/unsubscribe-auth/ANXvJQDMpW74PFRBR-NfDwBRfmlUeB_eks5tMMsJgaJpZM4QtrxU .

[Aris-t2]

Not every tooltip can be styled. It depends on how Firefox creates or applies them. Some are indeed "tooltip" boxes/items, they can be styled by your code for example. But if ui elements use an internal tooltips via "tooltiptext" attribute, they can not be styled.

Note Don't use "@namespace" inside your code. Not only is it worthless, it also breaks css code functionality in many cases.

[LionWrathz]

Thank you for your advice. I will do as you said, and i removed all " @namespace https://github.com/namespace" now its all good. :)

On 19 January 2018 at 21:41, Aris notifications@github.com wrote:

Not every tooltip can be styled. It depends on how Firefox creates or applies them. Some are indeed "tooltip" boxes/items, they can be styled by your code for example. But if ui elements use an internal tooltips via "tooltiptext" attribute, they can not be styled.

Note Don't use "@namespace https://github.com/namespace" inside your code. Not only is it worthless, it also breaks css code functionality in many cases.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Aris-t2/CustomCSSforFx/issues/73#issuecomment-359038163, or mute the thread https://github.com/notifications/unsubscribe-auth/ANXvJQPmdHO9z4PtklHlXE7oU7PuVmGaks5tMNPSgaJpZM4QtrxU .

[nomis]

With 1.5.8 and 57.0.4, I have to change 50vw to 100vw here, otherwise my Bookmarks Toolbar that contains only one "Bookmarks Toolbar Items" occupies the left 50% of the toolbar.

#PersonalToolbar:not([currentset="personal-bookmarks"]) #personal-bookmarks {
  min-width: 40px !important;
  width: auto !important;
  max-width: 50vw !important;
}

[Aris-t2]

Those values depend on windows width, so they may offer different results for different users.

100vw seem to be good, if you only have bookmarks on it, but the main idea behind this option was to place buttons there and move bookmarks to navigation toolbar, so they "create" another bookmarks toolbar below navigation toolbar.

[rayman89]

@Aris-t2 Firefox 59 b2 developer broke the css.

[Aris-t2]

Are you using latest files from this project? The issue you are mentioning seems to be similar to the one mentioned above (~4 days ago) and was fixed in v1.5.7 https://github.com/Aris-t2/CustomCSSforFx/releases .

[rayman89]

@Aris-t2 Seems to be although I'm on firefox not chrome. Is there a way to quick update or do I have to re configure it all from scratch?

[Aris-t2]

Download the latest files from release area and extract them into your Firefox profile folders "chrome" subfolder. This has nothing to do with Google Chrome.

If this is the only issue you have, only replace existing css subfolder with the one from zip file.

[rayman89]

@Aris-t2 The update did fix the issue but all the customizatiosn I did like changing the type of tabs their height etc was lost. Would be possible in the feature to have like an extra text file to enable disable things using that so that is easier to update without loosing all your config?

[Aris-t2]

Backup your files before replacing. Compare settings afterwards.

Remember all files in config folder and userChrome.css/userContent.css files are basically what you describe. They contain what you changed.

You can use an own userChrome.css file and only add stuff you need to it from release files. You can also only update the files you need. In this case everything related to simulated add-on bar.

[rayman89]

@Aris-t2 Does that mean that there are no plans for the feature to implement a way to update easily without having to compare all the files?

[Aris-t2]

No. how would a way like this look like? I have no plans to create an external application for this.

And you don't have to compare "all" files, just the ones changed. Visit the "commits" link on main page or the link posted inside release changelog. It lists changed files and you only have to replace those you are using, if they cause issues.

[shogunreaper]

would it be possible to move the overflow toolbar to the bottom?

[krystian3w]

/* autohide (top) bookmarks when using addonbar simulator -  ⚠️  pre alpha ⚠️  */

/* abandoned / discontinued */

```css #personal-bookmarks { opacity: 0 !important; transition: all 0.5s ease 0s !important; } #main-window:not([customizing="true"]) #nav-bar[currentset*="personal-bookmarks"] { padding-bottom: 0px !important; opacity: 1.0 !important; transition: all 0.5s ease 0s !important; } #main-window:not([customizing="true"]) #nav-bar[currentset*="personal-bookmarks"]:hover { padding-bottom: 28px !important; opacity: 1.0 !important; transition: all 0.5s ease 0s !important; } #main-window:not([customizing="true"]) #nav-bar[currentset*="personal-bookmarks"]:hover #personal-bookmarks { opacity: 1.0 !important; transition-delay: 0s !important; margin-top: 28px !important; } #personal-bookmarks { -moz-window-dragging: no-drag !important; } ```

/* autohide (top) bookmarks when using addonbar simulator - ⚠️  pre alpha ⚠️  */

---

Warning:

bad works in fullscreen mode:

• break navigation (disapear and no raction to move mouse to top),
• cut a little head website too.

abandoned / discontinued

[Aris-t2]

@shogunreaper

You can cheat status popup into simulated add-on bar using css/toolbars/addonbar_status_in_addonbar.css. If you mean something else by "overflow toolbar", enlighten us. ;-)

@krystian3w Good job.

[shogunreaper]

i was just wondering if there was a way to get the addonbar back without using the bookmarks toolbar, as i already use that.

and i don't use the overflow toolbar part so it would be a good substitute if it was possible.