black7375 / Firefox-UI-Fix

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

[macOS] UI is broken when enter full-screen (intermittent) #745

Open sukinoverse opened 1 year ago

sukinoverse commented 1 year ago

Describe the bug

UI is broken when enter full-screen

Note 1: this is intermittent happened but I experienced many times this month.

Note 2: If I quit Firefox and re-open, the issue will be resolved, everything back to the normal behavior.

Expected behavior

When enter full-screen mode, UI should be displayed normally

Screenshots

Screen shot

Screenshot 2023-07-20 at 18 54 08

Screen recording

https://github.com/black7375/Firefox-UI-Fix/assets/9070844/d16c454f-031a-48fb-9a5c-81cae0dd8807

OS

Mac OS

OS - Others

No response

Firefox Version

115.0.2

Distribution

Theme

Theme - More Info

No response

user.js setup

user.js setup
```javascript // ** Theme Default Options **************************************************** // userchrome.css usercontent.css activate user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // Proton Enabled #127 || Removed at 97 #328 (Maintained for compatibility with ESR) user_pref("browser.proton.enabled", true); // Fill SVG Color user_pref("svg.context-properties.content.enabled", true); // CSS Color Mix - 88 Above user_pref("layout.css.color-mix.enabled", true); // CSS Blur Filter - 88 Above user_pref("layout.css.backdrop-filter.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.proton_color.dark_blue_accent", true); // user_pref("userChrome.theme.monospace", true); // 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.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.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.page.proton_color.dark_blue_accent", true); // user_pref("userContent.page.proton_color.system_accent", 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

black7375 commented 1 year ago

Thank you for report.

It doesn't seem to be reproduced in my environment. Because I didn't have a Mac, I tested it using a VM, so it could be different from a real device. A typical difference is that graphics acceleration does not apply.

https://github.com/black7375/Firefox-UI-Fix/assets/25581533/c2962fed-a3a7-43e8-b6d5-d65c10f7b480


If you are willing to help, please try the following:

  1. Make it a full screen to see if there is a problem
  2. Activate browser toolbox
  3. Test the CSS on and off for various elements (e.g. #navigator-toolbox-background, #navigator-toolbox, #titlebar, #nav-bar ..etc) Check the properties of the leptonChrome.css file.

image

sukinoverse commented 1 year ago

@black7375 Thanks for your guideline. I will definitely help to debug once the issue come up again.

Anyway, I'm not familiar with debugging Firefox UI. What do you mean by Check the properties of the leptonChrome.css file. ?

black7375 commented 1 year ago

Looking at the right side of the browser toolbox screenshot, there are CSS rules applied to the elements. You can also check the file names that contain CSSs.

The screenshot above, leptonChrome.css:310. image

Browser default rules are less likely to cause problems, so it is recommended to explore customized CSS rules. (The file name containing the custom CSS is leptonChrome.css.)

sukinoverse commented 1 year ago

@black7375 Hi! I would like to update this issue with new info. I just experienced it again from Waterfox.

Looks like that area that caused the issue is #tab-notification-deck

Screen recording https://www.dropbox.com/scl/fi/kwqudyurme927l68g2c2p/2023-08-10-Screen-Recording-At-20.46.38.mp4?rlkey=czlmq069u0wkzgq7fwirxis1b&dl=0

https://github.com/black7375/Firefox-UI-Fix/assets/25581533/28aed7ac-83f1-4fa9-967e-6ca373c4cd1b

black7375 commented 1 year ago

Thank you for the detailed information. First, I'll try to check as much as possible!!