black7375 / Firefox-UI-Fix

🦊 I respect proton UI and aim to improve it.
Mozilla Public License 2.0
5.24k stars 184 forks source link

Address bar dropdown is transparent on 122, making reading text difficult #864

Closed Slater91 closed 4 months ago

Slater91 commented 5 months ago

Describe the bug

The dropdown which opens by clicking on the address bar is transparent, which makes reading the text it displays really hard.

Expected behavior

The dropdown is not transparent.

Screenshots

Screenshot_20240121_103908

OS

Linux

OS - Others

No response

Firefox Version

122.0

Distribution

Theme

Theme - More Info

The system theme I use is Qogir-dark, while Firefox uses the system-default theme. The issue does not happen when using one of Firefox's themes (e.g. Dark, Light, or another one downloaded from Mozilla's theme store).

user.js setup

user.js setup
```javascript // ** Theme Default Options **************************************************** // userchrome.css usercontent.css activate user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // Fill SVG Color user_pref("svg.context-properties.content.enabled", true); // Restore Compact Mode - 89 Above user_pref("browser.compactmode.show", true); // about:home Search Bar - 89 Above user_pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false); // CSS's `:has()` selector #457 - 103 Above user_pref("layout.css.has-selector.enabled", true); // Browser Theme Based Scheme - Will be activate 95 Above // user_pref("layout.css.prefers-color-scheme.content-override", 3); // ** Theme Related Options **************************************************** // == Theme Distribution Settings ============================================== // The rows that are located continuously must be changed `true`/`false` explicitly because there is a collision. // https://github.com/black7375/Firefox-UI-Fix/wiki/Options#important user_pref("userChrome.tab.connect_to_window", true); // Original, Photon user_pref("userChrome.tab.color_like_toolbar", true); // Original, Photon user_pref("userChrome.tab.lepton_like_padding", true); // Original user_pref("userChrome.tab.photon_like_padding", false); // Photon user_pref("userChrome.tab.dynamic_separator", true); // Original, Proton user_pref("userChrome.tab.static_separator", false); // Photon user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option user_pref("userChrome.tab.bar_separator", false); // Just option user_pref("userChrome.tab.newtab_button_like_tab", true); // Original user_pref("userChrome.tab.newtab_button_smaller", false); // Photon user_pref("userChrome.tab.newtab_button_proton", false); // Proton user_pref("userChrome.icon.panel_full", true); // Original, Proton user_pref("userChrome.icon.panel_photon", false); // Photon // Original Only user_pref("userChrome.tab.box_shadow", true); user_pref("userChrome.tab.bottom_rounded_corner", true); // Photon Only user_pref("userChrome.tab.photon_like_contextline", false); user_pref("userChrome.rounding.square_tab", false); // == Theme Compatibility Settings ============================================= // user_pref("userChrome.compatibility.accent_color", true); // Firefox v103 Below // user_pref("userChrome.compatibility.covered_header_image", true); // user_pref("userChrome.compatibility.panel_cutoff", true); // user_pref("userChrome.compatibility.navbar_top_border", true); // user_pref("userChrome.compatibility.dynamic_separator", true); // Need dynamic_separator // user_pref("userChrome.compatibility.os.linux_non_native_titlebar_button", true); // user_pref("userChrome.compatibility.os.windows_maximized", true); // user_pref("userChrome.compatibility.os.win11", true); // == Theme Custom Settings ==================================================== // -- User Chrome -------------------------------------------------------------- // user_pref("userChrome.theme.private", true); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); // user_pref("userChrome.theme.monospace", true); // user_pref("userChrome.theme.transparent.frame", true); // user_pref("userChrome.theme.transparent.menu", true); // user_pref("userChrome.theme.transparent.panel", true); // user_pref("userChrome.theme.non_native_menu", true); // only for linux // user_pref("userChrome.decoration.disable_panel_animate", true); // user_pref("userChrome.decoration.disable_sidebar_animate", true); // user_pref("userChrome.decoration.panel_button_separator", true); // user_pref("userChrome.decoration.panel_arrow", true); // user_pref("userChrome.autohide.tab", true); // user_pref("userChrome.autohide.tab.opacity", true); // user_pref("userChrome.autohide.tab.blur", true); // user_pref("userChrome.autohide.tabbar", true); // user_pref("userChrome.autohide.navbar", true); // user_pref("userChrome.autohide.bookmarkbar", true); // user_pref("userChrome.autohide.sidebar", true); // user_pref("userChrome.autohide.fill_urlbar", true); // user_pref("userChrome.autohide.back_button", true); // user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.autohide.page_action", true); // user_pref("userChrome.autohide.toolbar_overlap", true); // user_pref("userChrome.autohide.toolbar_overlap.allow_layout_shift", true); // user_pref("userChrome.hidden.tab_icon", true); // user_pref("userChrome.hidden.tab_icon.always", true); // user_pref("userChrome.hidden.tabbar", true); // user_pref("userChrome.hidden.navbar", true); // user_pref("userChrome.hidden.private_indicator", true); // user_pref("userChrome.hidden.titlebar_container", true); // user_pref("userChrome.hidden.sidebar_header", true); // user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true); // user_pref("userChrome.hidden.urlbar_iconbox", true); // user_pref("userChrome.hidden.urlbar_iconbox.label_only", true); // user_pref("userChrome.hidden.bookmarkbar_icon", true); // user_pref("userChrome.hidden.bookmarkbar_label", true); // user_pref("userChrome.hidden.disabled_menu", true); // user_pref("userChrome.centered.tab", true); // user_pref("userChrome.centered.tab.label", true); // user_pref("userChrome.centered.urlbar", true); // user_pref("userChrome.centered.bookmarkbar", true); // user_pref("userChrome.counter.tab", true); // user_pref("userChrome.counter.bookmark_menu", true); // user_pref("userChrome.combined.nav_button", true); // user_pref("userChrome.combined.nav_button.home_button", true); // user_pref("userChrome.combined.urlbar.nav_button", true); // user_pref("userChrome.combined.urlbar.home_button", true); // user_pref("userChrome.combined.urlbar.reload_button", true); // user_pref("userChrome.combined.sub_button.none_background", true); // user_pref("userChrome.combined.sub_button.as_normal", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_dialog", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); // user_pref("userChrome.rounding.square_menupopup", true); // user_pref("userChrome.rounding.square_menuitem", true); // user_pref("userChrome.rounding.square_infobox", true); // user_pref("userChrome.rounding.square_toolbar", true); // user_pref("userChrome.rounding.square_field", true); // user_pref("userChrome.rounding.square_urlView_item", true); // user_pref("userChrome.rounding.square_checklabel", true); // user_pref("userChrome.padding.first_tab", true); // user_pref("userChrome.padding.first_tab.always", true); // user_pref("userChrome.padding.drag_space", true); // user_pref("userChrome.padding.drag_space.maximized", true); // user_pref("userChrome.padding.toolbar_button.compact", true); // user_pref("userChrome.padding.menu_compact", true); // user_pref("userChrome.padding.bookmark_menu.compact", true); // user_pref("userChrome.padding.urlView_expanding", true); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); // user_pref("userChrome.urlbar.iconbox_with_separator", true); // user_pref("userChrome.urlView.as_commandbar", true); // user_pref("userChrome.urlView.full_width_padding", true); // user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); // user_pref("userChrome.urlView.focus_item_border", true); // user_pref("userChrome.tabbar.as_titlebar", true); // user_pref("userChrome.tabbar.fill_width", true); // user_pref("userChrome.tabbar.multi_row", true); // user_pref("userChrome.tabbar.unscroll", true); // user_pref("userChrome.tabbar.on_bottom", true); // user_pref("userChrome.tabbar.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tabbar.on_bottom.menubar_on_top", true); // Need on_bottom // user_pref("userChrome.tabbar.on_bottom.hidden_single_tab", true); // Need on_bottom // user_pref("userChrome.tabbar.one_liner", true); // user_pref("userChrome.tabbar.one_liner.combine_navbar", true); // Need one_liner // user_pref("userChrome.tabbar.one_liner.tabbar_first", true); // Need one_liner // user_pref("userChrome.tabbar.one_liner.responsive", true); // Need one_liner // user_pref("userChrome.tab.bottom_rounded_corner.all", true); // user_pref("userChrome.tab.bottom_rounded_corner.australis", true); // user_pref("userChrome.tab.bottom_rounded_corner.edge", true); // user_pref("userChrome.tab.bottom_rounded_corner.chrome", true); // user_pref("userChrome.tab.bottom_rounded_corner.chrome_legacy", true); // user_pref("userChrome.tab.bottom_rounded_corner.wave", true); // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); // user_pref("userChrome.tab.close_button_at_pinned.always", true); // user_pref("userChrome.tab.close_button_at_pinned.background", true); // user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover // user_pref("userChrome.tab.close_button_at_hover.with_selected", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label // user_pref("userChrome.tab.container.on_top", true); // user_pref("userChrome.tab.sound_with_favicons.on_center", true); // user_pref("userChrome.tab.selected_bold", true); // user_pref("userChrome.navbar.as_sidebar", true); // user_pref("userChrome.bookmarkbar.multi_row", true); // user_pref("userChrome.findbar.floating_on_top", true); // user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); // user_pref("userChrome.sidebar.overlap", true); // user_pref("userChrome.icon.disabled", true); // user_pref("userChrome.icon.account_image_to_right", true); // user_pref("userChrome.icon.account_label_to_right", true); // user_pref("userChrome.icon.menu.full", true); // user_pref("userChrome.icon.global_menu.mac", true); // -- User Content ------------------------------------------------------------- // user_pref("userContent.player.ui.twoline", true); // user_pref("userContent.newTab.hidden_logo", true); // user_pref("userContent.newTab.background_image", true); // Need wallpaper image to `userContent.css`. :root { --uc-newTab-wallpaper: url("../icons/background_image.png"); } // user_pref("userContent.page.proton_color.dark_blue_accent", true); // user_pref("userContent.page.proton_color.system_accent", true); // user_pref("userContent.page.dark_mode.pdf", true); // user_pref("userContent.page.monospace", true); // == Theme Default Settings =================================================== // -- User Chrome -------------------------------------------------------------- user_pref("userChrome.compatibility.theme", true); user_pref("userChrome.compatibility.os", true); user_pref("userChrome.theme.built_in_contrast", true); user_pref("userChrome.theme.system_default", true); user_pref("userChrome.theme.proton_color", true); user_pref("userChrome.theme.proton_chrome", true); // Need proton_color user_pref("userChrome.theme.fully_color", true); // Need proton_color user_pref("userChrome.theme.fully_dark", true); // Need proton_color user_pref("userChrome.decoration.cursor", true); user_pref("userChrome.decoration.field_border", true); user_pref("userChrome.decoration.download_panel", true); user_pref("userChrome.decoration.animate", true); user_pref("userChrome.padding.tabbar_width", true); user_pref("userChrome.padding.tabbar_height", true); user_pref("userChrome.padding.toolbar_button", true); user_pref("userChrome.padding.navbar_width", true); user_pref("userChrome.padding.urlbar", true); user_pref("userChrome.padding.bookmarkbar", true); user_pref("userChrome.padding.infobar", true); user_pref("userChrome.padding.menu", true); user_pref("userChrome.padding.bookmark_menu", true); user_pref("userChrome.padding.global_menubar", true); user_pref("userChrome.padding.panel", true); user_pref("userChrome.padding.popup_panel", true); user_pref("userChrome.tab.multi_selected", true); user_pref("userChrome.tab.unloaded", true); user_pref("userChrome.tab.letters_cleary", true); user_pref("userChrome.tab.close_button_at_hover", true); user_pref("userChrome.tab.sound_hide_label", true); user_pref("userChrome.tab.sound_with_favicons", true); user_pref("userChrome.tab.pip", true); user_pref("userChrome.tab.container", true); user_pref("userChrome.tab.crashed", true); user_pref("userChrome.fullscreen.overlap", true); user_pref("userChrome.fullscreen.show_bookmarkbar", true); user_pref("userChrome.icon.library", true); user_pref("userChrome.icon.panel", true); user_pref("userChrome.icon.menu", true); user_pref("userChrome.icon.context_menu", true); user_pref("userChrome.icon.global_menu", true); user_pref("userChrome.icon.global_menubar", true); // -- User Content ------------------------------------------------------------- user_pref("userContent.player.ui", true); user_pref("userContent.player.icon", true); user_pref("userContent.player.noaudio", true); user_pref("userContent.player.size", true); user_pref("userContent.player.click_to_play", true); user_pref("userContent.player.animate", true); user_pref("userContent.newTab.full_icon", true); user_pref("userContent.newTab.animate", true); user_pref("userContent.newTab.pocket_to_last", true); user_pref("userContent.newTab.searchbar", true); user_pref("userContent.page.field_border", true); user_pref("userContent.page.illustration", true); user_pref("userContent.page.proton_color", true); user_pref("userContent.page.dark_mode", true); // Need proton_color user_pref("userContent.page.proton", true); // Need proton_color // ** Useful Options *********************************************************** // Integrated calculator at urlbar user_pref("browser.urlbar.suggest.calculator", true); // Integrated unit convertor at urlbar // user_pref("browser.urlbar.unitConversion.enabled", true); // Draw in Titlebar // user_pref("browser.tabs.drawInTitlebar", true); // user_pref("browser.tabs.inTitlebar", 1); // Nightly, 96 Above // ** Scrolling Settings ******************************************************* // == Only Sharpen Scrolling =================================================== // Pref Value Original /* user_pref("mousewheel.min_line_scroll_amount", 10); // 5 user_pref("general.smoothScroll.mouseWheel.durationMinMS", 80); // 50 user_pref("general.smoothScroll.currentVelocityWeighting", "0.15"); // "0.25" user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); // "0.4" */ // == Smooth Scrolling ========================================================== // ** Scrolling Options ******************************************************** // based on natural smooth scrolling v2 by aveyo // this preset will reset couple extra variables for consistency // Pref Value Original /* user_pref("apz.allow_zooming", true); /// true user_pref("apz.force_disable_desktop_zooming_scrollbars", false); /// false user_pref("apz.paint_skipping.enabled", true); /// true user_pref("apz.windows.use_direct_manipulation", true); /// true user_pref("dom.event.wheel-deltaMode-lines.always-disabled", true); /// false user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); /// "0.25" <- 1. If scroll too slow, set to "0.15" user_pref("general.smoothScroll.durationToIntervalRatio", 1000); /// 200 user_pref("general.smoothScroll.lines.durationMaxMS", 100); /// 150 user_pref("general.smoothScroll.lines.durationMinMS", 0); /// 150 user_pref("general.smoothScroll.mouseWheel.durationMaxMS", 100); /// 200 user_pref("general.smoothScroll.mouseWheel.durationMinMS", 0); /// 50 user_pref("general.smoothScroll.mouseWheel.migrationPercent", 100); /// 100 user_pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12); /// 120 user_pref("general.smoothScroll.msdPhysics.enabled", true); /// false user_pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 200); /// 1250 user_pref("general.smoothScroll.msdPhysics.regularSpringConstant", 200); /// 1000 user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS", 10); /// 12 user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio", "1.20"); /// "1.3" user_pref("general.smoothScroll.msdPhysics.slowdownSpringConstant", 1000); /// 2000 user_pref("general.smoothScroll.other.durationMaxMS", 100); /// 150 user_pref("general.smoothScroll.other.durationMinMS", 0); /// 150 user_pref("general.smoothScroll.pages.durationMaxMS", 100); /// 150 user_pref("general.smoothScroll.pages.durationMinMS", 0); /// 150 user_pref("general.smoothScroll.pixels.durationMaxMS", 100); /// 150 user_pref("general.smoothScroll.pixels.durationMinMS", 0); /// 150 user_pref("general.smoothScroll.scrollbars.durationMaxMS", 100); /// 150 user_pref("general.smoothScroll.scrollbars.durationMinMS", 0); /// 150 user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); /// "0.4" user_pref("layers.async-pan-zoom.enabled", true); /// true user_pref("layout.css.scroll-behavior.spring-constant", "250.0"); /// "250.0" user_pref("mousewheel.acceleration.factor", 3); /// 10 user_pref("mousewheel.acceleration.start", -1); /// -1 user_pref("mousewheel.default.delta_multiplier_x", 100); /// 100 user_pref("mousewheel.default.delta_multiplier_y", 100); /// 100 user_pref("mousewheel.default.delta_multiplier_z", 100); /// 100 user_pref("mousewheel.min_line_scroll_amount", 0); /// 5 user_pref("mousewheel.system_scroll_override.enabled", true); /// true <- 2. If scroll too fast, set to false user_pref("mousewheel.system_scroll_override_on_root_content.enabled", false); /// true user_pref("mousewheel.transaction.timeout", 1500); /// 1500 user_pref("toolkit.scrollbox.horizontalScrollDistance", 4); /// 5 user_pref("toolkit.scrollbox.verticalScrollDistance", 3); /// 3 */ ```

