[Floorp] Vertical Tab Bug #766

surapunoyousei · 2023-09-02T08:51:05Z

Describe the bug

Lepton 8.0.0 or previous breaks Floorp's verticaltab.

Not show newtab icon & cannot scroll tab.

I tried to fix it, but it seemed to return depending on the environment, so I gave up.

NOTE: Not found at Photon UI or Proton FIx

We carry on research about this problem

Expected behavior

Not show tab scroll button & show newtab button

Screenshots

OS

Windows 11

OS - Others

No response

Firefox Version

115.2.0

Distribution

Theme

Theme - More Info

No response

`user.js` setup

user.js setup

//Floorp

// 1 = photon, 2 = lepton, 3 = proton fix
pref("floorp.lepton.interface", 2);

// ** Theme Default Options ****************************************************
// userchrome.css usercontent.css activate
pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

// Proton Enabled #127 || Removed at 97 #328 (Maintained for compatibility with ESR)
pref("browser.proton.enabled", true);

// Fill SVG Color
pref("svg.context-properties.content.enabled", true);

// CSS Color Mix - 88 Above
pref("layout.css.color-mix.enabled", true);

// CSS Blur Filter - 88 Above
pref("layout.css.backdrop-filter.enabled", true);

// Restore Compact Mode - 89 Above
pref("browser.compactmode.show", true);

// about:home Search Bar - 89 Above
pref("browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar", false);

// CSS's `:has()` selector #457 - 103 Above
pref("layout.css.has-selector.enabled", true);

// Browser Theme Based Scheme - Will be activate 95 Above
// 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
pref("userChrome.tab.connect_to_window",          true); // Original, Photon
pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

pref("userChrome.tab.lepton_like_padding",        true); // Original
pref("userChrome.tab.photon_like_padding",       false); // Photon

pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
pref("userChrome.tab.static_separator",          false); // Photon
pref("userChrome.tab.static_separator.selected_accent", false); // Just option
pref("userChrome.tab.bar_separator",             false); // Just option

pref("userChrome.tab.newtab_button_like_tab",     true); // Original
pref("userChrome.tab.newtab_button_smaller",     false); // Photon
pref("userChrome.tab.newtab_button_proton",      false); // Proton

pref("userChrome.icon.panel_full",                true); // Original, Proton
pref("userChrome.icon.panel_photon",             false); // Photon

// Original Only
pref("userChrome.tab.box_shadow",                 false);
pref("userChrome.tab.bottom_rounded_corner",      true);

// Photon Only
pref("userChrome.tab.photon_like_contextline",   false);
pref("userChrome.rounding.square_tab",           false);

// == Theme Compatibility Settings =============================================
// pref("userChrome.compatibility.accent_color",         true); // Firefox v103 Below
// pref("userChrome.compatibility.covered_header_image", true);
// pref("userChrome.compatibility.panel_cutoff",         true);
// pref("userChrome.compatibility.navbar_top_border",    true);
// pref("userChrome.compatibility.dynamic_separator",    true); // Need dynamic_separator

// pref("userChrome.compatibility.os.linux_non_native_titlebar_button", true);
// pref("userChrome.compatibility.os.windows_maximized", true);
// pref("userChrome.compatibility.os.win11",             true);

// == Theme Custom Settings ====================================================
// -- User Chrome --------------------------------------------------------------
// pref("userChrome.theme.private",                       true);
// pref("userChrome.theme.proton_color.dark_blue_accent", true);
// pref("userChrome.theme.monospace",                     true);
// pref("userChrome.theme.transparent.frame",             true);
// pref("userChrome.theme.transparent.menu",              true);
// pref("userChrome.theme.transparent.panel",             true);
// pref("userChrome.theme.non_native_menu",               true); // only for linux

// pref("userChrome.decoration.disable_panel_animate",    true);
// pref("userChrome.decoration.disable_sidebar_animate",  true);
// pref("userChrome.decoration.panel_button_separator",   true);
// pref("userChrome.decoration.panel_arrow",              true);

