How to enlarge tab close button clickable area and not cover tab titles

Firefox 53.0.2 in Mint 18.1.
I found a few examples of making the clickable (target?) area of buttons, links larger. There may be drawbacks and several ways may work.
One issue may the type "you'll have to live with it"
For tab close button (I use TabMix Plus), when I add "display: block", then set the height & width, the extra width takes space from the tab titles. There may be no way around this - that's what I'm asking.

Is there a way to make the clickable area larger that doesn't take space from tab titles, but still enlarges the close button click area when hovered?

One way would be if it's possible to either move the close 'X' farther to R end of tab, and have the "display: block" area align w/ the R tab edge. Tabs are rounded - adding an outside radius on the top-right is easy enough.
I seem to have moved the 'X' farther to tab R edge using a negative margin. Not sure if this is the best way.


For .tab-close-button, when I add "display: block", then set the height & width, the extra width takes space from the tab titles. There may be no way around this - that's what I need to know.

For testing, this is what I came up with so far to minimize covering unfocused / unhovered tab titles
.tab-close-button{
-moz-image-region: rect(0, 48px, 16px, 32px) !important;
display: block; /*** makes button a "block" - allow adjusting H, W of clickable area. ***/
width: 20px; /*** Sets clickable size; narrower width - hide less tab title, or find a way not to cover tab text. ***/
height: 27px;
border-top-right-radius: 11px;
margin-right: -8px;

}

/*** On hover close, separate background-color from white X with small, red background. ***/
.tab-close-button:hover{
background-color: #4CAF50;
-moz-transform: scale(1.2)

}


Transparent background is definitely not it; if using -moz-image-region: with the 4 icon positions, & a transparent background, it displays all 4 close tab "X's" at once.



Comments

  • edited May 16 Firefox
    What do you think about this:
    /* On tab hover, make the close button a larger target */
    .tabbrowser-tab:hover .tab-close-button {
    width: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #d30000;
    }
    This might be better. At least on Windows 7, the little x remains in its original location when the larger "target" appears behind it:
    /* On tab hover, make the close button a larger target */
    .tabbrowser-tab:hover .tab-close-button{
    padding: 4px 2px 4px 30px;
    background-color: #d30000;
    border-radius: 3px;
    }
  • Thanks. I tried the 1st style. Though it gives a somewhat different look than I had, I don't see that it hides less of tab titles - with your values, than what I was using. I could play w/ that style's width to see if that hides a bit less of tabs text. Don't really need it 40px wide.
    Who knew there were so many ways to style a close button's target area.

    The 2nd style I'll have to look at later. I'm using Linux - not sure if it'll make any difference.

    I think I understand (maybe) why enlarging the background or target - even if only on hover, hides part of the tabs text. It seems to be reserving some of that space for the wider area that will appear - once hovered, even on non-focused tabs.
    May be wrong on that.

    I also tried setting padding of default close button to 0 (cause don't know what it is, w/o digging into it) and combined it w/ the other style to enlarge hovered target. It made no difference for how much tab text was cut off. So either my method was all wrong, or the default close buttons are already at padding=0.
  • I guess I don't understand the problem with hiding text if it is ONLY hidden when you mouse over the tab. At that point, do you really need to see the full text?

    Notes:

    (1) This should work on all browsers, I just don't know if the "x" alignment will be as perfect on other OS themes:
    /* On tab hover, make the close button a larger target */
    .tabbrowser-tab:hover .tab-close-button{
    padding: 4px 2px 4px 30px;
    background-color: #d30000;
    border-radius: 3px;
    }
    (2) This is meant to be the entire rule. Not to be combined with any other code on this page.
  • Whoops, forgot the screenshot.
  • No, it's hiding more of the text - all the time on non-hovered tabs when I tried any of several methods to enlarge target area on hovering vs. the tab text shown using the default close button (Firefox default theme). Not an enormous difference, but 2 - 4 letters, depending on method used to enlarge it.

    I haven't disabled Tabmix Plus yet, to see if it has a part in hiding some of the text on unfocused tabs, when using several "make target larger" methods.
  • Waterfox
    TMP has nothing to do with it. It's Fx changing from ellipsis to fading. Looks ugly but i wasn't able to figure this one out yet.
  • edited May 23 Firefox
    Thanks, everyone.
    @makondo - Not sure if TMP has *something* to do w/ theming tab close button, as TMP places the button in a particular spot; maybe ? using their own image (dunno).

    That said, Jefferson - thanks for the help. I tried both your styles.
    The 2nd one using: ".tabbrowser-tab:hover .tab-close-button{"
    turns the whole tab into a close button, anywhere you hover - for me. I used a new style file & all other tab closebutton styles disabled.
    It's a "bigger target" alright, but not workable. Could be handy for other things.

    One thing I discovered about the actual target size / area & how much text is hidden: Appears only the inactive .tab-close-button dimensions (H & W) affect target size ( must hover mouse over that area, regardless how big the hovered background). Regardless of how you specify hovered backgrounds - padding / margins / blocks - you name it. I tried several methods - same results.

    Where the R edge of the inactive button area is, the text stops - even if the background is transparent. Except for the code that makes the whole tab clickable, the hovered (background) size can be 3 sq. in., but you still have to mouse over the area of inactive .tab-close-button{.

    You can make that as wide as you want, but it eats up tab text.
    There may be a secret property "use hovered background size for target area, not the inactive button area." Then the inactive button could be 1px wide & not hide much text (the 'X' wouldn't be visible).

    Upshot: I gained some text width - moved favicons to L tab edge
    .tabbrowser-tab .tab-icon-image {
    margin-left: -7px; }

    Moved close button as far to the R as possible - using negative R margin. That gained some text space, but this was mostly a learning experience.

    Made the inactive button area the full height of tab (29px), but only ~ 15px wide.
    At least, I only have to touch the tab - under the 'X' - from the bottom to top edge of the tab, instead of hit a few sq. px target.
  • Waterfox
    Have you tried a simple:

    .tab-close-button:hover
    { -moz-transform: scale(1.3,1.3) !important; }
Sign In or Register to comment.