Missing window close button

[semente]

Hello!

Any idea how to fix this?

Window close button disappears when I'm using the settings below. I'm on Firefox 92, GNOME 40 and Debian. Same happened on Firefox 91 and GNOME 38.

@import url(chrome/tabs_on_bottom.css);
@import url(chrome/hide_tabs_with_one_tab.css);
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/window_control_placeholder_support.css);

:root[tabsintitlebar]{
    --uc-window-control-width: 24px;
    --uc-window-drag-space-width: 6px;
}

Thanks!

[semente]

Looks like the issue is on hide_tabs_with_one_tab.css. Having only this CSS enabled causes the issue.

[MrOtherGuy]

Looks like the issue is on hide_tabs_with_one_tab.css. Having only this CSS enabled causes the issue.

That's pretty much intentional. There's no way to create space in the nav-bar for the window controls only when there is only one tab. So, for simplicity sake I've opted to not show window controls at all when there's only one tab.

However, using the setup you mentioned works fine on my system, for me window controls are shown regardless of if the tabs toolbar is collapsed or not.

[semente]

That's pretty much intentional. There's no way to create space in the nav-bar for the window controls only when there is only one tab. So, for simplicity sake I've opted to not show window controls at all when there's only one tab.

hmm but the button is there actually. I can click on it and close the window. Just the image for the icon that is missing. I noticed that privatemode_indicator_as_menu_button.css has the same issue. When I enabled it, regardless if I'm using hide_tabs_with_one_tab.css or not, the menu icon image disappears in private windows, but it is still clickable.

Following is the screenshot from a private window with the privatemode_indicator_as_menu_button.css enabled:

Setup:

@import url(chrome/tabs_on_bottom.css);
/* @import url(chrome/hide_tabs_with_one_tab.css); */
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/privatemode_indicator_as_menu_button.css);

:root[tabsintitlebar]{
    --uc-window-control-width: 24px;
    --uc-window-drag-space-width: 6px;
}

[MrOtherGuy]

Hmm, thanks foe all the info. I need to do some further testing on Linux - I think the issue you face might just not happen on Windows.

privatemode_indicator_as_menu_button.css is broken though. The image it links to doesn't exist anymore so that style definitely needed updating. I've fixed that now.

[MrOtherGuy]

By the way, does the close button appear correctly if there are multiple tabs (so the toolbar is not collapsed) when you only use hide_tabs_with_one_tab.css?

[MrOtherGuy]

Looking at this, it's indeed Linux specific, or at least Win10 is not affected. The problem is how the window control buttons are drawn on Linux. I don't think there is any way to make the style work, sadly.

However, you can use hide_tabs_with_one_tab_w_window_controls.css which should work fine. The issue with that is that the placeholder space for window controls will always be present in nav-bar, but maybe that's not such a big deal for you if you are only showing the close button.

[semente]

privatemode_indicator_as_menu_button.css is broken though. The image it links to doesn't exist anymore so that style definitely needed updating. I've fixed that now.

Private mode indicator is working now! :)

By the way, does the close button appear correctly if there are multiple tabs (so the toolbar is not collapsed) when you only use hide_tabs_with_one_tab.css?

Hey, that is how it looks using only this CSS (multiple tabs):

Single tab:

[semente]

Looking at this, it's indeed Linux specific, or at least Win10 is not affected. The problem is how the window control buttons are drawn on Linux. I don't think there is any way to make the style work, sadly.

No problem at all, I appreciate your support! I can live without the X icon, button works if I needed it anyway. :)

However, you can use hide_tabs_with_one_tab_w_window_controls.css which should work fine. The issue with that is that the placeholder space for window controls will always be present in nav-bar, but maybe that's not such a big deal for you if you are only showing the close button.

Yea, it is too much empty space. And still, no X icon though if I click in the button it works like in the other CSS.

[MrOtherGuy]

So, hide_tabs_with_one_tab_w_window_controls doesn't work either for you? That's interesting, because it worked fine for me on my linux machine which is running pretty much standard Fedora.

[semente]

@MrOtherGuy hmm looks like I didn't make a test with hide_tabs_with_one_tab_w_window_controls alone so I redid all the tests and got better results, look:

hide_tabs_with_one_tab.css ALONE

No close button at all.

(two tabs)

(one tab)

hide_tabs_with_one_tab.css COMBINED with tabs_on_bottom.css

Close button works, but X icon is invisible and over the menu button (I can't easily click in menu button)

hide_tabs_with_one_tab_w_window_controls ALONE

Close button works. Requires extra css for better position it.

hide_tabs_with_one_tab_w_window_controls.css COMBINED with tabs_on_bottom

If hide_tabs_with_one_tab_w_window CSS came after tabs_on_bottom, it won't work as expected (no X icon but clickable close button), BUT the opposite works:

@import url(chrome/hide_tabs_with_one_tab_w_window_controls.css);                    
@import url(chrome/tabs_on_bottom.css);      

Now I just need to add a margin between menu and close buttons (any tips?).

[MrOtherGuy]

hide_tabs_with_one_tab_w_window_controls.css requires window_control_placeholder_support.css and it mentions that. That should work fine since tabs_on_bottom.css also requires it so you should try this setup:

@import url(chrome/window_control_placeholder_support.css);
@import url(chrome/hide_tabs_with_one_tab_w_window_controls.css);
@import url(chrome/tabs_on_bottom.css);  
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/privatemode_indicator_as_menu_button.css);

[semente]

and bingo! with the help of window_control_placeholder_support.css and custom CSS I've achieved it:

@import url(chrome/hide_tabs_with_one_tab_w_window_controls.css);                    
@import url(chrome/tabs_on_bottom.css);                                              
@import url(chrome/window_control_placeholder_support.css);                          
                                                                                     
:root[tabsintitlebar]{                                                               
    --uc-window-control-width: 24px;                                                 
    --uc-window-drag-space-width: 6px;                                               
}                                                                                    

(two tabs)

(one tab)

[semente]

hide_tabs_with_one_tab_w_window_controls.css requires window_control_placeholder_support.css and it mentions that. That should work fine since tabs_on_bottom.css also requires it so you should try this setup:

Yea, I forgot about that... I have removed it for the tests.

[MrOtherGuy]

Cool. So the thing is working for you then, right?

[semente]

Yes! Thank you very much.

Maybe it is missing just a comment about having tabs_on_bottom.css after hide_tabs_with_one_tab_w_window_controls.css.