// pref("userChrome.autohide.tab",                        true);
// pref("userChrome.autohide.tab.opacity",                true);
// pref("userChrome.autohide.tab.blur",                   true);
// pref("userChrome.autohide.tabbar",                     true);
// pref("userChrome.autohide.navbar",                     true);
// pref("userChrome.autohide.bookmarkbar",                true);
// pref("userChrome.autohide.sidebar",                    true);
// pref("userChrome.autohide.fill_urlbar",                true);
// pref("userChrome.autohide.back_button",                true);
// pref("userChrome.autohide.forward_button",             true);
// pref("userChrome.autohide.page_action",                true);
// pref("userChrome.autohide.toolbar_overlap",            true);
// pref("userChrome.autohide.toolbar_overlap.allow_layout_shift", true);

// pref("userChrome.hidden.tab_icon",                     true);
// pref("userChrome.hidden.tab_icon.always",              true);
// pref("userChrome.hidden.tabbar",                       true);
// pref("userChrome.hidden.navbar",                       true);
// pref("userChrome.hidden.private_indicator",            true);
// pref("userChrome.hidden.titlebar_container",           true);
// pref("userChrome.hidden.sidebar_header",               true);
// pref("userChrome.hidden.sidebar_header.vertical_tab_only", true);
// pref("userChrome.hidden.urlbar_iconbox",               true);
// pref("userChrome.hidden.urlbar_iconbox.label_only",    true);
// pref("userChrome.hidden.bookmarkbar_icon",             true);
// pref("userChrome.hidden.bookmarkbar_label",            true);
// pref("userChrome.hidden.disabled_menu",                true);

// pref("userChrome.centered.tab",                        true);
// pref("userChrome.centered.tab.label",                  true);
// pref("userChrome.centered.urlbar",                     true);
// pref("userChrome.centered.bookmarkbar",                true);

// pref("userChrome.counter.tab",                         true);
// pref("userChrome.counter.bookmark_menu",               true);

// pref("userChrome.combined.nav_button",                 true);
// pref("userChrome.combined.nav_button.home_button",     true);
// pref("userChrome.combined.urlbar.nav_button",          true);
// pref("userChrome.combined.urlbar.home_button",         true);
// pref("userChrome.combined.urlbar.reload_button",       true);
// pref("userChrome.combined.sub_button.none_background", true);
// pref("userChrome.combined.sub_button.as_normal",       true);

// pref("userChrome.rounding.square_button",              true);
// pref("userChrome.rounding.square_dialog",              true);
// pref("userChrome.rounding.square_panel",               true);
// pref("userChrome.rounding.square_panelitem",           true);
// pref("userChrome.rounding.square_menupopup",           true);
// pref("userChrome.rounding.square_menuitem",            true);
// pref("userChrome.rounding.square_infobox",             true);
// pref("userChrome.rounding.square_toolbar",             true);
// pref("userChrome.rounding.square_field",               true);
// pref("userChrome.rounding.square_urlView_item",        true);
// pref("userChrome.rounding.square_checklabel",          true);

// pref("userChrome.padding.first_tab",                   true);
// pref("userChrome.padding.first_tab.always",            true);
// pref("userChrome.padding.drag_space",                  true);
// pref("userChrome.padding.drag_space.maximized",        true);

// pref("userChrome.padding.toolbar_button.compact",      true);
// pref("userChrome.padding.menu_compact",                true);
// pref("userChrome.padding.bookmark_menu.compact",       true);
// pref("userChrome.padding.urlView_expanding",           true);
// pref("userChrome.padding.urlView_result",              true);
// pref("userChrome.padding.panel_header",                true);

// pref("userChrome.urlbar.iconbox_with_separator",       true);

