[!] GENERAL discussion, feedback, questions belong here! (v10) #273

Aris-t2 · 2020-01-15T16:20:24Z

Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!

Continued from #3, #41, #88, #109, #133, #163, #189, #211 and #241.

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

Custom JS scripts to restore more classic features
https://github.com/Aris-t2/CustomJSforFx

Things this project will not target/recreate

a CTR like plugin/application to generate ready-to-use CSS
curved tabs (thanks those are finally gone!)
old complete themes

Things not possible with CSS

more toolbars like add-on/status bar (CSS can not create new toolbars)
- displaying full sized status popup below window content is possible
- bookmarks toolbar at windows bottom is possible (simulated addon-bar)
new buttons (CSS can not create new buttons)
additional menuitems (CSS can not create new items)
custom/new/different functions for buttons/menuitems/menus
activity indicator (see 'custom JS scripts')
preference/options window
additional location bar
favicon in location bars identity box (see 'custom JS scripts')
moving menubar items to a different toolbar
restart button (see 'custom JS scripts')
... many more

Michas0206 · 2020-01-16T14:35:28Z

Hi,
after updating Firefox to 72.0.1 and CustomCSSforFx to 2.9.9 v3, I have the problem that my new-tab-button '+' is not positioned beside the tabs, instead it is positioned to the right of the tab-bar...and I am not able atm to get it back to the right-most tab where it was before.

Any hints how to get it where it was?

@import "./css/tabs/tabs_below_navigation_toolbar_fx72.css" is activated, not sure what exactly causing this....trying to manually position it to the tabs within Ff itself or pressing 'back to default' does not change its position.

Speravir · 2020-01-16T19:38:41Z

@aris, you in #241:

The #PlacesDropIndicator is visible when bookmarks are moved within bookmarks toolbar.

Given the ID name I guessed something in this direction, but for me there is no indicator visible. Is it perhaps because of multiline bookmarks?

Aris-t2 · 2020-01-16T19:51:25Z

@michas0602
Does this also happen without having any custom scripts or styles inside chrome folder?
In this projects default setup when enabling tabs_below_navigation_toolbar_fx72.css the new tab tab is still besides the last tab. Not sure what is causing this for you, but you might want to try setting up a new browser profile for testing.

@Speravir
You are right, there is no indicator shown using a multiline bookmarks environment.

There is code there to hide it, but even without it the dropmarker does not appear.

DBGulp · 2020-01-19T08:44:03Z

Hi @Aris-t2
I updated from Fx69 to 72 with 2.9.9v3 on Windows 10. I have the bookmark toolbar at the bottom. If I activate "./css/buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css" my buttons are stacked upon each other, fanned like cards. It was fine in 69. Not active, looks OK but with an undesirable gap between buttons. Hopefully, you have some direction for me to get this working?

I am using MultiRowTabLiteforFx.uc.js from Quantum-Nox for Multirow tabs that are movable.
https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme/tree/master/Multirow%20and%20other%20functions/Multirow%20tabs

This forces me to change your userChrome.css file to userChrome.as.css (Everything else looks good)

I am pleased with the appearance of my Fx, thanks to your hard work and the multirow and movable tabs working together.

Is there a way to get rid of the update nag? I don't update often because of the time involved in resetting Firefox to my liking (if possible). I was on 52 ESR for as long as possible to keep CTR! :)

Aris-t2 · 2020-01-19T10:13:51Z

Are you using addonbar_move_bookmarks_toolbar_to_bottom_fx72.css? That one is required since Fx 72 and the result looks like this:

(buttons_on_bookmarks_toolbar_old_size_and_appearance.css is enabled by default using this projects complete package.)

Try this:

backup your chrome folder
extract the content of 2.9.9v3 there
edit userChrome.css and enable addonbar_move_bookmarks_toolbar_to_bottom_fx72.css

Michas0206 · 2020-01-19T16:12:52Z

@Aris-t2 You were right, my '+'-button-problem is solved by reinstalling the files. Unfortunately I did no copy to verify what exactly caused it...however, not it works as it should.

Many thanks for all your efforts, now Ff looks as it should (again).

DBGulp · 2020-01-19T17:52:05Z

