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

[Aris-t2]

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 https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133, https://github.com/Aris-t2/CustomCSSforFx/issues/163, https://github.com/Aris-t2/CustomCSSforFx/issues/189 and https://github.com/Aris-t2/CustomCSSforFx/issues/211.

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

[m4n8tpr4]

First time commenter, bear with me.

With Fx70, the font size of URLs in the locationbar autocomplete popup got smaller. How can I change it? I tried both the ac_popup_classic_with_url_only_fx68.css and ac_popup_url_and_title_50percent_width.css options.

In addition, in the ac_popup_url_and_title_50percent_width.css option, the search engine button line at the bottom of the popup is apparently sized at 50% width (extending from 25% to 75%), with a line break.

Are any of these two bugs worth reporting, or did I just miss some setting possibility?

[Infernoflower]

How do I set the config to default? And I applied the red colour to the toolbar and header via the Windows personalization colour settings. Should I set the window colour back to its default value in Settings?

[ImSpecial]

Hey Aris, is there a way to have this dark blue highlight color that happens when you type, be of a different color, preferably light grey or light blue, like what my green arrow points to.

https://i.imgur.com/1t0DUVo.png

[bendover22]

In web developer tools (Ctrl + Shift + I), that is - NOT for Browser Toolbox, in Firefox quantum is it possible to permanently change font size, name (e.g., Liberation mono), font weight without massive effort?

I was able to change font size, weight, etc., in some modules of browser toolbox using fairly simple CSS (from Mozilla support site).
They said CSS changes for browser toolbox had to go in the profile, under a created directory, "chrome_debugger_profile/chrome/userChrome.css".

But nothing I've read or tried says it's as easy to change these things in web developer tools. CSS for it goes in the usual path for userChrome.css.
At least, not easy to change fonts in all the modules (Inspector, Debugger, DOM, etc. Many commented they just used Ctrl and '+' key to increase font size in web devtools. Doing that every time gets annoying & after every restart.

Ctrl and + increases the font size in all displayed panes, but doesn't allow specifying monospace or a particular font, where certain letters & numerals don't look identical. It also increases size of window controls, scroll bars along w/ text or code, which isn't wanted.

If I could set the web devtools font properties in Inspector, Debugger, Style Editor & hopefully DOM, that would help a lot.

[Aris-t2]

@m4n8tpr4 The width is controlled by --ac_popup_width variable, you will have to modify it.

The search area at the bottom does not get crushed in my tests. I will add some more tweaks on next update, that might improve things. Test this code:

/* reduce space around search engines */
#urlbar .search-one-offs {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-inline-start: 4px !important;
  padding-inline-end: 0px !important;
}

@Infernoflower For testing purposes disable inside your Windows 10 ui/color settings to colorization of titlebar. I'm still not sure, if that is what causing the glitch. Have you tested a new CustomCSSforFx setup of your /chrome/ folder?

@Imspecial You can set different colors here https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_url_only_fx68.css#L132 and here https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_url_only_fx68.css#L144

@bendover22 Worked fine for me (in Fx72 Nightly). I used "Freestyle Script" for this example and every area of developer tools was affected.

\chrome_debugger_profile\chrome\userChrome.css -->

* {
  font-size: 14pt !important;
  font-family: "Freestyle Script" !important;
  font-style: italic !important; 
}

-->

[RafalRambo]

Hello.

1. Is there any website where you can download configurations with photos of what it looks like.
2. Is it possible to make this modification in the same way as the "Enterprise Policy Generator" plugin is made in which options are selected and a file with these settings is generated later. It would be similar to the old CTR.

[Aris-t2]

@RafalRambo Short answer to both: no.

However there are a few screenshots here on Github: https://github.com/Aris-t2/CustomCSSforFx/issues/2

I do not have the time or the will to create a "generator"/software/plugin etc. for this projects files.

[jmcken1]