// pref("userChrome.urlView.as_commandbar",               true);
// pref("userChrome.urlView.full_width_padding",          true);
// pref("userChrome.urlView.always_show_page_actions",    true);
// pref("userChrome.urlView.move_icon_to_left",           true);
// pref("userChrome.urlView.go_button_when_typing",       true);
// pref("userChrome.urlView.focus_item_border",           true);

// pref("userChrome.tabbar.as_titlebar",                  true);
// pref("userChrome.tabbar.fill_width",                   true);
// pref("userChrome.tabbar.multi_row",                    true);
// pref("userChrome.tabbar.unscroll",                     true);
// pref("userChrome.tabbar.on_bottom",                    true);
// pref("userChrome.tabbar.on_bottom.above_bookmark",     true); // Need on_bottom
// pref("userChrome.tabbar.on_bottom.menubar_on_top",     true); // Need on_bottom
// pref("userChrome.tabbar.on_bottom.hidden_single_tab",  true); // Need on_bottom
// pref("userChrome.tabbar.one_liner",                    true);
// pref("userChrome.tabbar.one_liner.combine_navbar",     true); // Need one_liner
// pref("userChrome.tabbar.one_liner.tabbar_first",       true); // Need one_liner
// pref("userChrome.tabbar.one_liner.responsive",         true); // Need one_liner

// pref("userChrome.tab.bottom_rounded_corner.all",       true);
// pref("userChrome.tab.bottom_rounded_corner.australis", true);
// pref("userChrome.tab.bottom_rounded_corner.edge",      true);
// pref("userChrome.tab.bottom_rounded_corner.chrome",    true);
// pref("userChrome.tab.bottom_rounded_corner.chrome_legacy", true);
// pref("userChrome.tab.bottom_rounded_corner.wave",      true);
// pref("userChrome.tab.always_show_tab_icon",            true);
// pref("userChrome.tab.close_button_at_pinned",          true);
// pref("userChrome.tab.close_button_at_pinned.always",   true);
// pref("userChrome.tab.close_button_at_pinned.background", true);
// pref("userChrome.tab.close_button_at_hover.always",    true); // Need close_button_at_hover
// pref("userChrome.tab.close_button_at_hover.with_selected", true);  // Need close_button_at_hover
// pref("userChrome.tab.sound_show_label",                true); // Need remove sound_hide_label
// pref("userChrome.tab.container.on_top",                true);
// pref("userChrome.tab.sound_with_favicons.on_center",   true);
// pref("userChrome.tab.selected_bold",                   true);

// pref("userChrome.navbar.as_sidebar",                   true);

// pref("userChrome.bookmarkbar.multi_row",               true);

// pref("userChrome.findbar.floating_on_top",             true);

// pref("userChrome.panel.remove_strip",                  true);
// pref("userChrome.panel.full_width_separator",          true);
// pref("userChrome.panel.full_width_padding",            true);

// pref("userChrome.sidebar.overlap",                     true);

// pref("userChrome.icon.disabled",                       true);
// pref("userChrome.icon.account_image_to_right",         true);
// pref("userChrome.icon.account_label_to_right",         true);
// pref("userChrome.icon.menu.full",                      true);
// pref("userChrome.icon.global_menu.mac",                true);

// -- User Content -------------------------------------------------------------
// pref("userContent.player.ui.twoline",                  true);

// pref("userContent.newTab.hidden_logo",                 true);
// pref("userContent.newTab.background_image",            true); // Need wallpaper image --uc-newTab-wallpaper: url("../icons/background_image.png");

// pref("userContent.page.proton_color.dark_blue_accent", true);
// pref("userContent.page.proton_color.system_accent",    true);
// pref("userContent.page.dark_mode.pdf",                 true);
// pref("userContent.page.monospace",                     true);

// == Theme Default Settings ===================================================
// -- User Chrome --------------------------------------------------------------
pref("userChrome.compatibility.theme",       true);
pref("userChrome.compatibility.os",          true);