Yes, I'm using addonbar_move_bookmarks_toolbar_to_bottom_fx72.css.
I'm using this projects complete package.

Aris-t2 · 2020-01-19T18:29:41Z

@DBGulp
Look at my screenshot above.
Latest build, default configuration and Fx 72, so the issue my be caused by something else on your end. Try to setup everything from the scratch using Portable Firefox.

DBGulp · 2020-01-19T18:57:49Z

So far, I have a new profile to test with and all my chrome being the same, the problem isn't there. The test profile has the referenced line active, while my normal profile doesn't.

No addons are active yet. Maybe the issue is there or just starting a fresh profile might be the answer.

No more testing today. Go Chiefs!

DBGulp · 2020-01-19T20:06:25Z

It's the Flexible Space. Under Fx69 (and lower) I needed to use multiple flexible spaces to get buttons all the way to the right. Under Fx72 only one is necessary. More than one side by side crunches the buttons at both ends.

Aris-t2 · 2020-01-20T17:40:27Z

You are right more than one flexible space causes massive glitches.

I have not found a good solution for this yet.

nollinvoyd · 2020-01-20T22:08:36Z

I just upgraded to Fx72.02 & 2.9.6 v2.

usercontent.css was updated, but the I have the same 68+ items "enabled".

This is what I had with Fx 71

Now this

Is this all we can expect at this point?

Aris-t2 · 2020-01-21T09:39:16Z

Enable the "_fx72" versions of your previously selected "options".

JoseHidalgo · 2020-01-21T11:16:51Z

Hi, and HUGE thanks @Aris-t2 for your continuous work on this ! You are a savior for a lot of us !
I've just installed latest version, with latest FF version and my usual tweaks. So far so good !

Question : is there a simple way to have a dark mode for about:addons and about:config ?
Pages such as about:memory and about:plugins show already in dark mode (I honestly don't remember how, but I like it that way). However, about:addons and about:config don't.
If it's too complicated then just forget about it, lol.

Aris-t2 · 2020-01-21T12:20:25Z

@JoseHidalgo
about:config > ui.systemUsesDarkTheme > 1 (number pref)
about:config > browser.in-content.dark-mode > true (boolean pref)

nollinvoyd · 2020-01-21T23:00:58Z

Firefox 72.02, Just updated to version 2.9.9_v3

Tried to enable these, one at a time

/* Tab scroll buttons position - [only use one at a time] *********************************/
/ @import "./css/tabs/tab_scrollbuttons_both_on_toolbars_start.css"; //
/ @import "./css/tabs/tab_scrollbuttons_both_on_toolbars_end.css"; //

and got these results

Start

End

The only effect was to create these blank spaces, and remove the scroll button from the left side of the tab bar when

@import "./css/tabs/tab_scrollbuttons_both_on_toolbars_end.css"; /**/ was enabled.

Tested with myuserchrome.css disabled.

Aris-t2 · 2020-01-22T12:16:38Z

Looks like achieving this result with -moz-box-ordinal-group rule is not possible anymore due to internal code changes. ~~I have not found a workaround yet.~~

Test this.

tab_scrollbuttons_both_on_toolbars_start_fx72.css

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

#tabbrowser-tabs {
  --group_zero: inherit;
  --pin_tab1: inherit;
  --pin_tab2: inherit;
  --pin_tab3: inherit;
  --pin_tab4: inherit;
  --pin_tab5: inherit;
  --pin_tab6: inherit;
  --pin_tab7: inherit;
  --pin_tab8: inherit;
  --pin_tab9: inherit;
  --pin_tab10: inherit;
}

#tabbrowser-tabs[overflow="true"] {
  --group_zero: 1000;
  --pin_tab1: -88px;
  --pin_tab2: -118px;
  --pin_tab3: -148px;
  --pin_tab4: -178px;
  --pin_tab5: -208px;
  --pin_tab6: -238px;
  --pin_tab7: -268px;
  --pin_tab8: -298px;
  --pin_tab9: -328px;
  --pin_tab10: -358px;
}

spacer[part="arrowscrollbox-overflow-start-indicator"] + scrollbox[part="scrollbox"]{
  -moz-box-ordinal-group: var(--group_zero) !important;
}