@Aris-t2 I just updated FF to v70.0 and updated CustomCSS to v2.7.9. Everything works, but as @m4n8tpr4 mentioned, the URL text on the left in the location bar dropdown is now way smaller (though the titles on the right seem possibly unchanged).

Is there a way to make the dropdown URLs text bigger, as it was before v70?

[AMGPilot]

@Aris-t2 First I want to thank you for all of the work you do to support Firefox :)

My question is: How do I change the text color in my bookmarks?

Since the update to Firefox 70 the background of my bookmarks is dark now, which I really like, but the text and arrows are still black and I would like to change it to White if I could.

Here is a pic of my browser with Bookmarks shown:

Thanks!!

[Aris-t2]

@jmcken1 I will add an option for this on next update. In my opinion the text size in general is too small inside that popup.

#urlbar-results :-moz-any(.urlbarView-tags, .urlbarView-action, .urlbarView-title, .urlbarView-url) {
  font-size: 10pt !important;
}

@AMGPilot Disable the rule bookmarks_menu_button_popup_classic_appearance.css in userChrome.css. It does not work correctly atm.

[Achille-Grs]

Dear @Aris-t2 Hi! I have a small strange question.
You can copy-paste this url below, and save it like a new bookmark, then you have a notepad. When open it you can write anything you want.

data:text/html,%20<html%20contenteditable>

Is that possible with css to change font family, size, color etc?

[m4n8tpr4]

@Aris-t2

@m4n8tpr4 The width is controlled by --ac_popup_width variable, you will have to modify it.

The search area at the bottom does not get crushed in my tests.

I forgot to mention: the search area crushing into the 25%-75% part only happens if I type in something in the location bar in a pseudo-tab (about:preferences or about:config).

Thanks for the font size solution!

[Aris-t2]

@Achille-Grs

Add this to userContent.css (it will most likely affect other websites too):

html[contenteditable] body {
  font-size: 14pt !important;
  font-family: "Freestyle Script" !important;
  font-style: italic !important; 
}

@m4n8tpr4 Test the latest release. I can not reproduce this on Fx70 beta or 72 Nightly.

[AMGPilot]

@AMGPilot Disable the rule bookmarks_menu_button_popup_classic_appearance.css in userChrome.css. It does not work correctly atm.

@Aris-t2 Thank you very much for the reply, it works great now! The text and arrows are white just like I wanted.

One more thing... after disabling the classic appearance I now have "Show All Bookmarks at the top and Bottom now. Is there a way top disable the one at the bottom?

Thank you for all of your hard work!!!

..............................Follow Up......................

Holy crap I figured it out on my own!! 🎉

Hopefully I did it correctly.

I added the code below to this file: "bookmarks_menu_button_popup_other_item_hidden.css"

BMB_bookmarksShowAll,

BMB_viewBookmarksSidebar {

display: none !important; }

This removed the "Show All Bookmarks" from the bottom of the Bookmarks popup.

[Infernoflower]

I just remembered that I actually applied the red colour to the toolbar and header via the Windows personalization colour settings. Should I set the window colour back to its default value in Settings so that the gap between the tabs and the toolbar goes away?

[TroudhuK]

How to display and valid these messages? It appears too furtively and I can't click on "I understand". I don't know what keyword to search to fix that.

[nollinvoyd]

@Aris-t2

@nollinvoyd

#PopupSearchAutoComplete,
#PopupSearchAutoComplete * {
  color: black !important;
}

The the suggestion font colors are dark, but the search engine colors didn't change. Also, how can this void below the suggestions be removed?

It doesn't allow me to see all my search engines.

[Crybal]

In v.68 esr the unread/unload color for tabs does not work.Is there a way to bring it back?

[Aris-t2]

@Infernoflower Try to set your settings back to default and test.

@TroudhuK Create a new browser profile and test.

@nollinvoyd Looks like you are using the wrong option.

