Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.86k stars 181 forks source link

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

Closed Aris-t2 closed 2 years ago

Aris-t2 commented 6 years ago

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

bookmarks addonbar

Aris-t2 commented 6 years ago

If simulated add-on bar is enabled, move the bookmarks item from bookmarks toolbar to navigation toolbar in customizing mode and another bookmarks toolbar will magically appear where it should be. ;-) You can only use bookmarks there. It looks like on the screenshot in first post.

shogunreaper commented 6 years ago

yeah but it says "not compatible to 'bookmarks toolbar - multiple lines' option"

Aris-t2 commented 6 years ago

Well, not everything is possible.

shogunreaper commented 6 years ago

so its not possible to move the overflow toolbar below?

Aris-t2 commented 6 years ago

I still don't know what you mean by "overflow toolbar". There is a menubar, tabs toolbar, navigation toolbar and bookmarks toolbar. CTR restored the add-on bar on Fx29-56.

If you use the simulated add-on bar, you can move the status popup (appearing when hovering links for example) into that simulated add-on bar. When you move the bookmarks item to navigation toolbar, you get another toolbar below navigation toolbar containing your bookmarks.

shogunreaper commented 6 years ago

if you go into customize you have the option of moving addon icons to the overflow menu.

https://i.imgur.com/e3VOUHN.png

Aris-t2 commented 6 years ago

The overflow menu is a menu not a toolbar and it can not be moved or transformed into a toolbar.

jaredbidlow commented 6 years ago

I moved my addons to the tab bar while retaining Tree Style Tab sidebar but I want to hide the actual tab selection/left right arrows around the tabs, but not the whole tab bar. Is this possible?

Aris-t2 commented 6 years ago

You can hide tab toolbars scroll arrows with this code:

.scrollbutton-up, .scrollbutton-down {
  display: none !important;
}
krystian3w commented 6 years ago

Hello, Is I broken the icon or Mozilla? The privacy icon has begun to fall.

image

https://www.mozilla.org/en-us/firefox/63.0/tracking-protection/start/

When I remove "Bookmarks Toolbar Items" icon is vertical align perfect.

image

Firefox 63 RC1, Windows 7 Pro - Classic Theme, DPI 125 / 120%
Aris-t2 commented 6 years ago

Post a screenshot of your full window.

Aris-t2 commented 6 years ago

Try to add this code to your userChrome.css

#tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
  top: 6px !important;
}

For some reason Mozilla calculates the position of tracking icons animation box based on navigation toolbar height. Using bookmarks items on navigation toolbar with simulated add-on bar leads to a miscalculation by Firefox. I hope the above code fixes the glitch for you.

krystian3w commented 6 years ago

Code do not fix this, is to high:

image

Added +4px and will work for me:


/* tracking protection */

#tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
  top: 10px !important;
}

/**/
Aris-t2 commented 6 years ago

There is a difference between compact and default/touch toolbar modes. That is why we have different results.

#main-window[uidensity=compact]:not([customizing="true"]) #nav-bar[currentset*="personal-bookmarks"] #tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
  top: 6px !important;
}

#main-window:not([uidensity=compact]):not([customizing="true"]) #nav-bar[currentset*="personal-bookmarks"] #tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
  top: 10px !important;
}

I hope Mozilla did not add more of this stupid animation boxes there. Seriously what is wrong with them? Why not simply animate the already available tracking protection icon by switching it with a animated png for 2-3sec? I just don't get these guys.

BrandtnerKPW commented 5 years ago

I used only "tabs_below_navigation_toolbar", "missing_tab_favicon_restored_default", "addonbar_move_bookmarks_toolbar_to_bottom" and "addonbar_content_on_the_right" features in "userChrome.css" (v2.1.8). And after update to FF Nightly 65.0a1 bookmarks toolbar is no longer below the navigation toolbar. It shows on it between search bar and menu button.

