Change the open URL link to a button

[patch-malone]

When trying to visit a page that isn't available as HTTPS a user may be shown a cancel page where they can either cancel the insecure visit or choose to override the restriction. The link of the URL shown at the bottom of that page misleadingly goes to an internal extension URL. Instead, change the actionable item into a button with a clear label describing the action.

Screenshots

Before

After

Notice the button at the bottom of the page

[pipboy96]

Needs some work with CSS styling, but the idea is good.

[patch-malone]

Is there another button that I can reference for the styling? I looked around for button-like UI elements but couldn't find anything so I made the button look similar to the S logo at the top of the page.

[pipboy96]

@patch-malone Wait a couple of minutes, I will write a style.

[pipboy96]

I have another idea. To make the page seem more like an error page, the bg should be yellow, possibly striped too. HTTPS Everywhere logo needs to be fixed to remove white background though.

[pipboy96]

You can apply these styles to html:

background: repeating-linear-gradient(45deg, #ffdc00, #ffdc00 10px, #e5c600 10px, #e5c600 20px);
min-height: 100vh; /* this fixes weird looping */

[pipboy96]

To temporarily remove the white bg from the image, you can set mix-blend-mode to darken on it,

[pipboy96]

Maybe instead of closing the page you should make it go back to the page that had unencrypted link and if that's impossible (page was opened directly) you should simply hide the button?

[patch-malone]

Tab history isn't accessible. history.back() doesn't work correctly in this instance and document.referrer is blank. I'll remove the button. It can be added in a separate PR.

[patch-malone]

@Bisaloo Are any other changes required before merging?

[Bisaloo]

Let's ask @zoracon. I know some people at the EFF are usually involved in UI PR review but I'll let @zoracon ping them if necessary.

[zoracon]

@Bisaloo I can pull this down and review. The interstitial page does admittedly need work. We have UX dev plans in the making #16669, but I see no harm with looking this change over to see how it plays out.

[zoracon]

Made a small change to language I realized was outdated in the interstitial, but otherwise looks good to go and will merge soon