/* @import "./css/generalui/searchbar_popup_engines_show_labels_fx66.css"; /**/
/* @import "./css/generalui/searchbar_popup_engines_show_labels_fx70.css"; /**/
/* @import "./css/generalui/searchbar_popup_engines_show_labels_fx72.css"; /**/

Make sure you have set the one required by your Fx version and also verify, that you are using the latest files.

About the text color, this is how applying the code looks for me:

@Crybal "unread" state was removed in Fx 61/62 and we can not restore ist. "unload" state aka "pending" still works fine up to Fx72.

[TroudhuK]

(in a new profile) So it's because I hide this Chrome-like "hamburger" button. Can we find a way to fix that (hide button but show these bubbles)?

[kanade96]

Hey Aris, I have encountered two issues with the latest release (v2.8.0 with FF 70.0).

1) The back/forward buttons are overlapping for any new pages with no back histories. Is there a way to fix this? FYI, I'm using the following settings:

• /css/buttons/icons_white_icons.css
• /css/buttons/forward_button_hide_when_disabled.css
• /css/buttons/custom_backforward_connected_to_location_bar

2) I'm currently using "/css/locationbar/ac_popup_classic_with_two_lines_fx68_star_at_the_end.css" for popup content and for some reason, the lines for adjusting the width/height of the box doesn't seem to work. The lines that I've included in the .css file are: / for ac_popup_classic_with_two_lines_fx68.css / :root { --ac_popup_width: 700px !important; / popup width in normal mode / --ac_popup_width_maximized: 1050px !important; / popup width in maximized mode / --ac_popup_width_fullscreen: 1400px !important; / popup width in fullscreen mode / --ac_popup_number_of_results: 10 !important; / value has to be identical to about:config > browser.urlbar.maxRichResults / --ac_popup_maxheight: calc(47.5px ( var(--ac_popup_number_of_results) + 1 )) !important; / calculate maximum height based on items to display / --ac_popup_height: auto !important; / replace auto with 'calc(47.5px var(--ac_popup_number_of_results))' to get a shorter scrollable list for high result numbers / }

[rayman89]

@Aris-t2 Are any custom JS methods working atm? I tried method 2 and 3 and none works for me. I assume method 1 is obsolete by now as well.... (?).

[Acid-Crash]

Hi @rayman89, I use method 2 (installed according to the CustomJSforFx readme). Works fine for me on both 70 and 72. I'm on Win10

[Aris-t2]

@TroudhuK

You could try this:

#PanelUI-button {
    visibility: hidden !important;
    -moz-margin-end: -28px !important;
}

@kanade96 I will look into the back/forward button issue.

Regarding your second question you have to use variables inside general_variables.css file. https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx68.css#L6 https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/locationbar/ac_popup_classic_with_two_lines_fx64_star_at_the_end.css#L10

@rayman89 Methods 1 and 3 got updated in the last few month. They should work, but I have not tested them.

[nollinvoyd]

@Aris-t2

@nollinvoyd Looks like you are using the wrong option.

/* @import "./css/generalui/searchbar_popup_engines_show_labels_fx66.css"; /**/
/* @import "./css/generalui/searchbar_popup_engines_show_labels_fx70.css"; /**/
/* @import "./css/generalui/searchbar_popup_engines_show_labels_fx72.css"; /**/

I have Firefox 70. I was using @import "./css/generalui/searchbar_popup_engines_show_labels_fx70.css"; /**/

It only works properly when I use /* @import "./css/generalui/searchbar_popup_engines_show_labels_fx72.css"; /**/

Make sure you have set the one required by your Fx version and also verify, that you are using the latest files.

About the text color, this is how applying the code looks for me:

I put it in my_userChrome.css. I tried changing it from black to blue to see if it would work, but it just stays grey

`#PopupSearchAutoComplete,

PopupSearchAutoComplete * {

color: blue !important; }`

[nollinvoyd]

Can these entries from the location bar suggestions be closer together

[Aris-t2]

Just tested again. 2.8.0 + Win10x64 + Fx70x64 + searchbar_popup_engines_show_labels_fx70.css + this code (in my_userChrome.css or userChrome.css):