Also, I moved the downloads button to the add-on bar, and it fell down, almost like the privacy icon mentioned above. I was able to raise the icon to its place using this code, but now it does not display the download animation and is not highlighted at the end:

#downloads-button[cui-areatype="toolbar"] .toolbarbutton-icon {
  display: -moz-box !important;
}

How can I fix this?

Aris-t2 commented 5 years ago

I can confirm the downloads button glitch, but it has to be fixed differently. Next update will take care of this.

I can not reproduce your other major issue when using the full release package. Extract 2.1.8 to chrome folder again, edit userChrome.css and enable the settings you listed. Works fine for me on Nightly 65.

If things don't work, list more info about your OS and post a screenshot.

BrandtnerKPW commented 5 years ago

Bookmarks toolbar still on navigation toolbar. I have this issue even with new profile (in portable build). Windows 10 1803 Firefox Nightly 65.0a1 (2018-10-28) (64-bit) default default

Aris-t2 commented 5 years ago

OK, now we are getting somewhere. Not the bookmarks toolbar itself stays on navigation toolbar, but the "Bookmarks Toolbar Items" do not get moved to a new toolbar below navigation toolbar.

Mozilla removed the node "currentset" from Firefox, so this can not be done automatically anymore. I will move the code required to create the additional bookmarks toolbar to an own option on next update.

krystian3w commented 5 years ago

Hello:

/* personal-bookmarks 100% */
#main-window:not([customizing="true"]) #nav-bar[currentset*="personal-bookmarks"]:not([currentset*="personal-bookmarks-"]) #personal-bookmarks {
    width: 100vw !important;
}

#main-window:not([customizing="true"]) #nav-bar[currentset*="personal-bookmarks"]:not([currentset*="personal-bookmarks-"])  #PlacesToolbar {
    width: 100vw !important;
}

Possible better solution to real width without a hole on the right, where is it impossible put the link?

Aris-t2 commented 5 years ago

Sorry, I don't get what you are asking for. Post comparable screenshots.

krystian3w commented 5 years ago

I cannot put link in red place:

obraz

cursor from arrow become as black :no_entry_sign:.

Aris-t2 commented 5 years ago

If you are using the second bookmarks toolbar and it does not matter, if you are using the standalone version or together with simulated add-on bar, your bookmarks fill the toolbar till the end. Of course you have to have enough of them there. Once there are more bookmarks the >> button appears.

tb

krystian3w commented 5 years ago

So, my CSS possible hide ">>" if will more favorites be in it?


I do not use another experiment to not catch the bug as with icons (that part of me does not work from "old firefox 45").

Wullfk commented 5 years ago

Good evening, I'm new, I've just registered after having read most of the posts at length I would like to have the module bar in FF 65 without having to install the Classic Theme Restorer (CTR) extension so using your CSS codes

Here is a screenshot taken from the first post of Aris-t2 Mon image

in advance thank you for the help you can provide me

krystian3w commented 5 years ago

Try this:

EDIT https://github.com/Aris-t2/CustomCSSforFx/releases

I removed all other css and activated "addonbar_move_bookmarks_toolbar_to_bottom.css"

Wullfk commented 5 years ago

Hy,

Thank you for you reply, I'll try your CSS file as soon as possible

Try this: ...

Sorry but your solution doesn't suit me, since it puts my personal bar at the bottom, it's not what I want, I'm looking to have the famous module bar at the bottom as CTR or the extension "the_addon_bar_restored-3.2.9" could allow

krystian3w commented 5 years ago

So maybe this works good:

https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar.uc.js

https://github.com/Aris-t2/CustomJSforFx#custom-js-scripts-for-firefox-quantum


For my works too bad with Firefox 65 - https://github.com/Aris-t2/CustomJSforFx/issues/12 - slowdown any pop-ups when try fix load homepage after start Firefox. Workaround use recover last session mechanism.

Wullfk commented 5 years ago

Thanks for the links provided, I scrupulously followed method 2 (in second link), I don't know what to do with the script folder, or more simply where to put the file "addonbar.uc.js" because for now I still don't have the module bar at the bottom.

