Closed Bug 1708721 Opened 2 months ago Closed 1 month ago

Pocket panel font size should align with other panels

Categories

(Firefox :: Menus, defect, P1)

Firefox 90
defect

Tracking

()

VERIFIED FIXED
90 Branch
Tracking Status
firefox89 --- wontfix
firefox90 --- verified

People

(Reporter: RT, Assigned: thecount)

References

(Blocks 1 open bug)

Details

(Whiteboard: [proton-door-hangers])

Attachments

(1 file)

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

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

Flags: needinfo?(sdowne)
Assignee: nobody → sdowne
Flags: needinfo?(sdowne)
Status: NEW → ASSIGNED
Attachment #9220151 - Attachment description: Bug 1708721 - Update Pocket panel header font sizes. → Bug 1708721 - Update Pocket panel font sizes.
Pushed by sdowne@getpocket.com:
https://hg.mozilla.org/integration/autoland/rev/3f064ff4ab11
Update Pocket panel font sizes. r=mconley,gvn
Status: ASSIGNED → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → 90 Branch

Let's uplift this one.

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".
  1. 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?

Flags: needinfo?(sdowne)

(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".
  1. 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.

Flags: needinfo?(sdowne)

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

Status: RESOLVED → VERIFIED
Regressions: 1711070

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.

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

You need to log in before you can comment on or make changes to this bug.