Resize Close Button Hitbox on Firefox [Solved]

[Stuart_M]

I spent hours looking for the window close tab css code without success so GOOD JOB!

One thing I noticed is that moving the close button to the right edge (actually past the right edge) still leaves that button about 8 pixels from the top so Firefox will still not close when the mouse pointer is moved to the pixel in the upper-right corner of the screen which will then have to be moved down a little (8 pixels to be exact) to make the close button active to close.

I decided to do a little experimenting with the css code you provided to fix that and was able to guess what the code for the top margin would be. I modified the code to put the close button flush against the top and right edges of the screen when maximized. This will allow the mouse pointer to be put on the pixel in the extreme upper-right corner of the screen to close Firefox.

The close button only needs to be moved 5 pixels to the right and 8 pixels up from its default position. Change those values if desired. This is the code:

Code: Select all

#TabsToolbar{margin-right:-5px!important;}
#TabsToolbar{margin-top:-8px!important;}

The below image shows the Firefox close buttons in windows that are not maximized because I thought the screenshots were clearer (when maximized, the window edges are against the screen edges and the corner of the window has a small enough radius to capture a mouse click on the corner pixel). From top to bottom:

• Default position (before the userChrome.css file modification)
• Post #10 .css setting (close button moved to right only)
• Change from the above code (close button moved up and right flush with edges)

FF_close_button_location_comparison.png

Edit: I did not mention that the values I gave here (-5 and -8) are based on the Greybird-mx theme. Those values may need to be changed when using other themes. Greybird-mx was used in this example because it makes it easy to see when the close button becomes active, which is not possible when a dark theme is used.

The code format can also be as Octeract used in the below post (#12) under the "#TabsToolbar" header. Both work equally well.

[Octeract]

I spent hours looking for the window close tab css code without success so GOOD JOB!

One thing I noticed is that moving the close button to the right edge (actually past the right edge) still leaves that button about 8 pixels from the top so Firefox will still not close when the mouse pointer is moved to the pixel in the upper-right corner of the screen which will then have to be moved down a little (8 pixels to be exact) to make the close button active to close.

Thanks for doing that testing and reporting back. I actually forgot to adjust my solution for the modifications I had already made to Firefox. I reduced the size of the tab bar so that the viewport matches Google Chrome on Windows 10 exactly (makes fingerprinting by viewport harder), so that raised the buttons up closer to the top of the screen. Because of that, I'll just post the entire contents of my userChrome.css.

"margin-top" and "margin-right" are the two that require some experimentation to get the button positions right. My config works for Breeze for GTK, but users of a different theme may need to further tweak my CSS to get it working.

Here is a combination of the userChrome.css files I use on Windows and Linux. Readers should take the half they need, but not both.

Code: Select all

/*********************  Linux  ********************/


/*** Reduce tab bar height ***/

:root
{
    --tab-min-height: 32px !important;
}

.tabbrowser-tab
{
    max-height: 33px! important;
}

#TabsToolbar
{
    margin-top: -2px! important;
    margin-bottom: 0px! important;
    margin-right: -12px! important;
}


/*** Remove black line under bookmarks toolbar and reduce height ***/

#navigator-toolbox
{
    border: none !important;
    margin-top: -3px! important;
}


/*** Remove empty space before tabs when not maximized ***/

.titlebar-spacer[type="pre-tabs"]
{
    width: 0 !important;
}


/*********************  Windows  ********************/


/*** Reduce tab bar height ***/

:root
{
    --tab-min-height: 32px !important;
}

.tabbrowser-tab
{
    max-height: 37px !important;
}

#TabsToolbar
{
    margin-top: -2px !important;
    margin-bottom: 0px !important;
}


/*** Remove black line under bookmarks toolbar ***/

#navigator-toolbox
{
    border: none !important
}


/*** Remove empty space before tabs when not maximized ***/

.titlebar-spacer[type="pre-tabs"]
{
    width: 0 !important;
}


/*** Remove items from image context menu (email and set as desktop background ***/

#context-sendimage, #context-sep-setbackground, #context-setDesktopBackground
{
    display: none !important;
}