/* Fix pinned tabs position for the first 10 pinned tabs (follow the system for more pinnen tabs) */
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab1) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab2) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab3) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab4) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab5) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab6) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab7) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab8) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab9) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab10) !important;
}

tab_scrollbuttons_both_on_toolbars_end_fx72.css

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

#tabbrowser-tabs {
  --group_zero: inherit;
  --pin_tab1: inherit;
  --pin_tab2: inherit;
  --pin_tab3: inherit;
  --pin_tab4: inherit;
  --pin_tab5: inherit;
  --pin_tab6: inherit;
  --pin_tab7: inherit;
  --pin_tab8: inherit;
  --pin_tab9: inherit;
  --pin_tab10: inherit;
}

#tabbrowser-tabs[overflow="true"] {
  --group_zero: 0;
  --pin_tab1: -30px;
  --pin_tab2: -60px;
  --pin_tab3: -90px;
  --pin_tab4: -120px;
  --pin_tab5: -150px;
  --pin_tab6: -180px;
  --pin_tab7: -210px;
  --pin_tab8: -240px;
  --pin_tab9: -270px;
  --pin_tab10: -300px;
}

spacer[part="arrowscrollbox-overflow-start-indicator"] + scrollbox[part="scrollbox"]{
  -moz-box-ordinal-group: var(--group_zero) !important;
}

/* Fix pinned tabs position for the first 10 pinned tabs (follow the system for more pinnen tabs) */
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab1) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab2) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab3) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab4) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab5) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab6) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab7) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab8) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab9) !important;
}
#tabbrowser-tabs[overflow="true"] .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] + .tabbrowser-tab[pinned] {
  margin-inline-start: var(--pin_tab10) !important;
}

nollinvoyd · 2020-01-23T19:45:48Z

I processed the changes. Several things happening now.

The directional buttons are appearing in tandem on the proper sides given the option that is enabled
The blank spaces ares still present
I have two pinned tabs. When these options are enabled, the position of these pinned tabs have been switched, with the rightmost pinned tab partially obscurred

Both options disabled left side

Start left

Start right

End Right

End left

TroudhuK · 2020-01-24T22:51:26Z

#241 (comment)
=> Fixed in v72.0.2! Finally an update that improves instead of breaking my Firefox ^^

nollinvoyd · 2020-01-25T00:59:57Z

@Aris-t2

I forgot to disable myuserchrome.css last time I reported, so it looks ok now. I'll try to see what was causing it.

ryuukenzenkou · 2020-01-25T08:10:04Z

first of all thanks for your hard work. i've been an user of your stuff for years allowing me to have firefox the way i want. but now seems like mozilla tries hard to break the ui more and more. sigh..
well i found this issue after updating from v70.

dont know what produces it. it was fine before.
also the text on the tabs goes so low that looks like there's no text on the tab title, same with the close button. also the zoom control doesnt looks that good..

Aris-t2 · 2020-01-25T08:22:22Z

@ryuukenzenkou

You initial screenshot in the other thread pointed out, that layout.css.xul-box-display-values.survive-blockification.enabled was set to false on your system. This causes major issues even on default configuration without any modifications. Verify that pref is set to true inside about:config.

krystian3w · 2020-01-25T15:07:16Z

layout.css.xul-box-display-values.survive-blockification.enabled

Or update to Beta 73.

nollinvoyd · 2020-01-25T18:55:40Z

@Aris-t2

I forgot to disable myuserchrome.css last time I reported, so it looks ok now. I'll try to see what was causing it.

krystian3w · 2020-01-25T18:58:59Z

Duplicate @nollinvoyd: #273 (comment)

JoseHidalgo · 2020-06-07T14:56:18Z

Thanks @Aris-t2 for your work. I've done it and it works. Only now the text in the URL bar is smaller than it used to be...

These FF updates are so annoying! With every new update I have to spend HOURS tweaking your settings over and over again. Isn't there any simpler way?...

rayman89 · 2020-06-07T15:10:23Z

