1576622 - New Certificate Viewer (about:certificate)

Status: ASSIGNED

(User Experience Design :: Firefox Desktop: Consultation, task, P3)

Description

[Johann Hofmann [:johannh]]

Request Description
We are implementing a new Firefox certificate viewer based on Certainly Something. This was an Outreachy project in summer 2019 and most of the code has landed in Nightly already (you can try it e.g. in Page Info -> View Certificate). We were hoping to get a design review/suggestions before shipping.

Deadline
We would like to ship with Firefox 71

Priority Level
1 - 2:

Priority Level Description
This is not a very high priority project, but the work is almost finished and lacking a better design by 71 we might just ship it as it is :)

Supporting Information
Metabug: https://bugzilla.mozilla.org/show_bug.cgi?id=1553524

Comment 1

[Markus Jaritz [:designakt] (UX)]

Attachment: about:certificate implementation as of Aug 27 2019

Comment 2

[Eric Pang [:epang] UX]

Updated the visuals and uploaded them to the Invision link below
https://mozilla.invisionapp.com/share/EPUHZQVRW9M#/389442119_Certificate

All details can be seen in the inspect mode. Please let me know if you have any questions!

Thanks

Comment 3

[April King [:April]]

I think it looks nice, but I would note that there's a weird indentation on the download link section. :)

Comment 4

[Johann Hofmann [:johannh]]

Thank you Eric, this looks great. We had been talking to Fenix folks and since this can be viewed on mobile as well, we would like to make sure it has a good mobile/responsive design. Do you think it would be a lot of effort to add an additional spec for a smaller viewports? Thanks!

Comment 5

[Eric Pang [:epang] UX]

