In Mixed skin on OSX, close tab button is tiny

[gotyaoi]

Short description

Steps to reproduce

1. Start Firefox with clean profile.
2. Install TST.
3. Set skin to "Mixed"
4. Observe tab close button size

Expected result

larger close buttons

Actual result

Very small, difficult to click on close buttons

Here's the tree vs the default tab bar.

Environment

• Platform (OS): OSX 10.12.6
• Version of Firefox: 57.0
• Version (or revision) of Tree Style Tab: 2.2.9

I was able to work around this by using the custom CSS and setting font-size on .closebox. Not sure if this is something that would be best to be integrated into the base CSS for mixed. I also made the tabs thinner (my preference), and added some on-hover background color, so it behaved a bit more like the old version. My CSS is not the best, but this is what I came up with. This works acceptably on windows 10 as well.

.tab {
  padding-top: 0em;
  padding-bottom: 0em;
}
.closebox {
  font-size: 1.2em;
  border-radius: 10px;
  height: 1.2em;
}
.closebox::before {
  display: block;
  margin-top: -.35em;
}
.closebox:hover {
  background: #c8c8c8;
}
.active .closebox:hover {
  background: #96afc8;
}

[piroor]

That too small closebox is due to the system font. TST2 uses a unicode character instead of icon image.

There are other possible characters for closebox:

• ✖: U+2716 (heavy multiplication x) / currently used
• ✕: U+2715 (multiplication x)
• X: upper case X
• ⨯: U+2A2F (vector or cross product)
• ❌: U+274C (cross mark)

[piroor]

❌(U+274C) looks good except its color. On Windows 10 and Ubuntu, it is shown as a regular cross mark. However, as the screenshot above, it is colored as a colored emoticon, on macOS. Hmm...

[piroor]

Finally I've decided to use "⨉" (U+2A09) instead of the current one. All other characters have something problem for me. 4651db4#diff-0de0f04acda4250bc4bb748cdcb2a5e5R337

[gotyaoi]

That's much better, yes.

[ghost]

Hello,
On my Arch Linux, result is pretty ugly, as the cross are too big :

I think we could have an option to choose between 3/4 different cross as it looks platform dependent.
I put the info in the wiki to change style.

[piroor]

By recent changes now the closebox is shown based on 16px-sized SVG image. It will be included to the next release.

[TheRealBev]

I am absolutely unable to change the close-tab graphic in any way. FF57.0.3 for 64-bit linux. I conclude that the syntax I use is just WRONG. Could you please give me the exact code I should use to change it to \274E ?

[piroor]

@TheRealBev Because now the closebox graphic is not a simple letter, it is hard to be replaced with different graphic without any SVG image file. Otherwise you need to override TST's built-in style definitions totally.

[TheRealBev]

On 01/17/2018 07:46 PM, piroor wrote: @TheRealBev <https://github.com/therealbev> Because now the closebox graphic is not a simple letter, it is hard to be replaced with different graphic without any SVG image file. Otherwise you need to override TST's built-in style definitions totally.

Thanks for getting back to me. Someone suggested a solution which worked -- it didn't change the graphic, just increased the area that would close the tab. Too bad Mozilla made it difficult to implement the cool stuff you put in the pre-57 versions -- I'm still using it with FF52ESR. Thanks again

…

-- Cheers, Bev "Tough? We drink our urine and eat our dead!" -- N. Heilweil