[Offline pages]: Show a different set of download button sets and styles based on experiment flag.

Change-Id: I1aacf702cc4b2247179c97ab393f141090cd8940
Reviewed-on: https://chromium-review.googlesource.com/1009484
Commit-Queue: Cathy Li <chili@chromium.org>
Reviewed-by: Peter Williamson <petewil@chromium.org>
Reviewed-by: Matt Menke <mmenke@chromium.org>
Reviewed-by: Colin Blundell <blundell@chromium.org>
Cr-Commit-Position: refs/heads/master@{#551541}

components/error_page/common/localized_error.cc

@@ -38,6 +38,10 @@
 #include "base/win/windows_version.h"
 #endif
 
+#if defined(OS_ANDROID)
+#include "components/offline_pages/core/offline_page_feature.h"
+#endif
+
 namespace error_page {
 
 namespace {
@@ -1060,15 +1064,21 @@ void LocalizedError::GetStrings(
       !is_incognito && failed_url.is_valid() &&
       failed_url.SchemeIsHTTPOrHTTPS() &&
       IsSuggested(options.suggestions, SUGGEST_OFFLINE_CHECKS)) {
-    std::unique_ptr<base::DictionaryValue> download_button =
-        std::make_unique<base::DictionaryValue>();
-    download_button->SetString(
-        "msg",
-        l10n_util::GetStringUTF16(IDS_ERRORPAGES_BUTTON_DOWNLOAD));
-    download_button->SetString(
-        "disabledMsg",
-        l10n_util::GetStringUTF16(IDS_ERRORPAGES_BUTTON_DOWNLOADING));
-    error_strings->Set("downloadButton", std::move(download_button));
+    error_strings->SetPath(
+        {"downloadButton", "msg"},
+        base::Value(l10n_util::GetStringUTF16(IDS_ERRORPAGES_BUTTON_DOWNLOAD)));
+    error_strings->SetPath({"downloadButton", "disabledMsg"},
+                           base::Value(l10n_util::GetStringUTF16(
+                               IDS_ERRORPAGES_BUTTON_DOWNLOADING)));
+
+    if (offline_pages::ShouldShowAlternateDinoPage()) {
+      // Under the experiment, we will show a disabled reload button
+      // in addition to an enabled download button.
+      error_strings->SetPath(
+          {"reloadButton", "msg"},
+          base::Value(l10n_util::GetStringUTF16(IDS_ERRORPAGES_BUTTON_RELOAD)));
+      error_strings->SetKey("alternateDownloadButtonStyle", base::Value(true));
+    }
   }
 #endif  // defined(OS_ANDROID)
 }

components/neterror/resources/neterror.css

@@ -341,11 +341,15 @@ html[subframe] body {
 
 /* download-button shows both icon and text. */
 #download-button {
+  height: 48px;
+}
+
+.download-button {
   box-shadow: none;
   position: relative;
 }
 
-#download-button:before {
+.download-button:before {
   -webkit-margin-end: 4px;
   background: -webkit-image-set(
       url(../../resources/default_100_percent/neterror/download.png) 1x,
@@ -358,11 +362,58 @@ html[subframe] body {
   vertical-align: middle;
 }
 
-#download-button:disabled {
+.download-button:disabled {
   background: rgb(180, 206, 249);
   color: rgb(255, 255, 255);
 }
 
+/* Alternate dino page button styles */
+#control-buttons .reload-button-alternate:disabled {
+  background: #ccc;
+  color: #fff;
+  font-size: 14px;
+  height: 48px;
+}
+
+/* Overriding default control button styles */
+#control-buttons .download-button-alternate,
+#control-buttons .download-button-alternate-disabled {
+  background: none;
+  box-shadow: none;
+}
+
+#control-buttons .download-button-alternate:active {
+  background: rgba(66, 133, 244, 0.12);
+}
+
+.download-button-alternate {
+  color: rgb(66, 133, 244);
+}
+
+.download-button-alternate:before {
+  -webkit-margin-end: 4px;
+  background: -webkit-image-set(
+      url(../../resources/default_100_percent/neterror/download_blue.png) 1x,
+      url(../../resources/default_200_percent/neterror/download_blue.png) 2x)
+    no-repeat;
+  content: '';
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+}
+
+.download-button-alternate-disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+.download-button-alternate-disabled:before {
+  background: -webkit-image-set(
+      url(../../resources/default_100_percent/neterror/download_grey.png) 1x,
+      url(../../resources/default_200_percent/neterror/download_grey.png) 2x)
+    no-repeat;
+}
+
 #buttons::after {
   clear: both;
   content: '';

components/neterror/resources/neterror.js

@@ -118,6 +118,9 @@ function downloadButtonClick() {
   if (window.errorPageController) {
     errorPageController.downloadButtonClick();
     var downloadButton = document.getElementById('download-button');
+    if (downloadButton.classList.contains('download-button-alternate')) {
+      downloadButton.classList.add('download-button-alternate-disabled');
+    }
     downloadButton.disabled = true;
     downloadButton.textContent = downloadButton.disabledText;
   }
@@ -199,6 +202,16 @@ function onDocumentLoad() {
     detailsButton.classList.add('singular');
   }
 
+  // Check for customization of downloadButton style if it's visible.
+  if (downloadButtonVisible &&
+      loadTimeData.valueExists('alternateDownloadButtonStyle')) {
+    downloadButton.classList.add('download-button-alternate');
+    reloadButton.disabled = true;
+    reloadButton.classList.add('reload-button-alternate');
+  } else if (downloadButtonVisible) {
+    downloadButton.classList.add('download-button');
+  }
+
   // Show control buttons.
   if (reloadButtonVisible || showSavedCopyButtonVisible ||
       downloadButtonVisible) {