(In reply to April King [:April] from comment #3)

I think it looks nice, but I would note that there's a weird indentation on the download link section. :)

Thanks April, I've fix it now :)

(In reply to Johann Hofmann [:johannh] from comment #4)

Thank you Eric, this looks great. We had been talking to Fenix folks and since this can be viewed on mobile as well, we would like to make sure it has a good mobile/responsive design. Do you think it would be a lot of effort to add an additional spec for a smaller viewports? Thanks!

I'll speak with Amy Lee about it (since she works on Fenix). I should be able to come up with something Fenix's styling. Thanks for flagging this.

Comment 6

[April King [:April]]

You may want to look at how Certainly Something does it:

https://github.com/april/certainly-something
https://addons.mozilla.org/en-US/firefox/addon/certainly-something/

It is fully responsive down to tablets and phones. The tabs stack at 100% width when viewed on a phone, pretty sure I'm just using flex there.

Comment 7

[Johann Hofmann [:johannh]]

Sorry, I just remembered two more things that we were hoping to be able to integrate into the new certificate viewer 🙈

The first one is bug 1585620, where it would be great to have a page available if a user simply entered "about:certificate" in their url bar. Maybe a url field that will make us start fetching the cert from that site? We could also have a "recently viewed" list of certs.

The other one is bug 1568974 which will shows errors for certificates with, well, errors. The UI proposed by Danielle is relatively simple for now. Essentially it does two things: It display a large error at the top of the whole page and also highlights the relevant section in the certificate where the issue originates (e.g. If the cert is expired it will highlight the "validity" section).

Sorry for not mentioning this earlier. I understand if you consider this done on your end, otherwise it would be cool to make these happen.

Thanks!!

Comment 8

[Eric Pang [:epang] UX]

(In reply to April King [:April] from comment #6)

https://github.com/april/certainly-something
https://addons.mozilla.org/en-US/firefox/addon/certainly-something/

thanks for these examples April! I'll take a look.

(In reply to Johann Hofmann [:johannh] from comment #7)

Sorry, I just remembered two more things that we were hoping to be able to integrate into the new certificate viewer 🙈

No worries, I can take a look. Just might need some time to get back around to this :)

Comment 9

[Eric Pang [:epang] UX]

Hey April, I just wanted to let you know that I've added a responsive (mobile) version to the Invision.
https://mozilla.invisionapp.com/share/XNUHZQSY57U#/392641812_Certificate_Mobile

The main difference is the use of a dropdown instead of tabs for navigation.
Also, for both versions on click anything that is truncated should be displayed the same way you already have implemented with certainly something.

Also, do you have access to inspect more on invision?
It looks like this: https://cl.ly/aed2d29a49ff
It gives you access to the spec elements. Please let me know if you don't have access to it!

Please let me know if you have any questions.

Comment 10

[Eric Pang [:epang] UX]

Just a couple of questions:

The first one is bug 1585620, where it would be great to have a page available if a user simply entered "about:certificate" in their url bar. Maybe a url field that will make us start fetching the cert from that site? We could also have a "recently viewed" list of certs.

is there any UX needed for this?

The other one is bug 1568974 which will shows errors for certificates with, well, errors. The UI proposed by Danielle is relatively simple for now. Essentially it does two things: It display a large error at the top of the whole page and also highlights the relevant section in the certificate where the issue originates (e.g. If the cert is expired it will highlight the "validity" section).

Is it possible to see what Danielle proposed solution is?

Comment 11

[April King [:April]]

I don't have access to it, that would be great.

Will the pulldown remain sticky at the top, or will you need to scroll up to see things? My only other concern is that it should probably be ordered such that the default end-entity (leaf) certificate shown is the last in the list, to properly show hierarchy.

Comment 12

[Eric Pang [:epang] UX]

(In reply to April King [:April] from comment #11)

I don't have access to it, that would be great.

sorry for the delayed response!
I've requested to have you added as a collaborator on Invision.

Will the pulldown remain sticky at the top, or will you need to scroll up to see things?

Good idea bout keeping the dropdown as sticky. I've updated the mock to reflect this
https://mozilla.invisionapp.com/share/XNUHZQSY57U#/screens/392641812_Certificate_Mobile

My only other concern is that it should probably be ordered such that the default end-entity (leaf) certificate shown is the last in the list, to properly show hierarchy.

that works for me!

Comment 13

[Johann Hofmann [:johannh]]

Sorry, was away :)

(In reply to Eric Pang [:epang] UX from comment #10)

Just a couple of questions:

The first one is bug 1585620, where it would be great to have a page available if a user simply entered "about:certificate" in their url bar. Maybe a url field that will make us start fetching the cert from that site? We could also have a "recently viewed" list of certs.

is there any UX needed for this?

I would presume, yes, but maybe it's easy to build this UI from the existing design pieces?

The other one is bug 1568974 which will shows errors for certificates with, well, errors. The UI proposed by Danielle is relatively simple for now. Essentially it does two things: It display a large error at the top of the whole page and also highlights the relevant section in the certificate where the issue originates (e.g. If the cert is expired it will highlight the "validity" section).

Is it possible to see what Danielle proposed solution is?

They're currently rebasing bug 1568974 so I don't have a screenshot as of now, Danielle, do you think you can provide a screenshot of the error UI?

I'm also going to make an agenda for Berlin and will include the new UI work, so maybe we can sync there :)

Comment 14

[dori]

Hello, I am not sure if this is the right place to report this. But I'm using buildid 20200117190643, Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0, and sometimes when I click on View Certificate I get a new tab that just has "about:certificate?" in the address bar. Nothing after the question mark, so I just get a page that says:
Something went wrong.
We were unable to find the certificate information, or the certificate is corrupted. Please try again.

It doesn't appear like it's getting the context information from the website. In this case it's an intranet site, probably with a self-signed cert but I can't actually see if that's the case :)

Please let me know if I should provide additional information and if so what.

Thank you,
Dori

Comment 15

[Johann Hofmann [:johannh]]

Can you try this on Nightly? If the problem still persists, can you please file a new bug with as much information as possible, e.g. the certificate encoded in DER/PEM format?

Comment 16

[dori]

I've been unable to reproduce it on the nightly. It's not happening as frequently on the release buildid 20200117190643 either anymore so I can't reliably reproduce it. Might be something due to uBlock Origin and/or Noscript too, unsure. I guess you can ignore this for now. I'll open a new bug if I'm able to reproduce on nightly without any extensions.

Thanks,
Dori

Comment 17

[danielleleb12]

Attachment: Warning UI of cert viewer

Comment 18

[danielleleb12]

Apologies for the delay on the screenshot, I'm adding an attachment now of the current warning UI.

Comment 19

[Ahmex]

Attachment: all.min.css