1708721 - Pocket panel font size should align with other panels

Status: VERIFIED FIXED

(Firefox :: Menus, defect, P1)

Description

[Romain Testard [:RT]]

The pocket panel font size does not align anymore with ofther Firefox panels now that we reverted the font size increase on other panels.

Comment 1

[Romain Testard [:RT]]

Hi Scott, can you please help with this? Ideally we should uplift to Beta if possible.

Comment 2

[Scott [:thecount] Downe]

Attachment: Bug 1708721 - Update Pocket panel font sizes.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3f064ff4ab11
Update Pocket panel font sizes. r=mconley,gvn

Comment 4

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/3f064ff4ab11

Comment 5

[Shilpa Mohanty]

Let's uplift this one.

Comment 6

[Robert Martin [:romartin], Ecosystem QA]

I have verified the following:

1. For the "sign up / log in Pocket" doorhanger:

• On Windows 10 x64:
  • The font used is "Segoe UI" with the size set to 1 em and the line height set to 1.3 em.
• On macOS 11.3.1:
  • The font used is ".SF NS" with the size set to 1 em and the line height set to 1.3 em.
• On Ubuntu Linux 20.04 x64:
  • The font used is "Ubuntu" with the size set to 1 em and the line height set to 1.3 em.
• The same values apply for the "sign up / log in Pocket" doorhanger that is pinned to the "Overflow menu".

2. For the "already logged in Pocket" doorhanger:

• On Windows 10 x64:
  • The font used is "Segoe UI" with the size set to 0.9 em and the line height set to 1.852 em.
• On macOS 11.3.1:
  • The font used is ".SF NS" with the size set to 0.9 em and the line height set to 1.852 em.
• On Ubuntu Linux 20.04 x64:
  • The font used is "Ubuntu" with the size set to 0.9 em and the line height set to 1.852 em.
• The same values apply for the "already logged in Pocket" doorhanger that is pinned to the "Overflow menu".

The verification was done using Firefox Nightly 90.0a1 (Build ID: 20210511213906) on Windows 10 x64, macOS 11.3.1, and Ubuntu Linux 20.04 x64.

@Scott, is the size difference between the "already logged in Pocket" doorhanger and the "sign up / log in Pocket" doorhanger expected?

Comment 7

[Scott [:thecount] Downe]

(In reply to Robert Martin [:romartin], Ecosystem QA from comment #6)

I have verified the following:

1. For the "sign up / log in Pocket" doorhanger:

• On Windows 10 x64:
  • The font used is "Segoe UI" with the size set to 1 em and the line height set to 1.3 em.
• On macOS 11.3.1:
  • The font used is ".SF NS" with the size set to 1 em and the line height set to 1.3 em.
• On Ubuntu Linux 20.04 x64:
  • The font used is "Ubuntu" with the size set to 1 em and the line height set to 1.3 em.
• The same values apply for the "sign up / log in Pocket" doorhanger that is pinned to the "Overflow menu".

2. For the "already logged in Pocket" doorhanger:

• On Windows 10 x64:
  • The font used is "Segoe UI" with the size set to 0.9 em and the line height set to 1.852 em.
• On macOS 11.3.1:
  • The font used is ".SF NS" with the size set to 0.9 em and the line height set to 1.852 em.
• On Ubuntu Linux 20.04 x64:
  • The font used is "Ubuntu" with the size set to 0.9 em and the line height set to 1.852 em.
• The same values apply for the "already logged in Pocket" doorhanger that is pinned to the "Overflow menu".

The verification was done using Firefox Nightly 90.0a1 (Build ID: 20210511213906) on Windows 10 x64, macOS 11.3.1, and Ubuntu Linux 20.04 x64.

@Scott, is the size difference between the "already logged in Pocket" doorhanger and the "sign up / log in Pocket" doorhanger expected?

There are multiple font sizes used in both panels, and we didn't intend to change the layout. Because of this I had to pick elements for each panel that had an original font size that roughly matched the new 1em. These elements I made 1em. It was any element that was roughly 16px font size became 1em, and anything bigger in the original panel became 1.1em, or smaller, maybe 0.9em, and so on.

For signup, this was the paragraphs that became 1em. The learn more link, and other copy were a bit smaller in the original panels, so I made this 0.9em. The buttons were a bit bigger in the original panels, so these became 1.1em.

For saved, the suggested tags, similar stories, learn more, tagging elements, and rec title were all really close to the 16px/1em target, and everything else would scale up or down from there. So the saved to Pocket header in the original was bigger than 16px, so it ended up being pretty close with 1.2em, etc.

I did the same methodology on the home panel, which you can access if you open the Pocket panel while logged in and in a non saveable page, like newtab.

Comment 8

[Robert Martin [:romartin], Ecosystem QA]

I'm marking this issue as VERIFIED based on the verification done and specified in comment 6 and the confirmation specified in comment 7.

Comment 9

[Scott [:thecount] Downe]

I think there is a medium risk of other issues similar to bug 1711070 with uplifting this. Alignment issues, overflow issues, etc, we might have missed with the font size changes.

I'm unsure on who would or should make that call on an uplift for this. We would also have to uplift bug 1711070.

I feel like the QA on this has been pretty good though, and it's been on nightly for a week now. It's not a huge code change, but the risk for this one doesn't really come from the size of the code.

Comment 10

[Romain Testard [:RT]]

Given the risk highlighted here and after discussions with relman I think we should leave this one ride the 90 train.