Moved chrome://connection-help logic to a separate WebUI.

Moved connection-help out of AboutUI and into its own WebUI, also
separated strings in the grd file, and implemented the content as an
HTML template that is filled with those strings.
Compression was also enabled for resources.

Bug: 813792
Change-Id: Ibc3e86206a7662490570cecff4a304030ba767f2
Reviewed-on: https://chromium-review.googlesource.com/957877
Commit-Queue: Carlos IL <carlosil@chromium.org>
Reviewed-by: Edward Jung <edwardjung@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Reviewed-by: Emily Stark <estark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#544775}

chrome/browser/ui/BUILD.gn

@@ -1011,6 +1011,7 @@ split_static_library("ui") {
     "//components/safe_browsing/web_ui",
     "//components/search",
     "//components/search_engines",
+    "//components/security_interstitials/content:security_interstitial_page",
     "//components/security_interstitials/core",
     "//components/security_state/content",
     "//components/security_state/core",

chrome/browser/ui/webui/about_ui.cc

@@ -326,25 +326,6 @@ std::string ChromeURLs() {
   return html;
 }
 
-std::string HelpCenterContent() {
-  std::string html;
-  AppendHeader(&html, 0, l10n_util::GetStringUTF8(IDS_CONNECTION_HELP_TITLE));
-  html +=
-      "<meta name=\"viewport\" content=\"initial-scale=1, minimum-scale=1, "
-      "width=device-width\">\n";
-  webui::AppendWebUiCssTextDefaults(&html);
-  html += "<style>";
-  html += l10n_util::GetStringUTF8(IDR_SECURITY_INTERSTITIAL_COMMON_CSS);
-  html += l10n_util::GetStringUTF8(IDR_SECURITY_INTERSTITIAL_CORE_CSS);
-  html += "</style>";
-  AppendBody(&html);
-  html += "<div class=\"interstitial-wrapper\">\n";
-  html += l10n_util::GetStringUTF8(IDS_CONNECTION_HELP_HTML);
-  html += "</div>\n";
-  AppendFooter(&html);
-  return html;
-}
-
 // AboutDnsHandler bounces the request back to the IO thread to collect
 // the DNS information.
 class AboutDnsHandler : public base::RefCountedThreadSafe<AboutDnsHandler> {
@@ -445,8 +426,6 @@ void AboutUIHTMLSource::StartDataRequest(
   // Add your data source here, in alphabetical order.
   if (source_name_ == chrome::kChromeUIChromeURLsHost) {
     response = ChromeURLs();
-  } else if (source_name_ == chrome::kChromeUIConnectionHelpHost) {
-    response = HelpCenterContent();
   } else if (source_name_ == chrome::kChromeUICreditsHost) {
     int idr = IDR_ABOUT_UI_CREDITS_HTML;
     if (path == kCreditsJsPath)

chrome/browser/ui/webui/chrome_web_ui_controller_factory.cc

@@ -80,6 +80,8 @@
 #include "components/prefs/pref_service.h"
 #include "components/safe_browsing/web_ui/constants.h"
 #include "components/safe_browsing/web_ui/safe_browsing_ui.h"
+#include "components/security_interstitials/content/connection_help_ui.h"
+#include "components/security_interstitials/content/urls.h"
 #include "components/signin/core/browser/profile_management_switches.h"
 #include "components/signin/core/browser/signin_buildflags.h"
 #include "content/public/browser/web_contents.h"
@@ -280,10 +282,6 @@ WebUIController* NewWebUI<WelcomeWin10UI>(WebUI* web_ui, const GURL& url) {
 #endif  // defined(OS_WIN)
 
 bool IsAboutUI(const GURL& url) {
-  if (base::FeatureList::IsEnabled(features::kBundledConnectionHelpFeature) &&
-      url.host_piece() == chrome::kChromeUIConnectionHelpHost) {
-    return true;
-  }
   return (url.host_piece() == chrome::kChromeUIChromeURLsHost ||
           url.host_piece() == chrome::kChromeUICreditsHost ||
           url.host_piece() == chrome::kChromeUIDNSHost
@@ -405,6 +403,10 @@ WebUIFactoryFunction GetWebUIFactoryFunction(WebUI* web_ui,
     return MdBookmarksUI::IsEnabled() ? &NewWebUI<MdBookmarksUI>
                                       : &NewWebUI<BookmarksUI>;
   }
+  if (base::FeatureList::IsEnabled(features::kBundledConnectionHelpFeature) &&
+      url.host_piece() == security_interstitials::kChromeUIConnectionHelpHost) {
+    return &NewWebUI<security_interstitials::ConnectionHelpUI>;
+  }
   // Downloads list on Android uses the built-in download manager.
   if (url.host_piece() == chrome::kChromeUIDownloadsHost)
     return &NewWebUI<MdDownloadsUI>;

chrome/browser/ui/webui/webui_browsertest.cc

@@ -3,18 +3,14 @@
 // found in the LICENSE file.
 
 #include "base/command_line.h"
-#include "base/strings/utf_string_conversions.h"
-#include "base/test/scoped_feature_list.h"
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/browser_commands.h"
 #include "chrome/browser/ui/tabs/tab_strip_model.h"
 #include "chrome/browser/ui/webui/chrome_web_ui_controller_factory.h"
-#include "chrome/common/chrome_features.h"
 #include "chrome/common/chrome_switches.h"
 #include "chrome/common/url_constants.h"
 #include "chrome/test/base/in_process_browser_test.h"
 #include "chrome/test/base/ui_test_utils.h"
-#include "components/strings/grit/components_strings.h"
 #include "content/public/browser/child_process_security_policy.h"
 #include "content/public/browser/render_frame_host.h"
 #include "content/public/browser/render_process_host.h"
@@ -22,7 +18,6 @@
 #include "content/public/common/content_switches.h"
 #include "content/public/test/browser_test_utils.h"
 #include "content/public/test/test_utils.h"
-#include "ui/base/l10n/l10n_util.h"
 
 namespace {
 
@@ -98,18 +93,3 @@ IN_PROC_BROWSER_TEST_F(WebUIImplBrowserTest, SameDocumentNavigationsAndReload) {
   // Verify that after a reload, the test handler has been disallowed.
   EXPECT_FALSE(test_handler->IsJavascriptAllowed());
 }
-
-// Tests that navigating to chrome://connection-help displays the proper help
-// page.
-IN_PROC_BROWSER_TEST_F(WebUIImplBrowserTest, ConnectionHelpUI) {
-  base::test::ScopedFeatureList feature_list;
-  feature_list.InitAndEnableFeature(features::kBundledConnectionHelpFeature);
-  ui_test_utils::NavigateToURL(browser(),
-                               GURL(chrome::kChromeUIConnectionHelpURL));
-  content::WaitForLoadStop(
-      browser()->tab_strip_model()->GetActiveWebContents());
-  base::string16 tab_title;
-  ui_test_utils::GetCurrentTabTitle(browser(), &tab_title);
-  EXPECT_EQ(base::UTF16ToUTF8(tab_title),
-            l10n_util::GetStringUTF8(IDS_CONNECTION_HELP_TITLE));
-}

chrome/common/webui_url_constants.cc

@@ -35,8 +35,6 @@ const char kChromeUIChromeURLsURL[] = "chrome://chrome-urls/";
 const char kChromeUIComponentsHost[] = "components";
 const char kChromeUIConflictsHost[] = "conflicts";
 const char kChromeUIConflictsURL[] = "chrome://conflicts/";
-const char kChromeUIConnectionHelpHost[] = "connection-help";
-const char kChromeUIConnectionHelpURL[] = "chrome://connection-help";
 const char kChromeUIConstrainedHTMLTestURL[] = "chrome://constrained-test/";
 const char kChromeUIContentSettingsURL[] = "chrome://settings/content";
 const char kChromeUICrashHost[] = "crash";

chrome/common/webui_url_constants.h

@@ -42,8 +42,6 @@ extern const char kChromeUIChromeURLsURL[];
 extern const char kChromeUIComponentsHost[];
 extern const char kChromeUIConflictsHost[];
 extern const char kChromeUIConflictsURL[];
-extern const char kChromeUIConnectionHelpHost[];
-extern const char kChromeUIConnectionHelpURL[];
 extern const char kChromeUIConstrainedHTMLTestURL[];
 extern const char kChromeUIContentSettingsURL[];
 extern const char kChromeUICrashHost[];

components/resources/security_interstitials_resources.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
-  <include name="IDR_SECURITY_INTERSTITIAL_COMMON_CSS" file="../security_interstitials/core/common/resources/interstitial_common.css" type="BINDATA" />
-  <include name="IDR_SECURITY_INTERSTITIAL_CORE_CSS" file="../security_interstitials/core/common/resources/interstitial_core.css" type="BINDATA" />
+  <include name="IDR_SECURITY_INTERSTITIAL_COMMON_CSS" file="../security_interstitials/core/common/resources/interstitial_common.css" compress="gzip" type="BINDATA" />
+  <include name="IDR_SECURITY_INTERSTITIAL_CORE_CSS" file="../security_interstitials/core/common/resources/interstitial_core.css" compress="gzip" type="BINDATA" />
   <include name="IDR_SECURITY_INTERSTITIAL_UI_HTML" file="../security_interstitials/core/browser/resources/list_of_interstitials.html" flattenhtml="true" type="BINDATA" />
   <include name="IDR_SECURITY_INTERSTITIAL_HTML" file="../security_interstitials/core/browser/resources/interstitial_large.html" flattenhtml="true" type="BINDATA" />
   <include name="IDR_SECURITY_INTERSTITIAL_QUIET_HTML" file="../security_interstitials/core/browser/resources/interstitial_webview_quiet.html" flattenhtml="true" type="BINDATA" />
+  <include name="IDR_SECURITY_INTERSTITIAL_CONNECTION_HELP_HTML" file="../security_interstitials/content/resources/connection_help.html" compress="gzip" type="BINDATA" />
+  <include name="IDR_SECURITY_INTERSTITIAL_CONNECTION_HELP_CSS" file="../security_interstitials/content/resources/connection_help.css" compress="gzip" type="BINDATA" />
+  <include name="IDR_SECURITY_INTERSTITIAL_CONNECTION_HELP_JS" file="../security_interstitials/content/resources/connection_help.js" compress="gzip" type="BINDATA" />
 </grit-part>

components/security_interstitials/content/BUILD.gn

@@ -4,12 +4,16 @@
 
 static_library("security_interstitial_page") {
   sources = [
+    "connection_help_ui.cc",
+    "connection_help_ui.h",
     "security_interstitial_controller_client.cc",
     "security_interstitial_controller_client.h",
     "security_interstitial_page.cc",
     "security_interstitial_page.h",
     "unsafe_resource.cc",
     "unsafe_resource.h",
+    "urls.cc",
+    "urls.h",
   ]
 
   public_deps = [
@@ -24,6 +28,7 @@ static_library("security_interstitial_page") {
     "//components/safe_browsing/db:hit_report",
     "//components/safe_browsing/db:util",
     "//components/security_interstitials/core:core",
+    "//components/strings:components_strings_grit",
     "//content/public/browser",
     "//content/public/common",
   ]

components/security_interstitials/content/connection_help_ui.cc

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "components/security_interstitials/content/connection_help_ui.h"
+
+#include "components/grit/components_resources.h"
+#include "components/security_interstitials/content/urls.h"
+#include "components/strings/grit/components_strings.h"
+#include "content/public/browser/browser_context.h"
+#include "content/public/browser/web_contents.h"
+#include "content/public/browser/web_ui.h"
+#include "content/public/browser/web_ui_data_source.h"
+#include "ui/base/l10n/l10n_util.h"
+
+namespace security_interstitials {
+
+ConnectionHelpUI::ConnectionHelpUI(content::WebUI* web_ui)
+    : content::WebUIController(web_ui) {
+  content::WebUIDataSource* html_source =
+      content::WebUIDataSource::Create(kChromeUIConnectionHelpHost);
+
+  html_source->AddLocalizedString("connectionHelpTitle",
+                                  IDS_CONNECTION_HELP_TITLE);
+  html_source->AddLocalizedString("connectionHelpHeading",
+                                  IDS_CONNECTION_HELP_HEADING);
+  html_source->AddLocalizedString("connectionHelpGeneralHelp",
+                                  IDS_CONNECTION_HELP_GENERAL_HELP);
+  html_source->AddLocalizedString("connectionHelpSpecificErrorHeading",
+                                  IDS_CONNECTION_HELP_SPECIFIC_ERROR_HEADING);
+  html_source->AddLocalizedString(
+      "connectionHelpConnectionNotPrivateTitle",
+      IDS_CONNECTION_HELP_CONNECTION_NOT_PRIVATE_TITLE);
+  html_source->AddLocalizedString(
+      "connectionHelpConnectionNotPrivateDetails",
+      IDS_CONNECTION_HELP_CONNECTION_NOT_PRIVATE_DETAILS);
+  html_source->AddLocalizedString("connectionHelpConnectToNetworkTitle",
+                                  IDS_CONNECTION_HELP_CONNECT_TO_NETWORK_TITLE);
+  html_source->AddLocalizedString(
+      "connectionHelpConnectToNetworkDetails",
+      IDS_CONNECTION_HELP_CONNECT_TO_NETWORK_DETAILS);
+  html_source->AddLocalizedString("connectionHelpIncorrectClockTitle",
+                                  IDS_CONNECTION_HELP_INCORRECT_CLOCK_TITLE);
+  html_source->AddLocalizedString("connectionHelpIncorrectClockDetails",
+                                  IDS_CONNECTION_HELP_INCORRECT_CLOCK_DETAILS);
+  html_source->AddLocalizedString("connectionHelpMitmSoftwareTitle",
+                                  IDS_CONNECTION_HELP_MITM_SOFTWARE_TITLE);
+  html_source->AddLocalizedString("connectionHelpMitmSoftwareDetails",
+                                  IDS_CONNECTION_HELP_MITM_SOFTWARE_DETAILS);
+  html_source->AddLocalizedString("connectionHelpShowMore",
+                                  IDS_CONNECTION_HELP_SHOW_MORE);
+  html_source->AddLocalizedString("connectionHelpShowLess",
+                                  IDS_CONNECTION_HELP_SHOW_LESS);
+
+  html_source->SetJsonPath("strings.js");
+
+  html_source->AddResourcePath("interstitial_core.css",
+                               IDR_SECURITY_INTERSTITIAL_CORE_CSS);
+  html_source->AddResourcePath("interstitial_common.css",
+                               IDR_SECURITY_INTERSTITIAL_COMMON_CSS);
+  html_source->AddResourcePath("connection_help.css",
+                               IDR_SECURITY_INTERSTITIAL_CONNECTION_HELP_CSS);
+  html_source->AddResourcePath("connection_help.js",
+                               IDR_SECURITY_INTERSTITIAL_CONNECTION_HELP_JS);
+  html_source->SetDefaultResource(
+      IDR_SECURITY_INTERSTITIAL_CONNECTION_HELP_HTML);
+  html_source->UseGzip();
+
+  content::BrowserContext* browser_context =
+      web_ui->GetWebContents()->GetBrowserContext();
+  content::WebUIDataSource::Add(browser_context, html_source);
+}
+
+ConnectionHelpUI::~ConnectionHelpUI() {}
+
+}  // namespace security_interstitials

components/security_interstitials/content/connection_help_ui.h

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef COMPONENTS_SECURITY_INTERSTITIALS_CONTENT_CONNECTION_HELP_UI_H_
+#define COMPONENTS_SECURITY_INTERSTITIALS_CONTENT_CONNECTION_HELP_UI_H_
+
+#include "base/macros.h"
+#include "content/public/browser/web_ui_controller.h"
+
+namespace security_interstitials {
+
+// The WebUI for chrome://connection-help, which provides help content to users
+// with network configuration problems that prevent them from making secure
+// connections.
+class ConnectionHelpUI : public content::WebUIController {
+ public:
+  explicit ConnectionHelpUI(content::WebUI* web_ui);
+  ~ConnectionHelpUI() override;
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(ConnectionHelpUI);
+};
+
+}  // namespace security_interstitials
+
+#endif  // COMPONENTS_SECURITY_INTERSTITIALS_CONTENT_CONNECTION_HELP_UI_H_

components/security_interstitials/content/resources/connection_help.css

+/* Copyright 2018 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+h2 {
+    margin-top: 2em;
+}
+
+ul.expandable li {
+    margin-bottom: 1em;
+    padding: 0.5em 0;
+}
+
+ul.expandable button {
+    background: rgba(0, 0, 0, 0);
+    border: 0;
+    color: rgb(105, 105, 105);
+    display: block;
+    float: none;
+    margin-top: 0.5em;
+    padding: 0;
+    text-align: left;
+    text-decoration: underline;
+    text-transform: uppercase;
+}

components/security_interstitials/content/resources/connection_help.html

+<!DOCTYPE HTML>
+<html dir="$i18n{textdirection}">
+  <head>
+    <title>$i18n{connectionHelpTitle}</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width">
+    <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
+    <link rel="stylesheet" href="interstitial_core.css">
+    <link rel="stylesheet" href="interstitial_common.css">
+    <link rel="stylesheet" href="connection_help.css">
+    <script src="chrome://resources/js/cr.js"></script>
+    <script src="chrome://resources/js/load_time_data.js"></script>
+    <script src="chrome://resources/js/util.js"></script>
+    <script src="strings.js"></script>
+    <script src="connection_help.js"></script>
+  </head>
+  <body>
+    <div class="interstitial-wrapper">
+      <h1>$i18n{connectionHelpHeading}</h1>
+      $i18nRaw{connectionHelpGeneralHelp}
+      <h2>$i18n{connectionHelpSpecificErrorHeading}</h2>
+      <ul class="expandable">
+        <li>
+          $i18nRaw{connectionHelpConnectionNotPrivateTitle}
+          <div id="details-certerror" class="hidden">
+            $i18nRaw{connectionHelpConnectionNotPrivateDetails}
+          </div>
+          <button id="details-certerror-button" class="small-link">$i18n{connectionHelpShowMore}</button>
+        </li>
+        <li>
+          $i18nRaw{connectionHelpConnectToNetworkTitle}
+          <div id="details-connectnetwork" class="hidden">
+            $i18nRaw{connectionHelpConnectToNetworkDetails}
+          </div>
+          <button id="details-connectnetwork-button" class="small-link">$i18n{connectionHelpShowMore}</button>
+        </li>
+        <li>
+          $i18nRaw{connectionHelpIncorrectClockTitle}
+          <div id="details-clock" class="hidden">
+            $i18nRaw{connectionHelpIncorrectClockDetails}
+          </div>
+          <button id="details-clock-button" class="small-link">$i18n{connectionHelpShowMore}</button>
+        </li>
+        <li>
+          $i18nRaw{connectionHelpMitmSoftwareTitle}
+          <div id="details-mitmsoftware" class="hidden">
+            $i18nRaw{connectionHelpMitmSoftwareDetails}
+          </div>
+          <button id="details-mitmsoftware-button" class="small-link">$i18n{connectionHelpShowMore}</button>
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>

components/security_interstitials/content/resources/connection_help.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var HIDDEN_CLASS = 'hidden';
+
+function setupEvents() {
+  $('details-certerror-button').addEventListener('click', function(event) {
+    toggleHidden('details-certerror', 'details-certerror-button');
+  });
+  $('details-connectnetwork-button').addEventListener('click', function(event) {
+    toggleHidden('details-connectnetwork', 'details-connectnetwork-button');
+  });
+  $('details-clock-button').addEventListener('click', function(event) {
+    toggleHidden('details-clock', 'details-clock-button');
+  });
+  $('details-mitmsoftware-button').addEventListener('click', function(event) {
+    toggleHidden('details-mitmsoftware', 'details-mitmsoftware-button');
+  });
+}
+
+function toggleHidden(className, buttonName) {
+  var hiddenDetails = $(className).classList.toggle(HIDDEN_CLASS);
+  $(buttonName).innerText = hiddenDetails ?
+      loadTimeData.getString('connectionHelpShowMore') :
+      loadTimeData.getString('connectionHelpShowLess');
+}
+
+document.addEventListener('DOMContentLoaded', setupEvents);

components/security_interstitials/content/urls.cc

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "components/security_interstitials/content/urls.h"
+
+namespace security_interstitials {
+
+const char kChromeUIConnectionHelpHost[] = "connection-help";
+const char kChromeUIConnectionHelpURL[] = "chrome://connection-help";
+
+}  // namespace security_interstitials

components/security_interstitials/content/urls.h

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef COMPONENTS_SECURITY_INTERSTITIALS_CONTENT_URLS_H_
+#define COMPONENTS_SECURITY_INTERSTITIALS_CONTENT_URLS_H_
+
+namespace security_interstitials {
+
+extern const char kChromeUIConnectionHelpHost[];
+extern const char kChromeUIConnectionHelpURL[];
+
+}  // namespace security_interstitials
+
+#endif  // COMPONENTS_SECURITY_INTERSTITIALS_CONTENT_URLS_H_

components/security_interstitials_strings.grdp

@@ -302,23 +302,44 @@
   <message name="IDS_PHISHING_WEBVIEW_EXPLANATION_PARAGRAPH" desc="The explanation of why Safe Browsing has blocked the page. Allows the user to proceed using a link.">
     This content might try to trick you into installing software or revealing personal information. <ph name="BEGIN_LINK">&lt;a href="#" id="proceed-link"&gt;</ph>Show anyway<ph name="END_LINK">&lt;/a&gt;</ph>
   </message>
+  <message name="IDS_CONNECTION_HELP_SHOW_MORE" desc="The button label to expand sections for the chrome://connection-help site. Paired with IDS_CONNECTION_HELP_SHOW_LESS">
+    Show More
+  </message>
+  <message name="IDS_CONNECTION_HELP_SHOW_LESS" desc="The button label to collapse sections for the chrome://connection-help site. Paired with IDS_CONNECTION_HELP_SHOW_MORE">
+    Show Less
+  </message>
   <message name="IDS_CONNECTION_HELP_TITLE" desc="The title for the chrome://connection-help site">
     Connection Help
   </message>
-  <message name="IDS_CONNECTION_HELP_HTML" desc="The HTML for the chrome://connection-help site that is shown when visiting the online help center triggers an SSL interstitial, this is a simplified version of the content at https://support.google.com/chrome/answer/6098869.">
-    &lt;h1&gt;Fix connection errors&lt;/h1&gt;
-    &lt;p&gt;If you get an error message when you try to visit a website, try these fixes.&lt;/p&gt;
-    &lt;h2&gt;Fix most connection errors&lt;/h2&gt;
+  <message name="IDS_CONNECTION_HELP_HEADING" desc="The heading for chrome://connection-help. Matches the heading in https://support.google.com/chrome/answer/6098869">
+   Fix connection errors
+  </message>
+  <message name="IDS_CONNECTION_HELP_GENERAL_HELP" desc="First general help paragraph for chrome://connection-help. Matches the 'Fix most connection errors' section in https://support.google.com/chrome/answer/6098869">
     &lt;p&gt;If you try to visit a website and it doesn’t open, first try to fix the error with these troubleshooting steps:&lt;/p&gt;
     &lt;ol&gt;
     &lt;li&gt;Check the web address for typos.&lt;/li&gt;
     &lt;li&gt;Make sure your internet connection is working normally.&lt;/li&gt;
     &lt;li&gt;Contact the website owner.&lt;/li&gt;
     &lt;/ol&gt;
-    &lt;h2&gt;Get help with a specific error message&lt;/h2&gt;
-    &lt;h3&gt;"Your connection is not private" or "NET::ERR_CERT_AUTHORITY_INVALID" or "ERR_CERT_COMMON_NAME_INVALID" or "NET::ERR_CERT_WEAK_SIGNATURE_ALGORITHM" or "SSL certificate error"&lt;/h3&gt;
+  </message>
+  <message name="IDS_CONNECTION_HELP_SPECIFIC_ERROR_HEADING" desc="Heading for individual errors section in chrome://connection-help. Matches the heading for the specific error section in https://support.google.com/chrome/answer/6098869">
+    Get help with a specific error message
+  </message>
+  <message name="IDS_CONNECTION_HELP_CONNECTION_NOT_PRIVATE_TITLE" desc="Title for your connection is not private section in chrome://connection-help. Matches the heading for the third section in https://support.google.com/chrome/answer/6098869">
+    "Your connection is not private" or "&lt;span class="error-code"&gt;NET::ERR_CERT_AUTHORITY_INVALID&lt;/span&gt;" or "&lt;span class="error-code"&gt;ERR_CERT_COMMON_NAME_INVALID&lt;/span&gt;" or "&lt;span class="error-code"&gt;NET::ERR_CERT_WEAK_SIGNATURE_ALGORITHM&lt;/span&gt;" or "SSL certificate error"
+  </message>
+  <message name="IDS_CONNECTION_HELP_CONNECT_TO_NETWORK_TITLE" desc="Title for connect to network section in chrome://connection-help. Matches the heading for the fourth section in https://support.google.com/chrome/answer/6098869">
+    "Connect to network"
+  </message>
+  <message name="IDS_CONNECTION_HELP_INCORRECT_CLOCK_TITLE" desc="Title for incorrect clock section in chrome://connection-help. Matches the heading for the fifth section in https://support.google.com/chrome/answer/6098869">
+    "Your clock is behind" or "Your clock is ahead" or "&lt;span class="error-code"&gt;NET::ERR_CERT_DATE_INVALID&lt;/span&gt;"
+  </message>
+  <message name="IDS_CONNECTION_HELP_MITM_SOFTWARE_TITLE" desc="Title for MITM software section in chrome://connection-help. Matches the heading for the eight section in https://support.google.com/chrome/answer/6098869">
+    "Software on your computer is stopping Chrome from safely connecting to the web" (Windows computers only)
+  </message>
+  <message name="IDS_CONNECTION_HELP_CONNECTION_NOT_PRIVATE_DETAILS" desc="Details for your connection is not private section in chrome://connection-help. Matches the third section in https://support.google.com/chrome/answer/6098869">
     &lt;h4&gt;Step 1: Sign in to the portal&lt;/h4&gt;
-    &lt;p&gt;Wi-Fi networks at places like cafes or airports need you to sign in. To see the sign-in page, visit a page that uses&lt;code&gt;http://&lt;/code&gt;.&lt;/p&gt;
+    &lt;p&gt;Wi-Fi networks at places like cafes or airports need you to sign in. To see the sign-in page, visit a page that uses &lt;code&gt;http://&lt;/code&gt;.&lt;/p&gt;
     &lt;ol&gt;
     &lt;li&gt;Go to any website starting with &lt;code&gt;http://&lt;/code&gt;, like &lt;a href="http://example.com" target="_blank"&gt;http://example.com&lt;/a&gt;.&lt;/li&gt;
     &lt;li&gt;On the sign-in page that opens, sign in to use the internet.&lt;/li&gt;
@@ -334,13 +355,16 @@
     &lt;p&gt;Remember to turn your antivirus program back on when you're done.&lt;/p&gt;
     &lt;h4&gt;Step 5: Get extra help&lt;/h4&gt;
     &lt;p&gt;If you still see the error, contact the website owner.&lt;/p&gt;
-    &lt;h3&gt;"Connect to network"&lt;/h3&gt;
+  </message>
+  <message name="IDS_CONNECTION_HELP_CONNECT_TO_NETWORK_DETAILS" desc="Details for connect to network section in chrome://connection-help. Matches the fourth section in https://support.google.com/chrome/answer/6098869">
     &lt;p&gt;You'll see this error if you're using a Wi-Fi portal where you have to sign in before you can get online.&lt;/p&gt;
     &lt;p&gt;To fix the error, click &lt;strong&gt;Connect&lt;/strong&gt; on the page you're trying to open.&lt;/p&gt;
-    &lt;h3&gt;"Your clock is behind" or "Your clock is ahead" or "NET::ERR_CERT_DATE_INVALID"&lt;/h3&gt;
+  </message>
+  <message name="IDS_CONNECTION_HELP_INCORRECT_CLOCK_DETAILS" desc="Details for incorrect clock section in chrome://connection-help. Matches the fifth section in https://support.google.com/chrome/answer/6098869">
     &lt;p&gt;You'll see this error if your computer or mobile device's date and time are inaccurate.&lt;/p&gt;
     &lt;p&gt;To fix the error, open your device's clock. Make sure the time and date are correct.&lt;/p&gt;
-    &lt;h3&gt;"Software on your computer is stopping Chrome from safely connecting to the web" (Windows computers only)&lt;/h3&gt;
+  </message>
+  <message name="IDS_CONNECTION_HELP_MITM_SOFTWARE_DETAILS" desc="Details for MITM software section in chrome://connection-help. Matches the eight section in https://support.google.com/chrome/answer/6098869">
     &lt;p&gt;You'll see this error if you have Superfish software on your Windows computer.&lt;/p&gt;
     &lt;p&gt;Follow these steps to temporarily disable the software so you can get on the web. You'll need administrator privileges.&lt;/p&gt;
     &lt;ol&gt;