@Aris-t2 The issue with the app button is that I want it to make it less wide and increase the height and move the button a little bit lower but I edit this values

/* appbutton */
#main-window[tabsintitlebar] #PanelUI-button {
  -moz-appearance: none !important;
  -moz-box-ordinal-group: 0 !important;
  position: fixed !important;
  display: flex !important;
  height: 22px !important;
  margin: 0 !important;
  -moz-margin-start: 1px !important;
  border: unset !important;
  box-shadow: unset !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

on the file appbutton_in_titlebar_icon_only_fx74.css which is the one that I have enabled and nothing changes. What file do I have to edit to change that? Thank you in advance

Peacock365 · 2020-06-08T08:07:03Z

I wonder if anyone can replicate this issue:

I am getting a weird appearance when I am using the following CSS snippets:

classic_squared_tabs.css
tab_maxwidth.css (maximum width set to 250)
tabs_below_navigation_toolbar.css
tabs_below_navigation_toolbar_fx65_v2.css
tabs_below_navigation_toolbar_fx68.css
tabs_below_navigation_toolbar_fx72.css
tabs_below_navigation_toolbar_fx74.css

Basically, I want to have classic squared tabs, 250 pixel long, right below the bookmarks toolbar.

I am using Firefox 77.0.1 (vanilla config apart from the CSS changes) on Windows 8.1, with a theme from AMO.

I am getting a weird space below the tabs, the tabs themselves show up correctly. Can anyone confirm? @Aris-t2 ?

hopalongrock · 2020-06-08T10:51:43Z

Fx 77.0.1+, CustomCSSforFx 3.14 Windows 10
addons_manager_alternative_appearance_fx75

Is it possible to remove the blue background color of a selected addon in addonlist?

Is it possible to show the enable/disable switch on the Recent Updates too as on Extensions?

Aris-t2 · 2020-06-08T17:45:11Z

@JoseHidalgo

Thanks @Aris-t2 for your work. I've done it and it works. Only now the text in the URL bar is smaller than it used to be...

There is code withing this projects files to adjust the font size of urlbar.

These FF updates are so annoying! With every new update I have to spend HOURS tweaking your settings over and over again. Isn't there any simpler way?...

ESR builds maybe.

@rayman89
Use the other code block in that file to edit button sizes. Lines 133ff.

#main-window[tabsintitlebar] #PanelUI-button #PanelUI-menu-button {
  background-clip: padding-box !important;
  padding: 0 4px 0 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  -moz-padding-start: 4px !important;
  -moz-padding-end: 4px !important;
  height: 30px !important;
  border-radius: 0 0 4px 4px;
  border-top: none !important;
  border-right: 1px solid !important;
  border-left: 1px solid !important;
  border-bottom: 1px solid !important;
}

@Peacock365
No weird space on Win 10 here:

classic_squared_tabs.css
tab_maxwidth.css (maximum width set to 250 inside general_variables.css)
tabs_below_navigation_toolbar_fx74.css

Do not enable all "tabs below navigation toolbar" options at once.

@hopalongrock

Is it possible to remove the blue background color of a selected addon in addonlist?

	addon-card:not([expanded="true"]) .addon.card:hover {
	  background: red !important;
	  box-shadow: unset !important;
	}

	addon-card:not([expanded="true"]) .addon.card:hover .card-contents :-moz-any(div,span,.addon-name-link) {
	  color: yellow !important;
	}

Is it possible to show the enable/disable switch on the Recent Updates too as on Extensions?

This will be fixed on next update. The buttons are not supposed to hide the switch.

hopalongrock · 2020-06-08T20:44:58Z

@Aris-t2

Thanks the code for coloring the addonlist in "addons_manager_alternative_appearance_fx75"
I changed the red and the yellow color to unset.

In Recent update the enable/disable switch works fine in 3.1.5

Janaue · 2020-06-09T05:32:05Z

Hello
In firefox 77
Is it possible to have tabs at the bottom of the screen, not tabs below or above the URL bar, but really at the end of the screen like tabmix plus did in nonquantum firefox ?

also, is it possible to remove any favicon in the bookmark row, for both a bookmark and a folder?
In firefox 56 i did this

