firefox multi row space and window button placement

[RashiqAzhan]

Is there a way to better utilize the space boxed in aquamarine? Maybe have the tabs push into them more?

Is it possible to move the window controls (orange) to the bottom right side in the empty space on the toolbar?

Is there a way to push the toolbar to utilize all the space on the left (energy green)?

I'm using the git method with the latest commit on the master branch. userChome.css

@import url(chrome/multi-row_tabs_window_control_patch.css);
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
@import url(chrome/autohide_menubar.css);
@import url(chrome/hide_toolbox_top_bottom_borders.css);
@import url(chrome/vertical_context_navigation.css);
@import url(chrome/minimal_popup_scrollbars.css);
@import url(chrome/dark_context_menus.css);
@import url(chrome/dark_additional_windows.css);
@import url(chrome/dark_checkboxes_and_radios.css);
@import url(chrome/urlbar_centered_text.css);
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/multi-row_tabs.css);
@import url(chrome/urlbar_popup_full_width.css);
@import url(chrome/compact_extensions_panel.css);
@import url(chrome/iconized_main_menu.css);
@import url(chrome/privatemode_indicator_as_menu_button.css);
@import url(chrome/minimal_in-UI_scrollbars.css);
@import url(chrome/loading_indicator_bouncing_line.css);

:root{
  --toolbar-bgcolor: rgb(36,44,59) !important;
  --uc-menu-bkgnd: var(--toolbar-bgcolor);
  --arrowpanel-background: var(--toolbar-bgcolor) !important;
  --autocomplete-popup-background: var(--toolbar-bgcolor) !important;
  --uc-menu-disabled: rgb(90,90,90) !important;
  --lwt-toolbar-field-focus: rgb(36,44,59) !important;
  --multirow-n-rows: 20; 
  --multirow-tab-dynamic-width: 1; 
}

#sidebar-box{ --sidebar-background-color: var(--toolbar-bgcolor) !important; }
window.sidebar-panel{ --lwt-sidebar-background-color: rgb(36,44,59) !important; }

#toolbar-menubar{
  height: 30px;
}

Love your work. You're making Firefox bearable again.

[MrOtherGuy]

There's bit of compatibility problem with some of those, but firstly, reorder them such that:

1. window_control_placeholder_support.css is loaded first
2. multi-row_tabs_window_control_patch.css is loaded after multi-row_tabs.css

That should make window control buttons show up in next to the main menu button like you wanted.

The compatibility problem then is between autohide_menubar.css and multi-row_tabs_window_control_patch.css. Both of these modify how menubar gets rendered and they're not going to work together - so umm I see two options:

1. If you want autohide_menubar.css behavior then remove both window_control_placeholder_support.css and multi-row_tabs_window_control_patch.css
2. If you don't want that, then remove autohide_menubar.css

I also updated multi-row_tabs_window_control_patch.css just now, so make sure that grab that. I made it depend on window_control_placeholder_support which should improve style and operating system compatibility a lot.

[RashiqAzhan]

Thank you for the reply. I've ordered the imports as advised but it seems the result is a bit unexpected.

Case 1

multi-row_tabs.css & autohide_menubar.css only.

@import url(chrome/multi-row_tabs.css);
@import url(chrome/autohide_menubar.css);
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
@import url(chrome/hide_toolbox_top_bottom_borders.css);
@import url(chrome/vertical_context_navigation.css);
@import url(chrome/minimal_popup_scrollbars.css);
@import url(chrome/dark_context_menus.css);
@import url(chrome/dark_additional_windows.css);
@import url(chrome/dark_checkboxes_and_radios.css);
@import url(chrome/urlbar_centered_text.css);
@import url(chrome/centered_statuspanel.css);
@import url(chrome/urlbar_popup_full_width.css);
@import url(chrome/compact_extensions_panel.css);
@import url(chrome/iconized_main_menu.css);
@import url(chrome/privatemode_indicator_as_menu_button.css);
@import url(chrome/minimal_in-UI_scrollbars.css);
@import url(chrome/loading_indicator_bouncing_line.css);

It looks good but the top area stills where the tabs are looks a bit underutilized. Are the window controls unmovable? If so then I guess this is the best solution for now.

Case 2

window_control_placeholder_support.css, multi-row_tabs.css, & multi-row_tabs_window_control_patch.css respectively.

@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/multi-row_tabs.css);
@import url(chrome/multi-row_tabs_window_control_patch.css);
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);
@import url(chrome/button_effect_scale_onclick.css);
@import url(chrome/hide_toolbox_top_bottom_borders.css);
@import url(chrome/vertical_context_navigation.css);
@import url(chrome/minimal_popup_scrollbars.css);
@import url(chrome/dark_context_menus.css);
@import url(chrome/dark_additional_windows.css);
@import url(chrome/dark_checkboxes_and_radios.css);
@import url(chrome/urlbar_centered_text.css);
@import url(chrome/centered_statuspanel.css);
@import url(chrome/urlbar_popup_full_width.css);
@import url(chrome/compact_extensions_panel.css);
@import url(chrome/iconized_main_menu.css);
@import url(chrome/privatemode_indicator_as_menu_button.css);
@import url(chrome/minimal_in-UI_scrollbars.css);
@import url(chrome/loading_indicator_bouncing_line.css);

Still has that white space on the right besides the extensions with the window controls still with the tabs. Not sure if this is expected.

Also, a row of tabs seems to always be missing with these three styles. You can see the tabs on the left using sideberry but they're not at the top. Window control is occupying the empty space which is nice. Usability suffers due to the top row of tabs not being visible. Thoughts?

I'm on commit fc7b95c03796de692a5fe1decb16a64a936511ca which should be the latest master at the time of writing.

[MrOtherGuy]

Case 1 looks as if you have not actually enabled menubar in Firefox. You must do that for autohide_menubar.css to work as expected.

And actually same applies to case 2 as well. Both images look what I would expect if menubar is disabled by Firefox options.

You can enable menubar by right-clicking the toolbar area and checking menubar option, or you can do it via cuatomize mode.

[RashiqAzhan]

That explains it. Thank you so much. It's working as expected now.