Additional context

No response

marcoesposito1988 commented 5 months ago

This was driving me mad as well. I just removed the old installation (removed the chrome and user.js in the profile folder; you may want to make a backup instead), and reinstalled with the installation script. Seems to solve the issue

marcoesposito1988 commented 5 months ago

P.S.: never mind, the style was not being applied

SmallJoker commented 5 months ago

Latest "photon-style" is affected too. All other menus show up just fine.

Good: Firefox 121.0.1 Bad: Firefox 122.0

extremMiSt commented 5 months ago

I am having the same problem on 122.0 (64-Bit), original lepton style

edit: I found that applying the "light" theme instead of "system theme" (for/from linux mint in my case) fixed that particular problem, with (as far as I can tell from 5 mins clicking around) no other visible changes. so there is at least a workaround :)

ernstki commented 5 months ago

I found that applying the "light" theme instead of "system theme" (for/from linux mint in my case) fixed that particular problem, with (as far as I can tell from 5 mins clicking around) no other visible changes.

Thanks for documenting this. This is an effective workaround, and choosing either the built-in Firefox "Light" or "Dark" theme seems to resolve the problem just fine.

I think it's probably easier for the maintainer(s) to just point Linux people at this advice, rather than try to chase down exactly what bit of CSS deep within Firefox's internals is causing this for one particular—let's be honest—fringe platform.