/* Hide bookmark icons in the Personal Toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {display: none; }

and it works great. This keeps the favicons for the bookmark and folder when they are not displayed in the bookmark row.

Is it also possible to get back the status bar, in order to have one more bar where to put addon icons.

finally, is CustomCSSforFx fully compatible with the user.js of ghacks for privacy ? If nto, what stuff from CustomCSSforFx shoudl I change ?

Aris-t2 · 2020-06-10T12:57:46Z

@Janaue

Is it possible to have tabs at the bottom of the screen, not tabs below or above the URL bar, but really at the end of the screen like tabmix plus did in nonquantum firefox ?

Yes, use this projects complete package and enable tabs_below_main_content_fx74.css

also, is it possible to remove any favicon in the bookmark row, for both a bookmark and a folder?
Yes.

#PlacesToolbarItems .bookmark-item .toolbarbutton-icon {
  display: none !important;
}

Is it also possible to get back the status bar, in order to have one more bar where to put addon icons.

You can get an Add-on bar using JS script from CustomCSSforFx. There is also a simulated add-on bar within this projects files, that gets achieved using CSS.

finally, is CustomCSSforFx fully compatible with the user.js of ghacks for privacy ? If nto, what stuff from CustomCSSforFx shoudl I change ?

CustomCSSforFx and CustomCSSforFx do not use or change user.js.

Janaue · 2020-06-10T15:14:03Z

For the removal of the favicon, the code does not work. I put it in my_userContent.css and the favicons remain in Fx77.0.1

For the status bar, I see simulated add-on bar is not compatible with the tabs at the bottom, so i choose method 3 and I enabled the load_js_script("./userChrome/addonbar.uc.js");

but the tab bar is below the status bar, which is wrong. The tab bar must be above the status bar. Can I change this ?

Janaue · 2020-06-10T15:22:53Z

Also i restored the default customization of the UI in Firefox, to start from scratch. Now I have big orange button at the top left, which I want gone. The only way to achieve this is to enable ''title bar'' in customization, but I do not want the title, because ti takes too much vertical space.

What I seek is menu_bar+search_bar, below this is bookmark_bar, then the tab_bar at the bottom and the status_bar below this.

Also I have a bug in stock firefox: the search_bar is glued to the menu_bar. when I put the menu_bar+icons+search_bar+icons, the icons on the left and right of the search bar are put on the right of the search_bar. Firefox fails to apply my custom UI. Only when I right-click and choose to personalize, then immediately click on validation, firefox puts the correct icons I want on the right of the search_bar and the correct icons on the left of the search_bar.

Aris-t2 · 2020-06-10T15:39:13Z

@Janaue

For the removal of the favicon, the code does not work. I put it in my_userContent.css and the favicons remain in Fx77.0.1

Code belongs into userChrome.css or my_userChrome.css.

but the tab bar is below the status bar, which is wrong. The tab bar must be above the status bar. Can I change this ?

Code is offered as is.

Also i restored the default customization of the UI in Firefox, to start from scratch. Now I have big orange button at the top left, which I want gone. The only way to achieve this is to enable ''title bar'' in customization, but I do not want the title, because ti takes too much vertical space.

Disable the "appbutton in titlebar" settings.

What I seek is menu_bar+search_bar, below this is bookmark_bar, then the tab_bar at the bottom and the status_bar below this.

Not possible with this projects files.

Also I have a bug in stock firefox where, when I put the menu_bar+icons+search_bar+icons, the icons on the left and right of the search bar are put on the right of the search_bar. Firefox fails to apply my custom UI. Only when I right-click and choose to personalize, then immediately click on validation, firefox puts the correct icons I want on the right of the search_bar and the correct icons on the left of the search_bar.

Fx does not play well with content on menubar since a while.

Janaue · 2020-06-10T16:21:55Z

Is it possible to tell firefox to refresh it's UI configuration while it starts, so that I do not need to right-click customize and then validate, in order to get the right order of the icons on th left of the menu_bar ?

nollinvoyd · 2020-06-12T23:00:27Z

Just updated to v3.1.5, and my about:addons display changed from this

to this

Aris-t2 · 2020-06-13T12:19:41Z

@Janaue
I'm not aware of such a feature

@nollinvoyd
Test v2.

nollinvoyd · 2020-06-13T20:28:45Z

@Aris-t2

I assume there was a file change in v2, but it did not fix it.

Aris-t2 · 2020-06-14T07:52:16Z

It was broken in my tests before the v2 fix. Make sure the configuration looks like this where only addonlists_show_buttons_instead_of_menu_popup_more_compact_view_fx72.css is active.:

/* compact item lists - [only use one at a time] ************************************************/
/* @import "./css/aboutaddons/addonlists_compact_fx68.css"; /**/ /* best with alternative_appearance_fx68+ */
/* @import "./css/aboutaddons/addonlists_compact_fx72.css"; /**/ /* best with alternative_appearance_fx68+ */
/* @import "./css/aboutaddons/addonlists_compact_more_compact_fx68.css"; /**/ /* best with alternative_appearance_fx68+ */
/* @import "./css/aboutaddons/addonlists_compact_more_compact_fx72.css"; /**/ /* best with alternative_appearance_fx68+ */

