1724230 - Certificate error pages warning triangle is not visible on small viewports

Status: VERIFIED FIXED

(Firefox :: Security, defect)

Description

[Petruta Horea [:phorea], Desktop QA]

Attachment: cut warning triangle

Affected versions

• Nightly 92.0a1 2021-08-04

Affected platforms

• Windows 10 64-bit
• Ubuntu 18.04 64-bit

Steps to reproduce

1. Open a certificate error page (eg: https://wrong.host.badssl.com/)
   2.a Zoom in the page (250% or more) /
   2.b Open the warning page in an iframe
   2.c Narrow browser width and height
2. Check the plain warning triangle

Expected result

• Warning triangle is visible all the time

Actual result

• The top part of the warning triangle is hidden

Regression range

• Not a regression

Comment 1

[Petruta Horea [:phorea], Desktop QA]

Attachment: testcase containing Certificate Error Pages in iframes

Comment 2

[:Gijs (he/him)]

Context:

(In reply to :Gijs (he/him) from bug 1721658 comment #6)

(In reply to Petruta Horea [:phorea] from comment #5)

Created attachment 9234868 [details]
Screenshot on 2021-08-05 at 11:29:17.png

On high zoom levels, small browser widths and on iframes, the top part of the warning triangle is not visible. Is this intended? Thank you!

Not desired but also not easily avoidable; I asked Bernard to file a follow-up for this on phab:

Hm, this doesn't quite work right for short (not tall) viewports, but there's already so much magic in this (including some JS code) that I don't think it's worth trying to fix it here... Can you file a follow-up to simplify the responsive design of error pages? https://searchfox.org/mozilla-central/rev/4f05a46731c1f7f111ec7a41ce38a34594aa0d37/browser/base/content/certerror/aboutNetError.js#600-602 suggests that vh doesn't work correctly in iframes, but AFAICT that is no longer true, so we should be able to simplify a bunch of the code here.

Basically, to fix this bug we need to ensure that there is always sufficient padding above the header for the icon, and that the negative margin that we use to compensate for this padding is never so large as to "pull" the icon beyond the top of the viewport. Whether that happens depends on the overall top padding and margin of the ancestors of the h1 element, and some of those values are set from the JS linked above. So though I tried to get something to work with CSS min, I couldn't get something straightforward, and anyway it wouldn't have worked in iframes without adding more JS. Instead of making things increasingly complicated, I think we should try to simplify the code linked in the quoted comment, such that we stop using JS to make the header fit, relying only on CSS instead, and then we'll stand a chance at fixing this bug, too.

:johann, pinging you based on the matrix conversation to see if you recall why you needed the JS work for iframes rather than relying on the 50vh thingy for that. (originally from bug 1485670)

Comment 4

[Timea Cernea [:tbabos][inactive]]

I can also reproduce this on MacOS10.15 and even further with a wider width and short height of the browser, recording: https://streamable.com/u5nu57

Comment 5

[:Gijs (he/him)]

(In reply to :Gijs (he/him) from comment #2)

:johann, pinging you based on the matrix conversation to see if you recall why you needed the JS work for iframes rather than relying on the 50vh thingy for that. (originally from bug 1485670)

Having just tried this, I think it's less about iframes and more about the viewport being scrollable.

The goal of the margin seems to be to center the content vertically if the viewport is big enough for that, and not to have the content disappear "off the top" if it isn't. This is more common with iframes but not limited to them - you can see the problem just by resizing a main window to be not very tall.

Comment 6

[:Gijs (he/him)]

Attachment: Bug 1724230 - rely on flexbox instead of manual positioning for network/cert error page layout and fix warning icon going off-screen, r?johannh,pbz

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2520566ff866
rely on flexbox instead of manual positioning for network/cert error page layout and fix warning icon going off-screen, r=johannh

Comment 8

[Cristina Cozmuta (:CrissCozmuta)]

https://hg.mozilla.org/mozilla-central/rev/2520566ff866

Comment 9

[Petruta Horea [:phorea], Desktop QA]

Verified as fixed on latest Nightly 93.0a1 under Win 10 64-bit, Ubuntu 18.04 and Mac OSX 10.14.