network-diagnostics: remove ctrl buttons from ui component

This change removes the control buttons from the network diagnostics
component and insteads moves them to the parent component in
chrome://network. This allows the component to be used in the
connectivity diagnostics app with slightly different control buttons.

Bug: chromium:11406598
Change-Id: I9b941711b716958089b88da43aac7d21aa8f7c2c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2499374
Commit-Queue: Trent Begin <tbegin@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#823452}

chrome/browser/resources/chromeos/network_ui/BUILD.gn

@@ -17,6 +17,7 @@ js_library("network_ui") {
   deps = [
     ":network_ui_browser_proxy",
     "//ui/webui/resources/cr_components/chromeos/network:onc_mojo",
+    "//ui/webui/resources/cr_components/chromeos/network_health:network_diagnostics",
     "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:load_time_data",
   ]

chrome/browser/resources/chromeos/network_ui/network_ui.html

@@ -17,6 +17,10 @@
 <dom-module id="network-ui">
   <template>
     <style>
+      .button-group > cr-button {
+        margin-inline-start: 10px;
+      }
+
       .tabpanel > div {
         margin-bottom: 10px;
       }
@@ -96,7 +100,15 @@
         <h2>$i18n{networkHealthLabel}</h2>
         <network-health-summary></network-health-summary>
         <h2>$i18n{networkDiagnosticsLabel}</h2>
-        <network-diagnostics
+        <div class="button-group">
+          <cr-button on-click="onRunAllRoutinesClick_">
+            [[i18n('NetworkDiagnosticsRunAll')]]
+          </cr-button>
+          <cr-button on-click="onSendFeedbackReportClick_">
+            [[i18n('NetworkDiagnosticsSendFeedback')]]
+          </cr-button>
+        </div>
+        <network-diagnostics id="network-diagnostics"
             on-open-feedback-dialog="onOpenFeedbackDialog_">
         </network-diagnostics>
       </div>

chrome/browser/resources/chromeos/network_ui/network_ui.js

@@ -199,14 +199,35 @@ Polymer({
     });
   },
 
+  /**
+   * Returns and typecasts the network diagnostics element
+   * @returns {!NetworkDiagnosticsElement}
+   * @private
+   */
+  getNetworkDiagnosticsElement_() {
+    return /** @type {!NetworkDiagnosticsElement} */ (
+        this.$$('#network-diagnostics'));
+  },
+
+  /**
+   * Handles requests to open the feedback report dialog. The provided string
+   * in the event will be sent as a part of the feedback report.
+   * @param {!Event<string>} event
+   * @private
+   */
+  onSendFeedbackReportClick_(event) {
+    const results = this.getNetworkDiagnosticsElement_().getResults();
+    chrome.send('OpenFeedbackDialog', [results]);
+  },
+
   /**
    * Handles requests to open the feedback report dialog. The provided string
    * in the event will be sent as a part of the feedback report.
    * @param {!Event<string>} event
    * @private
    */