/* button settings (requires addons_manager_alternative_appearance_fx68) ************************/
/* - buttons instead of menupopup - [only use one at a time] ************************************/
/* @import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_fx68.css"; /**/
/* @import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_fx72.css"; /**/
/* @import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_compact_view_fx72.css"; /**/
 @import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_more_compact_view_fx72.css"; /**/
/* - buttons icons instead of labels (requires above option) - [only use one at a time] *********/
/* @import "./css/aboutaddons/addonlists_replace_button_labels_with_icons_fx68.css"; /**/
/* @import "./css/aboutaddons/addonlists_replace_button_labels_with_icons_fx72.css"; /**/

nollinvoyd · 2020-06-14T19:48:46Z

@Aris-t2

It was broken in my tests before the v2 fix. Make sure the configuration looks like this where only addonlists_show_buttons_instead_of_menu_popup_more_compact_view_fx72.css is active.:

That's what 1 have. v3.1.4 works normally for me, but still not v3.1.5

Aris-t2 · 2020-06-14T20:56:23Z

I don't know what to say.

Tested this on Fx 77 and 79, two different setups, even two different locales.

Try to setup chrome folders content again using v2 release and only switch addonlists_show_buttons_instead_of_menu_popup_more_compact_view_fx72.css to enabled.

B00ze64 · 2020-06-15T04:19:07Z

Good day.

I have not read all ~300 comments in here, so sorry if this was asked before. I noticed Mozilla did not play nice with the menus, and turned them all into regular menuitem's from menuitem-iconic. So I have not yet been able to add icons to the menus (there's a nice addon, Menu Icon Plus, we could use to bring them all back). Anyway, I read that we can change an item's CLASS via JavaScript, wondering if that is the only way to add icons to the menus, or if we can do this with just CSS. This is what I tried but no good:

#bookmarksShowAll {
	-moz-appearance: menuitem-iconic !important; 
	list-style-image: url("chrome://browser/skin/library.svg") !important;
	-moz-image-region: auto !important; }

Another thing that bugs me with the menus is the shortcut key for #bookmarksShowAll, it just makes the menu wider than it needs to be. Can I hide this AccelKey? I used to hide the entire menu entry, and use a shortcut to the chrome:// library to open in a TAB, but they broke it - we can use the xhtml version now (chrome://browser/content/places/places.xhtml), but if you open this and then try to create a new bookmark, a separator, anything, it locks the database and does not complete the operation. So I want to shorten the #bookmarksShowAll and give it an icon...

Thanks.
Best Regards,

Aris-t2 · 2020-06-15T06:06:53Z

@B00ze64
To add (colorized) icons to menuitems, that do no offer them by default, you can use CSS tweaks like in this example:

#appMenu-open-file-button {
  -moz-context-properties: fill;
  list-style-image: url(chrome://browser/skin/open.svg);
}

#appMenu-open-file-button .toolbarbutton-text  {
  padding-inline-start: 8px !important;
}

#appMenu-open-file-button .toolbarbutton-icon {
  fill: orange !important;
}