black7375 commented 5 months ago

Fixed a conflict between the following commit and the previous one. https://github.com/mozilla/gecko-dev/commit/96fe482bec3ba8f7732f4e2e02c1c0dcbb3cf5f7

SmallJoker commented 5 months ago

I can confirm that the commit 4545b12 fixes this particular issue. Thank you.


Related to that, it seems that the URL bar background changed too. On my side, it used to be brighter, resulting in better contrast than whatever this is: (also related to text readability) grafik

black7375 commented 5 months ago

@SmallJoker What's your theme? If you're a Linux theme user, you can figure it out with the following command.

gsettings get org.gnome.desktop.interface gtk-theme
SmallJoker commented 5 months ago

@black7375 Greybird (shipped with xfce4) and it seem that Firefox now seems to pick different colors for the address bar background than before. Changing the theme does improve the situation. Apparently this is not a Firefox-UI-Fix issue. It also occurs when renaming the chrome dir. Report invalid. Thank you for the pointer.

black7375 commented 5 months ago

@SmallJoker With a little code, I reverted to excluding -moz-gtk-theme-family.

image

Since a better default theme is the goal, I think it can be fixed.

SmallJoker commented 5 months ago

@black7375 Thank you very much! I cherry-picked the commit onto the proton-style branch and the appearance is just like before updating Firefox. :heart:

grafik

andy0130tw commented 5 months ago

In the meanwhile, I add the following lines in userChrome.css to customize the background color of the dropdown. It is for dark themes, but you can modify the color as needed:

#urlbar:is([focused="true"], [open]) > #urlbar-background {
  background: #000d !important;
}
acarasimon96 commented 4 months ago

It looks like ed31543 brought back the transparent URL bar for me. I'm also using the default system theme and Breeze for the GTK theme.

black7375 commented 4 months ago

@acarasimon96 Sorry, I found your comment late. The rolled back colors are now enforced in all GTK environments.

black7375 commented 4 months ago

This should have been resolved in v8.6.0.