krystian3w commented 5 years ago

Windows / GNU/linux / macOS/OS X?

Wullfk commented 5 years ago

Windows 7

krystian3w commented 5 years ago

So try this:

Wullfk commented 5 years ago

Yes this time it works I have the module bar at the bottom, if it is possible to refine the thing a little, what is that it is necessary to modify in the js code so that the icons of the modules are placed on the right in the bar.

in any case thank you for the files provided

krystian3w commented 5 years ago

Use one "flexible space" before first icon?

efect:

obraz
krystian3w commented 5 years ago

Or try use verticaly version:

"placed on the right in the bar"

https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar_vertical.uc.js

Wullfk commented 5 years ago

Indeed I hadn't thought of putting a flexible space. I think this time everything's okay. On the other hand, the manipulation is not so obvious, since you have to modify some folders in the Firefox installation file, I thought it could be solved by simply injecting CSS code, but I notice that for this simple module bar it is Javascript

Anyway, thank you for your precious help, I will come back if I have other ideas in mind.

Good night

Sincerely

krystian3w commented 5 years ago

M1 can still works with moddify only profile firefox.

Wullfk commented 5 years ago

Okay, that's good to know.

Thank you.

Wullfk commented 5 years ago

Hello,

I tried to add other scripts in my Firefox profile that are present in the "CustomJSforFx" archive for example "restart_button.uc.js" that I have placed in the folder "userChrome" and I have modified the file "userChrome.js" accordingly but I don't see any restart button anywhere

I don't see well or I may have made a mistake

krystian3w commented 5 years ago

M1, maybe you not added:

toolbarbutton#alltabs-button {
  -moz-binding: url("./userChrome/userChrome.xml#execute_javascript_code");
}

to your userChrome.css / my_userChrome.css?

Wrong path contains in chrome catalog....?

of course, I'm guessing.

Wullfk commented 5 years ago

I used the M2 method so I don't know if the proposed CSS code does not work well

moreover for the moment I carry out my tests on a blank profile of Firefox, but then once I have all the elements as I wish I count I apply the thing on my current profile which already has a file "userChrome.css" composed myself and which gives me whole satisfaction, therefore to this file I will have to include the code that you provided me if I go through the M1 method

rddim commented 5 years ago

Hello there, How can I reduce the height of the bookmarks and of the add-on bar in FF 65? I'm still using v56.0.2 because of some add-ons (CTR, TMP, DTA and etc.) but i have problems with some websites and I think to upgrade to the latest FF.

Aris-t2 commented 5 years ago

How small do you need those toolbars to be?

krystian3w commented 5 years ago

Number on addon should show above at addon bar, as in Firefox 52 ESR / 56.

Aris-t2 commented 5 years ago

I will make simulated add-on bars height configurable on next update. A height value of 20px will be possible for example.

rddim commented 5 years ago

@Aris-t2, yes, both are about 20px

If I can get FF as at the image it will be great. firefox_56_bm_ab

Aris-t2 commented 5 years ago

That is possible.

GrosBourrin commented 5 years ago

hello, I have a problem with this script, i don't know why but it stops my homepage loading setted in firefox prefs it results a blanck screen ! then when i reload FF sometimes my page loads or not ! i have deactivated the script by renaming it with ".txt" extension, put the css part (in userChrome) between "/ /" then restart FF and it loads my homepage correctly ! don't know why ! (sorry for my bad english but this is not my language)

krystian3w commented 5 years ago

This is stylesheet no script...

krystian3w commented 5 years ago

Bug with script reported here https://github.com/Aris-t2/CustomJSforFx/issues/12 1 month ago

Workaroud - use settimeout with value 1000 ms - 10000 ms to property load hompepage.

GrosBourrin commented 5 years ago

well you"re right about stylesheet ! sorry my english ois limited i'm french....i'll look forward to see if it works ,i'll tell you the result