1699725 - Make panels text bigger

Status: RESOLVED DUPLICATE of bug 1701920

(Firefox :: Theme, task, P2)

Description

[Mike Conley (:mconley) (:⚙️)]

UX and Product want the font size of our panels to match the font size that we already use for the URL bar.

Comment 1

[Romain Testard [:RT]]

Emanuela, can you please confirm that we want to apply a 115% font size increase or 1.15em?

Comment 2

[Romain Testard [:RT]]

Now confirmed with Emanuela that the requirement is to apply the following font size: font-size: 1.25em

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Thanks for looking at this dthayer! Note that for areas where I've got font: caption, setting font-size won't work, so you'll probably want to remove that font: caption property.

Comment 4

[Alex Thayer [:alexical] (she/her)]

(In reply to Mike Conley (:mconley) (:⚙️) (Catching up on needinfos) from comment #3)

Thanks for looking at this dthayer! Note that for areas where I've got font: caption, setting font-size won't work, so you'll probably want to remove that font: caption property.

Is font: caption not important for these elements? We could always work around that by setting the font size on descendents of font: caption holders, but it's just ugly, right? That's (roughly) what we're doing in bug 1699426.

Also, in case you happen to know (I'm intending to ask Emanuela for this, but I'm already waiting on her response for something else), are we aware that setting the font size this high causes us to require a scroll bar for the app menu if the user is on a 768p or lower display (I think still reasonably common?) It feels like we may want to avoid that.

Comment 5

[Mike Conley (:mconley) (:⚙️)]

(In reply to Doug Thayer [:dthayer] (he/him) from comment #4)

Also, in case you happen to know (I'm intending to ask Emanuela for this, but I'm already waiting on her response for something else), are we aware that setting the font size this high causes us to require a scroll bar for the app menu if the user is on a 768p or lower display (I think still reasonably common?) It feels like we may want to avoid that.

I agree. Best to ask emanuela or rtestard from Product, I think.

Comment 6

[Alex Thayer [:alexical] (she/her)]

Thoughts, Romain / Emanuela? (re comment 4)

Comment 7

[emanuela [ux]]

Hey everyone,

During the review, the two places where the font-size was off were:

• permissions panels
• modals

App menu's font-size visually seems to match what we have in the URL. At the moment, I'm not able to inspect this element in Nightly, so I can't confirm. In a nutshell: app menu is OK, don't need to make any change there.

Comment 8

[Alex Thayer [:alexical] (she/her)]

Attachment: Bug 1699725 - Make panels text bigger r?mconley

Re-checked with Emanuela and came to the conclusion that we want 1.15em here,
as that matches best with the existing size of the URL bar as well as the figma
spec. Additionally, I kept the font: caption stuff preserved by applying the
1.15em font on descendents of the font: caption elements. It was difficult to
tell how much we care about using the system caption fonts - if it's really
optional we can simplify things by just removing that. Lastly, I just applied
this to all doorhangers which seemed relevant other than the Pocket doorhanger
(since it has an image in it and generally seems to want its own styling) as
well as extension doorhangers, for obvious reasons.

Comment 9

[Blake Winton (:bwinton) (:☕️)]

Looks like this was fixed by that other bug. Thanks, all!