For #23337 - Customize the https-only mode error page

app/src/main/assets/lowMediumErrorPages.js

@@ -18,11 +18,17 @@ function parseQuery(queryString) {
  * Updates the HTML elements based on the queryMap
  */
 function injectValues(queryMap) {
+    const tryAgainButton = document.getElementById('errorTryAgain');
+    const continueHttpButton = document.getElementById("continueHttp");
+    const backFromHttpButton = document.getElementById('backFromHttp');
+
     // Go through each element and inject the values
     document.title = queryMap.title;
+    tryAgainButton.innerHTML = queryMap.button;
+    continueHttpButton.innerHTML = queryMap.continueHttpButton;
+    backFromHttpButton.innerHTML = queryMap.badCertGoBack;
     document.getElementById('errorTitleText').innerHTML = queryMap.title;
     document.getElementById('errorShortDesc').innerHTML = queryMap.description;
-    document.getElementById('errorTryAgain').innerHTML = queryMap.button;
     document.getElementById('advancedButton').innerHTML = queryMap.badCertAdvanced;
     document.getElementById('badCertTechnicalInfo').innerHTML = queryMap.badCertTechInfo;
     document.getElementById('advancedPanelBackButton').innerHTML = queryMap.badCertGoBack;
@@ -35,6 +41,15 @@ function injectValues(queryMap) {
     } else  {
         errorImage.src = "resource://android/assets/" + queryMap.image;
     }
+
+    if (queryMap.showContinueHttp === "true") {
+       // On the "HTTPS-Only" error page "Try again" doesn't make sense since reloading the page
+       // will just show an error page again.
+       tryAgainButton.style.display = 'none';
+    } else {
+        continueHttpButton.style.display = 'none';
+        backFromHttpButton.style.display = 'none';
+    }
 };
 
 let advancedVisible = false;
@@ -104,13 +119,16 @@ async function acceptAndContinue(temporary) {
 document.addEventListener('DOMContentLoaded', function () {
     if (window.history.length == 1) {
         document.getElementById('advancedPanelBackButton').style.display = 'none';
+        document.getElementById('backFromHttp').style.display = 'none';
     } else {
         document.getElementById('advancedPanelBackButton').addEventListener('click', () => window.history.back());
+        document.getElementById('backFromHttp').addEventListener('click', () => window.history.back());
     }
 
     document.getElementById('errorTryAgain').addEventListener('click', () => window.location.reload());
     document.getElementById('advancedButton').addEventListener('click', toggleAdvancedAndScroll);
     document.getElementById('advancedPanelAcceptButton').addEventListener('click', () => acceptAndContinue(true));
+    document.getElementById('continueHttp').addEventListener('click', () => document.reloadWithHttpsOnlyException());
 });
 
 parseQuery(document.documentURI);

app/src/main/assets/low_and_medium_risk_error_pages.html

@@ -42,6 +42,12 @@
         class="buttonSecondary hidden"
       ></button>
 
+      <!-- "Go back" Button (For HTTPS-Only error page only) -->
+      <button id="backFromHttp"></button>
+
+      <!-- "Continue to HTTP site" Button (For HTTPS-Only error page only) -->
+      <button id="continueHttp" class="buttonSecondary"></button>
+
       <hr id="horizontalLine" hidden />
       <div id="advancedPanelContainer">
         <div id="badCertAdvancedPanel" hidden class="advanced-panel">

app/src/main/java/org/mozilla/fenix/AppRequestInterceptor.kt

@@ -69,7 +69,9 @@ class AppRequestInterceptor(
             context = context,
             errorType = improvedErrorType,
             uri = uri,
-            htmlResource = riskLevel.htmlRes
+            htmlResource = riskLevel.htmlRes,
+            titleOverride = { type -> getErrorPageTitle(context, type) },
+            descriptionOverride = { type -> getErrorPageDescription(context, type) }
         )
 
         return RequestInterceptor.ErrorResponse(errorPageUri)
@@ -123,6 +125,7 @@ class AppRequestInterceptor(
 
         return when {
             errorType == ErrorType.ERROR_UNKNOWN_HOST && !isConnected -> ErrorType.ERROR_NO_INTERNET
+            errorType == ErrorType.ERROR_HTTPS_ONLY -> ErrorType.ERROR_HTTPS_ONLY
             else -> errorType
         }
     }
@@ -160,6 +163,25 @@ class AppRequestInterceptor(
         ErrorType.ERROR_SAFEBROWSING_UNWANTED_URI -> RiskLevel.High
     }
 
+    private fun getErrorPageTitle(context: Context, type: ErrorType): String? {
+        return when (type) {
+            ErrorType.ERROR_HTTPS_ONLY -> context.getString(R.string.errorpage_httpsonly_title)
+            // Returning `null` will let the component use its default title for this error type
+            else -> null
+        }
+    }
+
+    private fun getErrorPageDescription(context: Context, type: ErrorType): String? {
+        return when (type) {
+            ErrorType.ERROR_HTTPS_ONLY ->
+                context.getString(R.string.errorpage_httpsonly_message_title) +
+                    "<br><br>" +
+                    context.getString(R.string.errorpage_httpsonly_message_summary)
+            // Returning `null` will let the component use its default description for this error type
+            else -> null
+        }
+    }
+
     internal enum class RiskLevel(val htmlRes: String) {
         Low(LOW_AND_MEDIUM_RISK_ERROR_PAGES),
         Medium(LOW_AND_MEDIUM_RISK_ERROR_PAGES),

app/src/main/res/values/strings.xml

@@ -330,6 +330,12 @@
     <string name="preferences_https_only_in_all_tabs">Enable in all tabs</string>
     <!-- Option for the https only setting -->
     <string name="preferences_https_only_in_private_tabs">Enable only in private tabs</string>
+    <!-- Title shown in the error page for when trying to access a http website while https only mode is enabled. -->
+    <string name="errorpage_httpsonly_title">Secure site not available</string>
+    <!-- Message shown in the error page for when trying to access a http website while https only mode is enabled. The message has two paragraphs. This is the first. -->
+    <string name="errorpage_httpsonly_message_title">Most likely, the website simply does not support HTTPs.</string>
+    <!-- Message shown in the error page for when trying to access a http website while https only mode is enabled. The message has two paragraphs. This is the second. -->
+    <string name="errorpage_httpsonly_message_summary">However, it’s also possible that an attacker is involved. If you continue to the website, you should not enter any sensitive info. If you continue, HTTPS-Only mode will be turned off temporarily for the site.</string>
     <!-- Preference for accessibility -->
     <string name="preferences_accessibility">Accessibility</string>
     <!-- Preference to override the Firefox Account server -->