1363046 - Update about:neterror page visuals

Status: VERIFIED FIXED

(Firefox :: General, defect, P1)

Description

[Johann Hofmann [:johannh]]

See bug 1358918 for specs.

Comment 1

[Johann Hofmann [:johannh]]

We're still iterating on the copy, so I'm changing the scope of this to only include updated design.

Comment 2

[Johann Hofmann [:johannh]]

Attachment: Bug 1363046 - Update neterror/certerror page design for Photon.

Review commit: https://reviewboard.mozilla.org/r/137636/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/137636/

Comment 3

[Johann Hofmann [:johannh]]

Comment on attachment 8866042 [details]
Bug 1363046 - Update neterror/certerror page design for Photon.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/137636/diff/1-2/

Comment 4

[Dão Gottwald [:dao]]

Comment on attachment 8866042 [details]
Bug 1363046 - Update neterror/certerror page design for Photon.

https://reviewboard.mozilla.org/r/137636/#review140744

::: browser/themes/shared/aboutNetError.css:160
(Diff revision 1)
> +}
> +
> +.exceptionDialogButtonContainer {
> +  background-color: var(--exception-button-container-background);
> +  display: flex;
> +  justify-content: right;

This should probably be justify-content: end?

::: browser/themes/shared/error-pages.css:23
(Diff revision 1)
>  }
>  
>  .button-container {
>    display: flex;
>    flex-flow: row wrap;
> +  justify-content: right;

ditto

::: toolkit/themes/shared/in-content/common.inc.css:43
(Diff revision 1)
> -  --in-content-primary-button-background-active: #006b9d;
> +  --in-content-primary-button-background-active: #003EAA;
>    --in-content-table-border-dark-color: #d1d1d1;
> -  --in-content-table-header-background: #0095dd;
> +  --in-content-table-header-background: #0a84ff;
> +
> +  --in-content-container-min-width: 13em;
> +  --in-content-container-max-width: 52em;

These two variables should probably be set elsewhere, e.g. info-pages.inc.css, since common.inc.css doesn't use them.

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 8866042 [details]
Bug 1363046 - Update neterror/certerror page design for Photon.

https://reviewboard.mozilla.org/r/137636/#review140756

::: browser/base/content/aboutNetError.xhtml:579
(Diff revision 2)
>      </div>
>  
>      <!-- PAGE CONTAINER (for styling purposes only) -->
>      <div id="errorPageContainer" class="container">
> -
> +      <!-- Primary Content Container -->
> +      <div>

What's this div used for?

Comment 6

[Johann Hofmann [:johannh]]

Comment on attachment 8866042 [details]
Bug 1363046 - Update neterror/certerror page design for Photon.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/137636/diff/2-3/

Comment 7

[Johann Hofmann [:johannh]]

Comment on attachment 8866042 [details]
Bug 1363046 - Update neterror/certerror page design for Photon.

https://reviewboard.mozilla.org/r/137636/#review140744

> This should probably be justify-content: end?

Fixed, thanks.

Comment 8

[Johann Hofmann [:johannh]]

Comment on attachment 8866042 [details]
Bug 1363046 - Update neterror/certerror page design for Photon.

https://reviewboard.mozilla.org/r/137636/#review140756

> What's this div used for?

I thought I needed it to preserve the layout but yeah, it's unnecessary.

Comment 9

[Dão Gottwald [:dao]]

Comment on attachment 8866042 [details]
Bug 1363046 - Update neterror/certerror page design for Photon.

https://reviewboard.mozilla.org/r/137636/#review140768

Comment 10

[Mozilla Autoland]

hg error in cmd: hg push -r tip ssh://hg.mozilla.org/integration/autoland: pushing to ssh://hg.mozilla.org/integration/autoland
searching for changes
remote: waiting for lock on working directory of /repo/hg/mozilla/integration/autoland held by process '5908' on host 'hgssh4.dmz.scl3.mozilla.com'
remote: got lock after 413 seconds
abort: push failed:
'repository changed while pushing - please try again'

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7a5b9d4390e7
Update neterror/certerror page design for Photon. r=dao

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/219c5bfc40a2
Update neterror/certerror page design for Photon. r=dao

Comment 13

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/219c5bfc40a2

Comment 14

[Mohammad Maruf Rahman]

This bug was about "Updating about:neterror page visuals" and I have seen the feature being implemented in latest Nightly on Ubuntu 16.04 LTS!

This bug's fix is verified with latest Nightly!

Build ID   :  20170607100302
User Agent :  Mozilla/5.0 (X11; Linux x86_64; rv:55.0) Gecko/20100101 Firefox/55.0

Comment 15

[ovidiu boca[:Ovidiu]]

I tried to reproduce this issue using the: https://pcwebshop.co.uk/ on Windows 7 x32, Mac OS X 10.10 with Nightly 55.0a1(2017-06-11) and I don't see the expected output from the specs.

https://mozilla.invisionapp.com/share/ZKBC94BPQ#/screens/229470847
https://mozilla.invisionapp.com/share/ZKBC94BPQ#/screens/229470852(Certificate
 
If I'm not using the right example please provide one. Thanks

Comment 16

[Johann Hofmann [:johannh]]

(In reply to ovidiu boca[:Ovidiu] from comment #15)
> I tried to reproduce this issue using the: https://pcwebshop.co.uk/ on
> Windows 7 x32, Mac OS X 10.10 with Nightly 55.0a1(2017-06-11) and I don't
> see the expected output from the specs.
> 
> https://mozilla.invisionapp.com/share/ZKBC94BPQ#/screens/229470847
> https://mozilla.invisionapp.com/share/ZKBC94BPQ#/screens/
> 229470852(Certificate
>  
> If I'm not using the right example please provide one. Thanks

Please specify what exactly you expected to be different. Note that the copy is not supposed to be changed yet.

Comment 17

[ovidiu boca[:Ovidiu]]

Hi,
The text from the warning message "Your connection is not secure." is not the same as the one from specs. Also, the other parts of the text that are shown don't match the text from specs.

Comment 18

[ovidiu boca[:Ovidiu]]

There are any changes here that we can verify?

Comment 19

[Johann Hofmann [:johannh]]

(In reply to ovidiu boca[:Ovidiu] from comment #18)
> There are any changes here that we can verify?

Hey Ovidiu,

Everything except the copy (the text) of that page should look like the provided specs.

Comment 20

[ovidiu boca[:Ovidiu]]

Attachment: Mac and Ubuntu border bug.png

Hi Johann,
I tested this on Mac 10.12, Ubuntu 16.04 and Windows 10 with Nightly 57.0a1(2017-08-09) and I have a question. On Mac and Ubuntu when I open a page that is not secure I see that "Go Back" button has a dotted line border. Please see the attachment, on Windows, I don't see this issue.

Comment 21

[Johann Hofmann [:johannh]]

(In reply to ovidiu boca[:Ovidiu] from comment #20)
> Created attachment 8895733 [details]
> Mac and Ubuntu border bug.png
> 
> Hi Johann,
> I tested this on Mac 10.12, Ubuntu 16.04 and Windows 10 with Nightly
> 57.0a1(2017-08-09) and I have a question. On Mac and Ubuntu when I open a
> page that is not secure I see that "Go Back" button has a dotted line
> border. Please see the attachment, on Windows, I don't see this issue.

The border is also present on release, it's an indicator that the element has keyboard focus. It's a bit narrower because we're now using padding instead of width, but I don't think that's an issue.

Comment 22

[ovidiu boca[:Ovidiu]]

Thanks Johann, based on your comment 21 I will mark this as verified fixed.