-  onOpenFeedbackDialog_(event) {
-    chrome.send('OpenFeedbackDialog', [event.detail]);
+  onRunAllRoutinesClick_(event) {
+    this.getNetworkDiagnosticsElement_().runAllRoutines();
   },
 
   /**

chrome/browser/ui/webui/chromeos/network_ui.cc

@@ -37,6 +37,7 @@
 #include "chromeos/services/network_config/public/mojom/cros_network_config.mojom.h"
 #include "chromeos/services/network_health/public/mojom/network_diagnostics.mojom.h"
 #include "chromeos/services/network_health/public/mojom/network_health.mojom.h"
+#include "chromeos/strings/grit/chromeos_strings.h"
 #include "components/device_event_log/device_event_log.h"
 #include "content/public/browser/browser_context.h"
 #include "content/public/browser/web_contents.h"
@@ -502,6 +503,14 @@ void NetworkUI::GetLocalizedStrings(base::DictionaryValue* localized_strings) {
   localized_strings->SetString(
       "networkLogsDebuggingUnknown",
       l10n_util::GetStringUTF16(IDS_NETWORK_UI_NETWORK_LOGS_DEBUGGING_UNKNOWN));
+
+  // Network Diagnostics
+  localized_strings->SetString(
+      "NetworkDiagnosticsRunAll",
+      l10n_util::GetStringUTF16(IDS_NETWORK_DIAGNOSTICS_RUN_ALL));
+  localized_strings->SetString(
+      "NetworkDiagnosticsSendFeedback",
+      l10n_util::GetStringUTF16(IDS_NETWORK_DIAGNOSTICS_SEND_FEEDBACK));
 }
 
 NetworkUI::NetworkUI(content::WebUI* web_ui)

chromeos/components/connectivity_diagnostics/network_diagnostics_localized_strings.cc

@@ -31,8 +31,6 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"NetworkDiagnosticsFailed", IDS_NETWORK_DIAGNOSTICS_FAILED},
     {"NetworkDiagnosticsNotRun", IDS_NETWORK_DIAGNOSTICS_NOT_RUN},
     {"NetworkDiagnosticsRun", IDS_NETWORK_DIAGNOSTICS_RUN},
-    {"NetworkDiagnosticsRunAll", IDS_NETWORK_DIAGNOSTICS_RUN_ALL},
-    {"NetworkDiagnosticsSendFeedback", IDS_NETWORK_DIAGNOSTICS_SEND_FEEDBACK},
     {"SignalStrengthProblem_NotFound",
      IDS_NETWORK_DIAGNOSTICS_SIGNAL_STRENGTH_PROBLEM_NOT_FOUND},
     {"SignalStrengthProblem_Weak",

ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics.html

@@ -8,10 +8,6 @@
 <dom-module id="network-diagnostics">
   <template>
     <style>
-      .button-group > * {
-        margin-inline-start: 10px;
-      }
-
       .routine-group {
         display: inline-flex;
         flex-wrap: wrap;
@@ -54,14 +50,7 @@
         background-color: rgb(255, 242, 204);
       }
     </style>
-    <div class="button-group">
-      <cr-button on-click="onRunAllRoutinesClick_">
-        [[i18n('NetworkDiagnosticsRunAll')]]
-      </cr-button>
-      <cr-button on-click="onSendFeedbackReportClick_">
-        [[i18n('NetworkDiagnosticsSendFeedback')]]
-      </cr-button>
-    </div>
+
     <div class="routine-group">
       <template is="dom-repeat" items="[[routines_]]" as="routine">
         <div class="routine-container">

ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics.js

@@ -116,23 +116,23 @@ Polymer({
         diagnosticsMojom.NetworkDiagnosticsRoutines.getRemote();
   },
 
-  /** @private */
-  onRunAllRoutinesClick_() {
+  /**
+   * Runs all supported network diagnostics routines.
+   * @public
+   */
+  runAllRoutines() {
     for (const routine of this.routines_) {
       this.runRoutine_(routine.type);
     }
   },
 
   /**
-   * @param {!Event} event
-   * @private
+   * Gets the network diagnostics routine results and organizes them into a
+   * stringified object that is returned.
+   * @return {!string} The network diagnostics routine results
+   * @public
    */
-  onRunRoutineClick_(event) {
-    this.runRoutine_(event.model.index);
-  },
-
-  /** @private */
-  onSendFeedbackReportClick_() {
+  getResults() {
     const results = {};
     for (const routine of this.routines_) {
       if (routine.result) {
@@ -148,7 +148,15 @@ Polymer({
         results[name] = result;
       }
     }
-    this.fire('open-feedback-dialog', JSON.stringify(results, undefined, 2));
+    return JSON.stringify(results, undefined, 2);
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onRunRoutineClick_(event) {
+    this.runRoutine_(event.model.index);
   },
 
   /**