This is what happens in
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/appbutton/appbutton_popup_more_icons.css
and
https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/appbutton/appbutton_popup_icons_colorized.css

You can hide the "AccelKey" with code like this:

#bookmarksShowAll .menu-accel-container {
  display: none !important;
}

KathrynBassett · 2020-06-15T22:32:26Z

Is there a dedicated topic for tabs below navigation? I can't find what to uncomment in my userchome to get the tabs below the bookmarks using Win10 and FF77.

Jgr9 · 2020-06-16T01:02:40Z

For me on Windows, it's
@import "./css/tabs/tabs_below_navigation_toolbar_fx74.css"; /**/
under Fx 74+

B00ze64 · 2020-06-16T02:21:54Z

Good day,

Wow, I had not looked closely enough at menu entries, there is indeed a HBOX just for the AccelKey which we can easily hide. However, that is pretty much ALL there is, a MENUITEM and underneath, a LABEL and a single HBOX for the AccelKey, there's no box for an icon (they are not buttons).

I looked at the menu entries in the HISTORY menu, and the menuitems are Class MenuItem-Iconic, and there's an HBOX for the icon. The Firefox menubar menus have no class anymore, they are not Menuitem-Iconic like they used to be, so they do not get a HBOX for an icon or a button or anything like that.

Do you think we could add MenuItem-Iconic class to the menu entries via CustomJSforFx? Would that work? It's pretty lame they add icons to the hamburger menu and disable them completely in the menubar (and in the context menus too). And of course everything's a single color...

Thank you.
Best Regards,

Aris-t2 · 2020-06-16T05:58:43Z

@KathrynBassett
Everything is explained here: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/userChrome.css#L339

Btw.: tabs_below_navigation_toolbar_fx74.css and bookmarks_toolbar_multiple_lines_fx74.css work fine together up to Fx79.

/* - TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS / TABS NOT ON TOP *****************************/
/* [!] Note: do not use OS titlebar with 'tabs not on top' code on macOS ************************/
/* [!] Note: only ~fx65_v2 works with multi-tab lines option on Fx65+. **************************/
/* - Fx 60-64 ***********************************************************************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar.css"; /**/ /* <-- Windows/Linux */
/* @import "./css/tabs/tabs_below_navigation_toolbar_macOS.css"; /**/ /* <-- macOS */
/* - Fx 65-67 - Windows/Linux *******************************************************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65.css"; /**/
/* - Fx 65-73 - macOS ***************************************************************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS.css"; /**/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_macOS_default_tabs.css"; /**/
/* - Fx 65+ v2 - mainly for multi-lined tabs (Glitches with inactive menubar!) ******************/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2.css"; /**/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_force_hidden_menubar.css"; /**/ /* no menubar when OS titlebar is active */
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx65_v2_macOS.css"; /**/
/* - Fx 68-71 Windows/Linux (use the Fx 65+ versions for macOS) *********************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx68.css"; /**/
/* - Fx 72-73 Windows/Linux (use the Fx 65+ versions for macOS) *********************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx72.css"; /**/
/* - Fx 74+ Windows/Linux ***********************************************************************/
/* [!] might require overriding url bars 'selection color' --> see corresponding area ***********/ 
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx74.css"; /**/
/* - Fx 74+ - macOS *****************************************************************************/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx74_macOS.css"; /**/
/* @import "./css/tabs/tabs_below_navigation_toolbar_fx74_macOS_default_tabs.css"; /**/

@B00ze64

Do you think we could add MenuItem-Iconic class to the menu entries via CustomJSforFx? Would that work?

In theory yes, but do we really need that? We can force menuitems to use icons via CSS like mentioned above or does this not work for you?
You can also force menuitems to use the menuitem-icon or menu-icon appearance, but this will for sure break some items again like happened in the past. Btw. old add-ons and themes to add menu icons used the appearance trick. I know that, because that is what did the trick when I was working on Noia 4 theme back in 2011-2014.

Looks like this:

id_or_class_of_menuitem {
  -moz-appearance: menuitem-iconic;
}

id_or_class_of_menui {
  -moz-appearance: menu-iconic;
}

Aris-t2 · 2020-06-16T18:27:41Z

Continue here: #308

