Browser-laptop: Tab Label Rendering Issue

[jonathansampson]

Test plan

https://github.com/brave/browser-laptop/pull/10691#issue-253338559

---

• Did you search for similar issues before submitting this one?
  Yes

• Describe the issue you encountered:
  Tab labels have an issue with rendering where previous values may not be cleared properly. As a result, this can paint two labels in the place of one.

• Platform (Win7, 8, 10? macOS? Linux distro?):
  Desktop (Windows?)

• Brave Version (revision SHA):
  0.16.9

• Steps to reproduce:
  _TBD_

• Actual result:
  Labels become unreadable.

• Expected result:
  Labels remain legible and clear.

• Will the steps above reproduce in a fresh profile? If not what other info can be added?

• Is this an issue in the currently released version?
  Yes

• Can this issue be consistently reproduced?
  Yes

• Screenshot if needed:

[bsclifton]

cc: @cezaraugusto @luixxiul

[jonathansampson]

I believe this is related to the general tab-rendering issue where labels are made up of transparent text, masking a gradient background. We need to move to using a pseudo-element to achieve the fade effect. This requires a little work considering we need to accommodate hovered, non-hovered, theme colors, non-theme colors, private tabs, and public tabs.

[bsclifton]

@jonathansampson IIRC, these issues would also be resolved with that same fix:

• Tabs No Longer Show Full-Color Emoji #8414
• Tab title often isn't updated until the cursor is moved over it or tab focus is changed #7765

[jonathansampson]

@bsclifton I believe that is correct.

[cezaraugusto]

@jonathansampson isn't this related to the improvement we talked last Sunday? if so I think you are very close btw.

++ for @bsclifton findings. If above is true I agree they'll be fixed by too.

[jonathansampson]

@cezaraugusto It is. I should have that wrapped up very soon.