pref("userChrome.theme.built_in_contrast",   true);
pref("userChrome.theme.system_default",      true);
pref("userChrome.theme.proton_color",        true);
pref("userChrome.theme.proton_chrome",       true); // Need proton_color
pref("userChrome.theme.fully_color",         true); // Need proton_color
pref("userChrome.theme.fully_dark",          true); // Need proton_color

pref("userChrome.decoration.cursor",         true);
pref("userChrome.decoration.field_border",   true);
pref("userChrome.decoration.download_panel", true);
pref("userChrome.decoration.animate",        true);

pref("userChrome.padding.tabbar_width",      true);
pref("userChrome.padding.tabbar_height",     true);
pref("userChrome.padding.toolbar_button",    true);
pref("userChrome.padding.navbar_width",      true);
pref("userChrome.padding.urlbar",            true);
pref("userChrome.padding.bookmarkbar",       true);
pref("userChrome.padding.infobar",           true);
pref("userChrome.padding.menu",              true);
pref("userChrome.padding.bookmark_menu",     true);
pref("userChrome.padding.global_menubar",    true);
pref("userChrome.padding.panel",             true);
pref("userChrome.padding.popup_panel",       true);

pref("userChrome.tab.multi_selected",        true);
pref("userChrome.tab.unloaded",              true);
pref("userChrome.tab.letters_cleary",        true);
pref("userChrome.tab.close_button_at_hover", true);
pref("userChrome.tab.sound_hide_label",      true);
pref("userChrome.tab.sound_with_favicons",   true);
pref("userChrome.tab.pip",                   true);
pref("userChrome.tab.container",             true);
pref("userChrome.tab.crashed",               true);

pref("userChrome.fullscreen.overlap",        true);
pref("userChrome.fullscreen.show_bookmarkbar", true);

pref("userChrome.icon.library",              true);
pref("userChrome.icon.panel",                true);
pref("userChrome.icon.menu",                 true);
pref("userChrome.icon.context_menu",         true);
pref("userChrome.icon.global_menu",          true);
pref("userChrome.icon.global_menubar",       true);

// -- User Content -------------------------------------------------------------
pref("userContent.player.ui",             true);
pref("userContent.player.icon",           true);
pref("userContent.player.noaudio",        true);
pref("userContent.player.size",           true);
pref("userContent.player.click_to_play",  true);
pref("userContent.player.animate",        true);

pref("userContent.newTab.full_icon",      true);
pref("userContent.newTab.animate",        true);
pref("userContent.newTab.pocket_to_last", true);
pref("userContent.newTab.searchbar",      true);

pref("userContent.page.field_border",     true);
pref("userContent.page.illustration",     true);
pref("userContent.page.proton_color",     true);
pref("userContent.page.dark_mode",        true); // Need proton_color
pref("userContent.page.proton",           true); // Need proton_color

// ** Useful Options ***********************************************************
// Integrated calculator at urlbar
pref("browser.urlbar.suggest.calculator", true);

// Integrated unit convertor at urlbar
// pref("browser.urlbar.unitConversion.enabled", true);

// Draw in Titlebar
// pref("browser.tabs.drawInTitlebar", true);
// pref("browser.tabs.inTitlebar",        1); // Nightly, 96 Above

