Tweak tabtitle threshold w/ secondary icons on small tabs

[cezaraugusto]

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.

Auditors: @bsclifton
Close #9466

Test Plan:

covered by automated tests

npm run test -- --grep="Tabs content - NewSessionIcon should not show icon if breakpoint is medium"
npm run test -- --grep="Tabs content - PrivateIcon should not show icon if breakpoint is medium"
npm run test -- --grep="Tabs content - Title should show text if breakpoint is mediumSmall and tab is not active"
npm run test -- --grep="Tabs content - Title should not show text if breakpoint is mediumSmall and tab is active"

Manual Test:

1. Have enough private/new session/default tabs.
2. Resize window
3. Title should not truncate with secondary icons
4. Title should be aesthetically ok if there are no secondary icons

Reviewer Checklist:

• Adequate test coverage exists to prevent regressions
• Tests should be independent and work correctly when run individually or as a suite ref
• New files have MPL2 license header

[bsclifton]

@cezaraugusto this is ready for review, right?

[NejcZdovc]

I checkout my PR that refactored this function and I see that medium was not there before either. How come that we need to add it now? Was this working correctly before in previous versions or never?

[cezaraugusto]

the feature works as expected but turns out to have bad UI. It wasn't introduced in your PR.

[cezaraugusto]

@bsclifton yes ready. It wasn't a bug before and wasn't a regression as well but given the bad look and feel this tweak is needed. I'll label needs QA to double-check as well, thanks.

[NejcZdovc]

Tests are passing and changes look good 👍

[NejcZdovc]

Not sure if this is part of this PR or not (if not let's create a issue for it), but I think that it would be good to fix this one as well.

Open some empty new session tabs and try to resize. I think that we should display session icon with a number if there is no fav icon and not an empty space as we do for a regular new tab.

big:

medium:

small:

[cezaraugusto]

@NejcZdovc re #9512 (comment) I would go adding paper icon instead. It is the default for websites with broken favicons. Maybe just left the title, but I prefer the former. Anyway, your assumption is valid given empty tab is not pleasing.

/cc @bradleyrichter for the rescue