Open Bug 1709712 Opened 3 years ago Updated 3 years ago

[Proton] Padlock icon in site identity panel cropped for smaller font sizes

Categories

(Firefox :: Site Identity, defect, P3)

Firefox 90
defect

Tracking

()

Tracking Status
firefox88 --- unaffected
firefox89 --- unaffected
firefox90 --- fix-optional

People

(Reporter: viktor_jaegerskuepper, Unassigned)

References

(Blocks 1 open bug, Regression)

Details

(Keywords: regression, Whiteboard: [proton-door-hangers])

Attachments

(2 files)

OS: Arch Linux
Screen resolution: 1280 x 1024 (19'' monitor)

When I click on the padlock icon in the address bar (e.g. for google.com), the padlock icon in the site identity panel is cropped at the top. Taking a closer look at the screenshot by zooming in, you can see that at its top edge a 1 pixel row seems to be missing compared to the padlock icon in the address bar.

Since this is a regression, I used mozregression and got the following result:
Last good revision: 24cac1a6750daf521a4e09217b9480a62b1a587d
First bad revision: 5aef1459fece56ef1443d06de2d3e8417d4d48a2
Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=24cac1a6750daf521a4e09217b9480a62b1a587d&tochange=5aef1459fece56ef1443d06de2d3e8417d4d48a2

So this is caused by bug 1706379. The current Beta (89.0b8) is not affected.

Note however that I wasn't able to reproduce this bug with a different user account, so this might not be reproducible easily. And I am also affected by bug 1704274 and bug 1705906 which might affect what I see (in this case also with the different user account).

Keywords: regression
Regressed by: 1706379
Has Regression Range: --- → yes

I can't reproduce with Ubuntu 20.04 LTS Mozilla/5.0 (X11; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0. I've also tried to set the screen resolution to 1280x1024 and tested different display scaling settings.

Emma, do you think this could be related to your changes in Bug 1706379? From a quick look at the patch I don't see any obvious issues. Can you reproduce the bug?

Flags: needinfo?(emalysz)

The issue seems to depend on the UI font (and probably on its size) which I chose via Gnome Tweaks. With "Liberation Sans Regular" the padlock is cropped both at its top and at its bottom, for some other fonts (e.g. "Noto Sans Regular") it isn't cropped. So I am not sure if this is really a regression caused by bug 1706379 or if this is more a general issue with the new Proton design. Maybe the default fonts for Ubuntu (and/or Windows/macOS) aren't affected, but some non-default fonts lead to this issue.

With the "Liberation Sans Regular" font I get the same regression window as above, so bug 1706379 might at least give a hint to what's going on.

Whiteboard: [proton-door-hangers]
Priority: -- → P3

I'm not sure how we should be handling non-default fonts.

Mike, do you think we could just add a padding-block here: https://searchfox.org/mozilla-central/rev/cca1566127a2fcc013e9c09f9d90ed70df2250a4/browser/themes/shared/controlcenter/panel.inc.css#534?

Flags: needinfo?(emalysz) → needinfo?(mconley)

I can reproduce this if I, for example, set the font-size for the <description> containing "Connection secure" to 0.5em.

I think that the issue seems to be rooted in the fact that the icon in question is being set as a background-image here: https://searchfox.org/mozilla-central/rev/cca1566127a2fcc013e9c09f9d90ed70df2250a4/browser/themes/shared/controlcenter/panel.inc.css#447, so the actual icon doesn't end up taking up any space in the layout. I think we can make this more resilient to variations in font size.

My suggestion is:

  1. Set a min-height of 16px on identity-popup-security-connection vbox here: https://searchfox.org/mozilla-central/rev/cca1566127a2fcc013e9c09f9d90ed70df2250a4/browser/components/controlcenter/content/identityPanel.inc.xhtml#32
  2. Put an align="center" on the hbox that contains the <description> elements here: https://searchfox.org/mozilla-central/rev/cca1566127a2fcc013e9c09f9d90ed70df2250a4/browser/components/controlcenter/content/identityPanel.inc.xhtml#33. That should vertically center the text.

I notice that there's another usage of identity-popup-security-connection elsewhere - if you go with my above suggestion, we should make sure that that other usage doesn't get broken by it.

Flags: needinfo?(mconley)

Thanks for looking into this! I can reproduce on Nightly on Ubuntu if I lower the font size to 9 via gnome-tweaks.

Severity: -- → S4
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: [Proton] Padlock icon in site identity panel cropped → [Proton] Padlock icon in site identity panel cropped for smaller font sizes
You need to log in before you can comment on or make changes to this bug.