#PopupSearchAutoComplete,
#PopupSearchAutoComplete * {
  color: blue !important;
} 

I have no idea what you are doing differently, but this works in my tests.

About the location bar question

You will have to experiment with some values:

.urlbarView-row {
  min-height: 14px !important;
  height: unset !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

[SlaveOfCats]

Hi, Aris,

I just updated to FF70, and I have two questions.

I have about:addons as my home page. When I start FF, the first time I click on the Available Updates button, nothing happens. It works after I click on another button and then click on Available Updates. I'm pretty sure someone else saw this problem, too, but I can't find the comment. Do you know the one I mean?

Second question: When entering a URL in the location bar, I have been hiding the "Visit..." entry with the following CSS:

panel#urlbar-results #urlbarView-row-0 { display: none !important; }

That seems not to work any longer. Is there anything else that I can do, or has Mozilla screwed me on this?

Thanks.

[Aris-t2]

The previous post about "Available Updates" was dealing with the visibility of that category. Does it work as expected without this projects files? Not sure what should happen, but that category is empty, if there are no updates.

Second question

The code changed, but you can inspect those items using dev tools. Either #urlbar-results #urlbarView-row-0 { display: none !important; } or #urlbarView-row-0 { display: none !important; } should be enough now.

[SlaveOfCats]

@Aris-t2

Thanks for the fix to hide the Visit row in search. That works!

I didn't go into detail on the Available Updates issue, but here it is: when I start FF, the about:addons page is opened. I click on the gear and select "Check for Updates". I have updates, so I click on either the link/button "View Available Updates" next to the gear, or else the category button. In both cases, nothing is displayed. If I click on any other category, and then on Available Updates, the extension updates are displayed.

I just did two tests: a new FF70 Portable using a copy of my profile and using the latest CustomCSSforFx with default settings. That reproduces the issue. Then I removed the CustomCSSforFx and restarted; the issue is gone.

[Aris-t2]

This seems to be a Firefox bug. I can reproduce it in Firefox 72 too with and without CustomCSSforFx.

Case 1 Add-ons Manager > Available Updates category selected (when add-ons manager is loaded) > check for updates via button > no update items visible although the number of add-ons to be updated is shown. Clicking on any other category, e.g. 'Extensions' and clicking on 'Available Updates' afterwards or reloading the current page causes the list to show up correctly.

Case 2 Add-ons Manager > Extensions category selected (when add-ons manager is loaded) > check for updates via button > Available Updates category > list shows up correctly

I think case one is the bug you currently see on your average browser usage and case "occurred" during testing.

[SlaveOfCats]

I found the comment I was remembering. Similar issue, but with the Extensions button: https://github.com/Aris-t2/CustomCSSforFx/issues/211#issuecomment-541259541. Looks like @nollinvoyd solved it, but it's not clear how.

[Aris-t2]

He solved it by testing his configuration in another browser profile, but his case seems to be unrelated to yours.

Try to reproduce the issue with and without CustomCSSforFx like mentioned in my last post.

Note: nothing in this projects file rebinds/changes the functionality of add-on mangers category items.

[SlaveOfCats]

Ah, yes, I'm seeing the problem because usually Available Updates is already selected when I start FF. So just another FF bug to live with.

Another question: is there a way to change the highlight color on the about:addons page? I'm using addons_manager_alternative_appearance_fx68.css, but the highlighting on hover is too dark. I realize that this isn't new; I'm just ready to do something about it now.

Thx.

[Speravir]

What can I do to unset the menu settings? In Fx70 here the OS menu appearance is gone and I do not get it, in which rule this is done. Win7 with Aero styling, but I did not change anything regarding this. Actually, the context menus bother me the most, but as written in the style sheet comments, from Fx70 it is the same for all menus.

[Aris-t2]

@SlaveOfCats Look into https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/addons_manager_alternative_appearance_fx68.css and search for Highlight and HighlightText (both are twice in there) Replace those "names" with different colors..

@Speravir Could you be more specific and post a screenshot? I'm not sure which menu appearance you are referring to with "OS menu" appearance. Is it the appmenu (popup), (general) context menu (popup), popup background color, bookmarks menu popup etc.?

[9jkh]

Hi Aris, a little CSS help needed for Firefox Mojave:

Running 10.14.6 with iMac 10,1 (Late '09) unsupported with dosdude's Mojave patcher. Since the GPU is non-metal I am forced to use Dark Mode, which turns the Firefox 68esr bookmarks/history sidebars (among other Firefox items) to almost unreadable black text on black background. Partial workaround I have found is this CSS added to userchrome.css, below Aris original, which works perfectly for the history sidebar, but not for the bookmarks sidebar. (Note, the same CSS works perfectly in Waterfox Classic 2019.10 with CTR Custom Code for both history and bookmarks, where the different sidebars can be selected from buttons, instead of only from a dropdown in the FF68.)

/bookmarks sidebar/

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-row { margin-top: 2.0px !important; min-height: 14.7px !important; height: 14.7px !important; }

NEW CSS added for Mojave dark mode issue:

sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {

color: #000!important; background-color: #EDEDED !important; -moz-appearance:none!important; border-color:transparent !important; }

bookmarksPanel, #history-panel {

color: #fff !important; background-color: #F5F5F5 !important; } / Bookmarks sidebar: change hover color /

bookmarks-view treechildren::-moz-tree-cell(hover) {

background-color: #989898 !important; }

With this new CSS in place, the history sidebar is black text on light grey background, which is quite readable and not distracting. https://i.postimg.cc/q71PcgsZ/FF68esr-history-with-CSS.png

But with the bookmarks sidebar selected, the same CSS creates an anemic white text on dark grey background. https://i.postimg.cc/CxzkMQvB/FF68esr-bookmarks-with-CSS.png

Wondering what edits or additions I can make to the above CSS to allow the bookmarks sidebar to have the same appearance. (Or possibly needs completely re-written CSS?) Since it works perfectly for both bookmarks and history in Waterfox with CTR Custom Code, could it be the issue is with how this new CSS doesn't take into account the way the bookmarks sidebar is selected only from a dropdown in FF? https://i.postimg.cc/j50Jqq9C/FF-sidebar-selection-dropdown.png

[Aris-t2]

@9jkh

Have you tried selecting dark theme in Firefox? It should turn sidebar incl. its button popup dark.

I can't test you config, but for me the available "options" force the colors they should: sidebar_appearance_grey > grey background + black text sidebar_appearance_dark > dark background + white text This works for browsers default theme and for browsers dark themes.

If you need more specific tweaks, looking though the code of sidebar_appearance_grey.css and sidebar_appearance_dark.css might help you.

The code works the same for me in bookmarks and history sidebar, so I don't know how to help you here other than referring to using code based on the above mentioned files.

[9jkh]

Thanks for the quick reply and suggestions.

I've come up with the following, which gets me almost there for the bookmarks sidebar -- black text on light grey background -- by moving the following into the first css, above, which begins -moz-any(#bookmarks-view,.... Except I have no idea how to keep the spacing of bookmarks entries, while removing the ruled lines.

https://i.postimg.cc/ZYBsKfFn/bookmarks-ruled-lines.png

 color: #fff !important;
  background-color: #F5F5F5 !important;

This results in:

/*bookmarks sidebar*/

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-row {
  margin-top: 2.0px !important;
  min-height: 14.7px !important;
  height: 14.7px !important;
  color: #fff !important;
  background-color: #F5F5F5 !important;
}

#sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {
  color: #000!important;
  background-color: #EDEDED !important;
  -moz-appearance:none!important;
  border-color:transparent !important;
}

/* Bookmarks sidebar: change hover color */
#bookmarks-view treechildren::-moz-tree-cell(hover) {
  background-color: #989898 !important;
}

[Speravir]

@Aris-t2

Could you be more specific and post a screenshot? I'm not sure which menu appearance you are referring to with "OS menu" appearance. Is it the appmenu (popup), (general) context menu (popup), popup background color, bookmarks menu popup etc.?

To be honest, after I posted my question I got in doubt and I am unsure now, whether this is really only in Fx70 or whether it was in earlier versions, too, and I just have been triggered by your new notes.

At least, I am interested, how I could change the menu background color myself. I searched for menu and background rules, but am confused which one is the actual active one.

All menus in Firefox are affected here.

A menu from Windows Explorer (remember, Win7 with Aero):

The Panel-UI-menu in Firefox 70 (with icon color changes and the restart script of yours): Side remark: Note that the synchro address is too wide on the left. I do not know whether this is caused by the CustomCSS color styling rule. I found in Firefox’ panelUI.css:

/* Handle different UI states. */
#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label > .toolbarbutton-icon,
#appMenu-fxa-status:not([fxastatus="signedin"]) > #appMenu-fxa-avatar {
  display: none;
}

The first one should be a visibility; hidden, the second one I do not know.

The context menus are even darker (see edit below) – tab context menu: Edit: Straight before I wrote this I updated to Fx 70,0,1. Only after posting I noticed that in the context menus the color is now the same like in the other Fx menus again. in Fx 70.0 is has been darker here.

The confusing thing is: I tried to find the active rule with the browser tools.

• Menuitems do not have a background color,
• Menugroups have a computed transparent background (rgba(0,0,0,0)).
• But next level up (menupopup) is already rgb(255,255,255) or the actual rule menupopup, panel {background:Menu;}

… Ooooh, while I write this I accidentally notice that there is a level in between with a background rule: xul:arrowscrollbox with background-color: -moz-Dialog !important; and this comes from a stylesheet, by you: _buttons/button_popup_panelmozdialog.css. This is not shown in the computed rules pane of browser tools, though, what the heck? This explains the background color in the panel menu, but not the darker one in the context menus.

I already have tried to write rules with menupopup menu, menupopup menuitem {background-color: …}, but this was apparently not specific enough,

[nollinvoyd]

#PopupSearchAutoComplete,
#PopupSearchAutoComplete * {
  color: blue !important;
} 