// ** Scrolling Settings *******************************************************
// == Only Sharpen Scrolling ===================================================
//         Pref                                             Value      Original
/*
pref("mousewheel.min_line_scroll_amount",                 10); //        5
pref("general.smoothScroll.mouseWheel.durationMinMS",     80); //       50
pref("general.smoothScroll.currentVelocityWeighting", "0.15"); //   "0.25"
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
/*
pref("apz.allow_zooming",                               true);            ///     true
pref("apz.force_disable_desktop_zooming_scrollbars",   false);            ///    false
pref("apz.paint_skipping.enabled",                      true);            ///     true
pref("apz.windows.use_direct_manipulation",             true);            ///     true
pref("dom.event.wheel-deltaMode-lines.always-disabled", true);            ///    false
pref("general.smoothScroll.currentVelocityWeighting", "0.12");            ///   "0.25" <- 1. If scroll too slow, set to "0.15"
pref("general.smoothScroll.durationToIntervalRatio",    1000);            ///      200
pref("general.smoothScroll.lines.durationMaxMS",         100);            ///      150
pref("general.smoothScroll.lines.durationMinMS",           0);            ///      150
pref("general.smoothScroll.mouseWheel.durationMaxMS",    100);            ///      200
pref("general.smoothScroll.mouseWheel.durationMinMS",      0);            ///       50
pref("general.smoothScroll.mouseWheel.migrationPercent", 100);            ///      100
pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12);   ///      120
pref("general.smoothScroll.msdPhysics.enabled",                  true);   ///    false
pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 200);   ///     1250
pref("general.smoothScroll.msdPhysics.regularSpringConstant",     200);   ///     1000
pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS",         10);   ///       12
pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio",  "1.20");   ///    "1.3"
pref("general.smoothScroll.msdPhysics.slowdownSpringConstant",   1000);   ///     2000
pref("general.smoothScroll.other.durationMaxMS",         100);            ///      150
pref("general.smoothScroll.other.durationMinMS",           0);            ///      150
pref("general.smoothScroll.pages.durationMaxMS",         100);            ///      150
pref("general.smoothScroll.pages.durationMinMS",           0);            ///      150
pref("general.smoothScroll.pixels.durationMaxMS",        100);            ///      150
pref("general.smoothScroll.pixels.durationMinMS",          0);            ///      150
pref("general.smoothScroll.scrollbars.durationMaxMS",    100);            ///      150
pref("general.smoothScroll.scrollbars.durationMinMS",      0);            ///      150
pref("general.smoothScroll.stopDecelerationWeighting", "0.6");            ///    "0.4"
pref("layers.async-pan-zoom.enabled",                   true);            ///     true
pref("layout.css.scroll-behavior.spring-constant",   "250.0");            ///   "250.0"
pref("mousewheel.acceleration.factor",                     3);            ///       10
pref("mousewheel.acceleration.start",                     -1);            ///       -1
pref("mousewheel.default.delta_multiplier_x",            100);            ///      100
pref("mousewheel.default.delta_multiplier_y",            100);            ///      100
pref("mousewheel.default.delta_multiplier_z",            100);            ///      100
pref("mousewheel.min_line_scroll_amount",                  0);            ///        5
pref("mousewheel.system_scroll_override.enabled",       true);            ///     true <- 2. If scroll too fast, set to false
pref("mousewheel.system_scroll_override_on_root_content.enabled", false); ///     true
pref("mousewheel.transaction.timeout",                  1500);            ///     1500
pref("toolkit.scrollbox.horizontalScrollDistance",         4);            ///        5
pref("toolkit.scrollbox.verticalScrollDistance",           3);            ///        3
*/

Additional context

If you have any other information I would be happy to provide it.

During this time, there is no problem as Floorp provides Photon as the default.

The text was updated successfully, but these errors were encountered:

black7375 · 2023-09-02T08:58:07Z

Okay. Is there a binary that can be reproduced? (Should I download version v11.2.0 and test it?)
I'll try to fix the bug after I go home.

surapunoyousei · 2023-09-02T09:54:16Z

It's possible that v11.2.0 is reproducible, but we'll be handing out a reproducible build tomorrow on Daylight channel, as it includes the temporary fixes we made.

surapunoyousei · 2023-09-02T10:16:09Z

More info:

https://twitter.com/Naporitansabu/status/1697778469093167457?s=20

Newtab button's view bug is fixed by Floorp Injection

  /* Lepton injection */
  #tabs-newtab-button .toolbarbutton-icon[class] {
    padding: 0px !important;
  }

  #tabs-newtab-button[class]::before {
    opacity: 0 !important;
  }

surapunoyousei · 2023-09-02T14:54:05Z

Build is finished.

