[EoS] Adds a chrome://explore-sites-internals page.

This page is a Mojo-based WebUI page, and it supports the following
operations:
* Read key/value properties of the system, currently flag state,
  country code, and server endpoint.
* Clear the catalog database.
* Override the request country.
* Force a network request.

Bug: 900673
Change-Id: Iafff7c0b66f37a93bd46e7251ba231823951a513
Reviewed-on: https://chromium-review.googlesource.com/c/1310757Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Ken Rockot <rockot@google.com>
Reviewed-by: Greg Kerr <kerrnel@chromium.org>
Reviewed-by: Cathy Li <chili@chromium.org>
Reviewed-by: Peter Williamson <petewil@chromium.org>
Commit-Queue: Justin DeWitt <dewittj@chromium.org>
Cr-Commit-Position: refs/heads/master@{#636819}

chrome/app/BUILD.gn

@@ -469,7 +469,10 @@ source_set("chrome_content_browser_overlay_manifest") {
   }
 
   if (is_android) {
-    deps += [ "//chrome/browser/ui/webui/eoc_internals:mojo_bindings" ]
+    deps += [
+      "//chrome/browser/ui/webui/eoc_internals:mojo_bindings",
+      "//chrome/browser/ui/webui/explore_sites_internals:mojo_bindings",
+    ]
   } else {
     deps += [
       "//chrome/browser/ui/webui/app_management:mojo_bindings",

chrome/app/chrome_content_browser_overlay_manifest.cc

@@ -73,6 +73,7 @@
 
 #if defined(OS_ANDROID)
 #include "chrome/browser/ui/webui/eoc_internals/eoc_internals.mojom.h"
+#include "chrome/browser/ui/webui/explore_sites_internals/explore_sites_internals.mojom.h"
 #else
 #include "chrome/browser/ui/webui/app_management/app_management.mojom.h"
 #include "chrome/services/app_service/public/cpp/manifest.h"
@@ -231,6 +232,7 @@ const service_manager::Manifest& GetChromeContentBrowserOverlayManifest() {
                     feed_internals::mojom::PageHandler,
 #if defined(OS_ANDROID)
                     eoc_internals::mojom::PageHandler,
+                    explore_sites_internals::mojom::PageHandler,
 #else
                     app_management::mojom::PageHandlerFactory,
 #endif

chrome/browser/BUILD.gn

@@ -5014,6 +5014,7 @@ grit("resources") {
   if (is_android) {
     deps += [
       "//chrome/browser/ui/webui/eoc_internals:mojo_bindings_js",
+      "//chrome/browser/ui/webui/explore_sites_internals:mojo_bindings_js",
       "//chrome/browser/ui/webui/feed_internals:mojo_bindings_js",
       "//chrome/browser/ui/webui/snippets_internals:mojo_bindings_js",
     ]

chrome/browser/browser_resources.grd

@@ -197,6 +197,9 @@
         <include name="IDR_EOC_INTERNALS_JS" file="resources\eoc_internals\eoc_internals.js" compress="gzip" type="BINDATA" />
         <include name="IDR_EOC_INTERNALS_MOJO_JS" file="${root_gen_dir}\chrome\browser\ui\webui\eoc_internals\eoc_internals.mojom.js" use_base_dir="false" type="BINDATA" compress="gzip" />
         <include name="IDR_EXPLORE_SITES_INTERNALS_HTML" file="resources\explore_sites_internals\explore_sites_internals.html" allowexternalscript="true" compress="gzip" type="BINDATA" />
+        <include name="IDR_EXPLORE_SITES_INTERNALS_CSS" file="resources\explore_sites_internals\explore_sites_internals.css" compress="gzip" type="BINDATA" />
+        <include name="IDR_EXPLORE_SITES_INTERNALS_JS" file="resources\explore_sites_internals\explore_sites_internals.js" compress="gzip" type="BINDATA" />
+        <include name="IDR_EXPLORE_SITES_INTERNALS_MOJO_JS" file="${root_gen_dir}\chrome\browser\ui\webui\explore_sites_internals\explore_sites_internals.mojom-lite.js" use_base_dir="false" type="BINDATA" compress="gzip" />
         <include name="IDR_FEED_INTERNALS_HTML" file="resources\feed_internals\feed_internals.html" allowexternalscript="true" compress="gzip" type="BINDATA" />
         <include name="IDR_FEED_INTERNALS_CSS" file="resources\feed_internals\feed_internals.css" allowexternalscript="true" compress="gzip" type="BINDATA" />
         <include name="IDR_FEED_INTERNALS_JS" file="resources\feed_internals\feed_internals.js" compress="gzip" type="BINDATA" />

chrome/browser/resources/BUILD.gn

@@ -44,6 +44,7 @@ if (closure_compile) {
     if (is_android) {
       deps += [
         "eoc_internals:closure_compile",
+        "explore_sites_internals:closure_compile",
         "feed_internals:closure_compile",
         "offline_pages:closure_compile",
         "snippets_internals:closure_compile",

chrome/browser/resources/explore_sites_internals/BUILD.gn

+# 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":explore_sites_internals",
+  ]
+}
+
+js_library("explore_sites_internals") {
+  deps = [
+    "//chrome/browser/ui/webui/explore_sites_internals:mojo_bindings_js_library_for_compile",
+    "//ui/webui/resources/js:util",
+  ]
+}

chrome/browser/resources/explore_sites_internals/explore_sites_internals.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. */
+
+body {
+  margin: 1em;
+}
+
+.details {
+  width: 100%;
+}
+
+.details td {
+  min-width: 100px;
+}
+
+.details tr:nth-child(odd) {
+  background: rgb(239, 243, 255);
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+}
+
+#country-code-input {
+  display: inline-block;
+  flex-grow: 1;
+}
+
+.failed.throbber {
+  background: url(chrome://resources/images/error.svg);
+  background-size: contain;
+}
+
+.throbber {
+  margin-bottom: auto;
+  margin-top: auto;
+}

chrome/browser/resources/explore_sites_internals/explore_sites_internals.html

@@ -10,8 +10,58 @@ found in the LICENSE file.
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Explore Sites Internals</title>
+  <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
+  <link rel="stylesheet" href="chrome://resources/css/throbber.css">
+  <link rel="stylesheet" href="explore_sites_internals.css">
+
+  <script src="chrome://resources/js/mojo_bindings_lite.js"></script>
+  <script src="chrome://resources/js/util.js"></script>
+  <script src="explore_sites_internals.mojom-lite.js"></script>
+
+  <script src="explore_sites_internals.js"></script>
 </head>
+
 <body>
-  <h1>Explore Sites Internals</h1>
+  <div id="properties">
+    <h3>Properties</h3>
+    <div>
+      <table class="details">
+        <tr>
+          <td>Server Endpoint</td>
+          <td id="server-endpoint"></td>
+        </tr>
+        <tr>
+          <td>Country Code</td>
+          <td id="country-code"></td>
+        </tr>
+        <tr>
+          <td>Chrome flags setup correctly</td>
+          <td id="chrome-flags-setup"></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+
+  <div>
+    <h3>Cached Catalog</h3>
+    <div class="controls">
+      <button id="clear-cached-catalog">Clear suggestions</button>
+      <div id="clear-catalog-throbber" class="throbber" hidden></div>
+    </div>
+    <h3>Override Country Code</h3>
+    <div class="controls">
+      <button id="override-country-code">Override country:</button>
+      <input class="expand" id="country-code-input" type="text">
+      <div id="country-override-throbber" class="throbber" hidden></div>
+    </div>
+    <p>
+      Country override is reset when Chrome shuts down. Press "Force fetch"
+      to download the catalog for the new country.
+    </p>
+    <h3>Network Requests</h3>
+    <div class="controls">
+      <button id="force-network-request">Force fetch</button>
+      <div id="network-request-throbber" class="throbber" hidden></div>
+  </div>
 </body>
 </html>

chrome/browser/resources/explore_sites_internals/explore_sites_internals.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.
+
+'use strict';
+
+// Reference to the backend.
+let pageHandler = null;
+
+(function() {
+function delay(ms) {
+  return new Promise((resolve, reject) => setTimeout(resolve, ms));
+}
+
+/** Setting this class changes a throbber to show an error symbol. */
+const FAILED_CSS_CLASS = 'failed';
+
+/**
+ * Shows a throbber with ID |id|.
+ * @param {string} id The HTML id of the throbber element to reveal.
+ * @param {!Promise} promiseToWaitFor The throbber won't be hidden before this
+ *     promise resolves.
+ * @return {!Promise} Resolves with the result of promiseToWaitFor after the
+ *     minimum delay has completed.
+ */
+function showThrobber(id, promiseToWaitFor) {
+  const delayMs = 400;
+  const element = $(id);
+  element.classList.remove(FAILED_CSS_CLASS);
+
+  element.removeAttribute('hidden');
+  return Promise.all([delay(delayMs), promiseToWaitFor]).then(results => {
+    element.hidden = true;
+    return results[1];
+  });
+}
+
+/**
+ * Get the current Explore Sites service parameters and fill the DOM with
+ * the values.
+ */
+function updatePageWithProperties() {
+  pageHandler.getProperties().then(function(response) {
+    for (const [field, value] of Object.entries(response.properties)) {
+      $(field).textContent = value;
+    }
+  });
+}
+
+/**
+ * Removes any existing catalogs and their version_token markers from the
+ * catalog.
+ */
+function clearCachedCatalog() {
+  const id = 'clear-catalog-throbber';
+  showThrobber(id, pageHandler.clearCachedExploreSitesCatalog())
+      .then(success => $(id).classList.toggle(FAILED_CSS_CLASS, !success));
+}
+
+/**
+ * Sets the country code on ExploreSitesService in order to override the Finch
+ * and geolocation based parameter.
+ */
+function overrideCountryCode() {
+  const id = 'country-override-throbber';
+  const newCountryCode = $('country-code-input').value;
+  showThrobber(id, pageHandler.overrideCountryCode(newCountryCode))
+      .then(success => {
+        $(id).classList.toggle(FAILED_CSS_CLASS, !success);
+        updatePageWithProperties();
+      });
+}
+
+/**
+ * Causes the Explore Sites service to request a catalog from the network as a
+ * "foreground" request.  Does not override any of the local data, so the
+ * downloaded network may be unchanged.
+ */
+function forceNetworkRequest() {
+  const id = 'network-request-throbber';
+  showThrobber(id, pageHandler.forceNetworkRequest())
+      .then(e => $(id).classList.toggle(FAILED_CSS_CLASS, !e.success));
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Setup backend mojo.
+  pageHandler = exploreSitesInternals.mojom.PageHandler.getProxy();
+  updatePageWithProperties();
+
+  // Set up event listeners.
+  $('clear-cached-catalog').onclick = clearCachedCatalog;
+  $('override-country-code').onclick = overrideCountryCode;
+  $('force-network-request').onclick = forceNetworkRequest;
+});
+})();

chrome/browser/ui/webui/explore_sites_internals/explore_sites_internals_ui.cc

@@ -21,6 +21,12 @@ ExploreSitesInternalsUI::ExploreSitesInternalsUI(content::WebUI* web_ui)
   content::WebUIDataSource* source = content::WebUIDataSource::Create(
       chrome::kChromeUIExploreSitesInternalsHost);
 
+  source->AddResourcePath("explore_sites_internals.css",
+                          IDR_EXPLORE_SITES_INTERNALS_CSS);
+  source->AddResourcePath("explore_sites_internals.js",
+                          IDR_EXPLORE_SITES_INTERNALS_JS);
+  source->AddResourcePath("explore_sites_internals.mojom-lite.js",
+                          IDR_EXPLORE_SITES_INTERNALS_MOJO_JS);
   source->SetDefaultResource(IDR_EXPLORE_SITES_INTERNALS_HTML);
   source->UseGzip();