I have no idea what you are doing differently, but this works in my tests.

It was on the bottom. I had to move it to the top of the custom css in my_userchrome.css

About the location bar question

You will have to experiment with some values:

.urlbarView-row {
  min-height: 14px !important;
  height: unset !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

Thanks. Works great.

[Crybal]

Since there is not tabs state unread,I wanted to ask these. Is it possible to set a new tab's state as "unload/pending"? Is there a tab state "read"? By the way,how can I make the new tab "+" be always at the end ofthe tabs and not ixed at the right side?

[Infernoflower]

@Infernoflower Try to set your settings back to default and test.

I tried setting my theme to "Windows", but the gap still remained. Do I need to do something else to set my settings back to default?

[Aris-t2]

@9jkh

The value you set for height rules is too low. This result is much cleaner:

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-row {
  min-height: 17px !important;
  height: 17px !important;
  color: #fff !important;
  background-color: #F5F5F5 !important;
}
#sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {
  color: #000!important;
  background-color: #EDEDED !important;
  -moz-appearance:none!important;
  border-color:transparent !important;
}
#bookmarks-view treechildren::-moz-tree-cell(hover) {
  background-color: #989898 !important;
}

@Speravir Independent of your OS theme you can manually simulate popup colors (e.g. from your screenshot) using code like this:

.panel-arrowcontent,
.popup-internal-box,
.panel-subview-footer,
#BMB_bookmarksPopup .popup-internal-box,
.popup-internal-box > autorepeatbutton,
.panel-subview-footer,
*[class^=PanelUI-],
.panel-subview-body,
#emptyDownloads,
#BMB_bookmarksPopup menupopup .arrowscrollbox-scrollbox,
#BMB_bookmarksPopup menupopup,
#BMB_bookmarksPopup .panel-arrowcontent {
  background-image: linear-gradient(to right, #e3ebf6, #ccd3dd 27px, #ffffff 28px) !important;
  color: black !important;
}

The issue with account/avatar icon will be fixed on next update.

Complexitiy of CSS rules increase much faster atm. and Mozilla devs move more stuff in deeper boxes. In Fx 72 things are even more confusing, because of the shadow-root nodes.

@Crybal

Is it possible to set a new tab's state as "unload/pending"?

No, the browser does this automatically. You can test this by pinning a few pages to tabs and restarting the browser. The tabs that have not yet been visited have the pending btw. unloaded state.

Is there a tab state "read"?

Read is the default tab state. There is no additional rule, node or tag for this.

By the way,how can I make the new tab "+" be always at the end of the tabs and not fixed at the right side?

Yes, you can hide the new tab "tab" and force the new tab "button" to be visible (if it still is on tabs toolbar).