Aris-t2 added IMPORTANT DISCUSSION labels Jan 15, 2020

Aris-t2 mentioned this issue Jan 15, 2020

[!] GENERAL discussion, feedback, questions belong here! (v9) #241

Closed

Aris-t2 pinned this issue Jan 15, 2020

Aris-t2 mentioned this issue Jan 22, 2020

Context Menu CSS Help #276

Closed

Aris-t2 unpinned this issue Jun 16, 2020

Aris-t2 mentioned this issue Jun 16, 2020

[!] GENERAL discussion, feedback, questions belong here! (v11) #308

Closed

Aris-t2 closed this as completed Jun 16, 2020

Aris-t2 mentioned this issue Jun 5, 2021

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

Closed

Repository owner locked as too heated and limited conversation to collaborators Jul 20, 2021

[!] GENERAL discussion, feedback, questions belong here! (v10) #273

[!] GENERAL discussion, feedback, questions belong here! (v10) #273

Comments

Aris-t2 commented Jan 15, 2020

Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!

Michas0206 commented Jan 16, 2020 • edited

Speravir commented Jan 16, 2020

Aris-t2 commented Jan 16, 2020

DBGulp commented Jan 19, 2020

Aris-t2 commented Jan 19, 2020

Michas0206 commented Jan 19, 2020

DBGulp commented Jan 19, 2020

Aris-t2 commented Jan 19, 2020

DBGulp commented Jan 19, 2020

DBGulp commented Jan 19, 2020

Aris-t2 commented Jan 20, 2020 • edited

nollinvoyd commented Jan 20, 2020

Aris-t2 commented Jan 21, 2020

JoseHidalgo commented Jan 21, 2020

Aris-t2 commented Jan 21, 2020

nollinvoyd commented Jan 21, 2020

Aris-t2 commented Jan 22, 2020 • edited

nollinvoyd commented Jan 23, 2020 • edited

TroudhuK commented Jan 24, 2020

nollinvoyd commented Jan 25, 2020

ryuukenzenkou commented Jan 25, 2020 • edited

Aris-t2 commented Jan 25, 2020

krystian3w commented Jan 25, 2020 • edited

nollinvoyd commented Jan 25, 2020

krystian3w commented Jan 25, 2020

JoseHidalgo commented Jun 7, 2020

rayman89 commented Jun 7, 2020

Peacock365 commented Jun 8, 2020

hopalongrock commented Jun 8, 2020 • edited

Aris-t2 commented Jun 8, 2020

hopalongrock commented Jun 8, 2020

Janaue commented Jun 9, 2020 • edited

Aris-t2 commented Jun 10, 2020

Janaue commented Jun 10, 2020 • edited

Janaue commented Jun 10, 2020 • edited

Aris-t2 commented Jun 10, 2020

Janaue commented Jun 10, 2020

nollinvoyd commented Jun 12, 2020

Aris-t2 commented Jun 13, 2020

nollinvoyd commented Jun 13, 2020

Aris-t2 commented Jun 14, 2020

nollinvoyd commented Jun 14, 2020

Aris-t2 commented Jun 14, 2020

B00ze64 commented Jun 15, 2020

Aris-t2 commented Jun 15, 2020

KathrynBassett commented Jun 15, 2020

Jgr9 commented Jun 16, 2020 • edited

B00ze64 commented Jun 16, 2020

Aris-t2 commented Jun 16, 2020 • edited

Aris-t2 commented Jun 16, 2020

Michas0206 commented Jan 16, 2020 •

edited

Aris-t2 commented Jan 20, 2020 •

edited

Aris-t2 commented Jan 22, 2020 •

edited

nollinvoyd commented Jan 23, 2020 •

edited

ryuukenzenkou commented Jan 25, 2020 •

edited

krystian3w commented Jan 25, 2020 •

edited

hopalongrock commented Jun 8, 2020 •

edited

Janaue commented Jun 9, 2020 •

edited

Janaue commented Jun 10, 2020 •

edited

Janaue commented Jun 10, 2020 •

edited

Jgr9 commented Jun 16, 2020 •

edited

Aris-t2 commented Jun 16, 2020 •

edited