Bug: Inconsistent right-fading of Proton Tabs for titles near length threshold
Status: NEW
Priority: P3
Created: 2021-04-25 21:37:00+00:00
Resolved: 2021-04-29 04:55:13+00:00

_Tested in Firefox Developer Edition 89.0b3 x64, Windows 10_

Tab titles that are too long are faded at the right edge of the tab. Tab titles that fit entirely inside the tab bar are not faded. However, tab titles that are exactly at the threshold length between too long and fitting show some inconsistent behavior, as you can see in Tabs 1 and 2 in the screenshots attached. 

Here are the URLs that I used to make the attached screenshot:

```
1: data:text/html,<meta charset=utf-8><title>%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A|||

2: data:text/html,<meta charset=utf-8><title>%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A%E2%80%8A|||

3: data:text/html,<meta charset=utf-8><title>.%E2%80%8A.

4: data:text/html,<meta charset=utf-8><title>..
```

`%E2%80%8A` is a Hair Space, the thinnest Unicode character that I know of. Tabs 3 and 4 are just there to show the width of a single Hair Space, which is about 2px in the attached screenshot. 

Tabs 1 and 2 have the exact same title, except Tab 2's title has a single additional Hair Space. This one Hair Space about 2px long causes 3 characters/10px to become faded to near-invisibility. In addition, I think that the text in Tab 1 is getting way too close to the `×`.

[chrome://browser/content/tabbrowser.css:81](https://github.com/mozilla/gecko-dev/blob/6143c3b83436184644a55afad83cd4d4396f7fec/browser/base/content/tabbrowser.css#L81-L85) is the source of the fading. If I remove `[textoverflow]` from lines 81 and 82, the problem is solved; however I think that this will cause text that completely fits in the tab title to start to incorrectly fade near the right end. I think that the real solution to the problem would be be having the [`onoverflow`](https://github.com/mozilla/gecko-dev/blob/be413c29deeb86be6cdac22445e0d0b035cb9e04/browser/base/content/tabbrowser-tab.js#L46) event trigger about 0.5em before overflow.