:root:not([customizing]) #navigator-toolbox #TabsToolbar #new-tab-button {
  display: unset !important;
  visibility: visible !important;
}
:-moz-any(.tabs-newtab-button,#tabs-newtab-button) {
  display: none !important;
  visibility: hidden !important;
}

@Infernoflower Sorry, but at this point I don't know how to help you, because nothing I try creates this gap/line in my tests. I have tested tabs_below_navigation_toolbar_fx68.css in Fx 68-72 with and without Windows 10s window color settings. Keep in mind all tests are always done using the latest version of the complete package of CustomCSSforFx.

After switching all Windows settings to default, try to setup everything from the scratch in Portable Firefox. Maybe there is still something wrong in your current configuration or browser profile.

[9jkh]

Aris, beautiful, that did the job. Looks great now both for bookmarks and history. Many thanks!

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-row {
  min-height: 17px !important;
  height: 17px !important;
  color: #fff !important;
  background-color: #F5F5F5 !important;
}
#sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {
  color: #000!important;
  background-color: #EDEDED !important;
  -moz-appearance:none!important;
  border-color:transparent !important;
}
#bookmarks-view treechildren::-moz-tree-cell(hover) {
  background-color: #989898 !important;
}

[nollinvoyd]

Firefox 70.01

Just curious about this, because if it could be done, it probably already would be.

By default, in available updates, Firefox doesn't show the addon version.

With CustomCSSforFx, it shows the currently installed version.

Is there no way for the upcoming version to be displayed, like it used to?

[nollinvoyd]

Not sure what this is meant to do @import "./css/buttons/whatnew_button_always_hidden.css"; /**/

I was never aware of this Whats New button. I googled it, after which found it in the 3-bar menu

Is that what the CustomCSSforFx entry is referring to? I ask because I have never seen this button on the toolbar, and the CustomCSSforFx entry doesn't remove it from the 3-bar menu

[nollinvoyd]

Firefox 70.01

Can the menubar get narrower/shorter in height?

[nollinvoyd]

Can the items be hidden?

[Aris-t2]

@nollinvoyd

Is there no way for the upcoming version to be displayed, like it used to?

No.

I was never aware of this Whats New button.

The button was once again some stupid nonsense Mozilla came up with. The "whats new" stuff inside menu popup is more than enough. No need for an own button.

Can the menubar get narrower/shorter in height?

This can not be done, if you move buttons and searchbar there. You could try to move the items using code like this, if it helps:

#menubar-items {
  margin-top: 10px;
}

Can the items be hidden?

#BMB_bookmarksToolbar,
#BMB_viewBookmarksSidebar,
#BMB_unsortedBookmarks,
#BMB_unsortedBookmarks + #BMB_mobileBookmarks,
#BMB_unsortedBookmarks + #BMB_mobileBookmarks + menuseparator{
  display: none !important;
}