https://github.com/Floorp-Projects/Floorp/releases/tag/beta

black7375 · 2023-09-02T15:12:18Z

First, I found the cause.

Firefox-UI-Fix/css/leptonChromeESR.css

Lines 4198 to 4202 in cc24b33

    
           @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { 
        
             :root { 
        
               --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ 
        
             } 
        
           }

However, considering that the commit is last year, it is speculated that there is a problem with the Firefox version update.

What is certain is that if there is an overflow property(overflowing="true") in #tabbrowser-arrowscrollbox, a problem will occur.

As a temporary solution, you can use the following code:

#tabbrowser-tabs[orient="vertical"] {
  --tab-block-margin: 4px !important;
}

surapunoyousei · 2023-09-02T15:19:15Z

Thank you very much. I appreciate it.

I am very unfamiliar with the CSS area in Gecko. so your advice is helpful. I will try to provide an update using a temporary fix.

black7375 · 2023-09-02T15:29:56Z

I've documented it a little bit, but there are a lot of pitfalls besides. 😿
It's been 3 years, but I still make a mistake.

surapunoyousei · 2023-09-02T15:32:10Z

Don't worry about it.

Floorp is still small, so as long as it supports Firefox with a much larger user base, nothing will go wrong.

Thank you for your approach 💛

black7375 · 2023-09-02T16:12:25Z

For now, I also reflected it, and I added a small code to make the height the same as before.
I think it would be good to test it.

I found one more hidden reproduction condition.
It can be reproduced on the laptop display(1920x1080), but it works normally on the 4K display(3840x2160).
Side effects related bugs are really tricky..

surapunoyousei added the Issue::Bug Something isn't working label Sep 2, 2023

black7375 added Env::Windows Issues on Windows10, Windows11, unknown windows Component::Tabbar Tab or tabbar Class::SideEffect Unexpected side effect, undefined behavior labels Sep 2, 2023

surapunoyousei closed this as completed Sep 2, 2023

black7375 added a commit that referenced this issue Sep 2, 2023

Fix: Tabbar - Floorp vertical tabbar sideeffect #766

cd4b1c2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Floorp] Vertical Tab Bug #766

[Floorp] Vertical Tab Bug #766

surapunoyousei commented Sep 2, 2023 •

edited

Loading

black7375 commented Sep 2, 2023 •

edited

Loading

surapunoyousei commented Sep 2, 2023 •

edited

Loading

surapunoyousei commented Sep 2, 2023 •

edited

Loading

surapunoyousei commented Sep 2, 2023

black7375 commented Sep 2, 2023

surapunoyousei commented Sep 2, 2023 •

edited

Loading

black7375 commented Sep 2, 2023

surapunoyousei commented Sep 2, 2023

black7375 commented Sep 2, 2023

[Floorp] Vertical Tab Bug #766

[Floorp] Vertical Tab Bug #766

Comments

surapunoyousei commented Sep 2, 2023 • edited Loading

Describe the bug

Expected behavior

Screenshots

OS

OS - Others

Firefox Version

Distribution

Theme

Theme - More Info

user.js setup

Additional context

black7375 commented Sep 2, 2023 • edited Loading

surapunoyousei commented Sep 2, 2023 • edited Loading

surapunoyousei commented Sep 2, 2023 • edited Loading

surapunoyousei commented Sep 2, 2023

black7375 commented Sep 2, 2023

surapunoyousei commented Sep 2, 2023 • edited Loading

black7375 commented Sep 2, 2023

surapunoyousei commented Sep 2, 2023

black7375 commented Sep 2, 2023

surapunoyousei commented Sep 2, 2023 •

edited

Loading

`user.js` setup

black7375 commented Sep 2, 2023 •

edited

Loading

surapunoyousei commented Sep 2, 2023 •

edited

Loading

surapunoyousei commented Sep 2, 2023 •

edited

Loading

surapunoyousei commented Sep 2, 2023 •

edited

Loading