CrOS chrome://network: Create network-state-ui component

This CL affects debugging UI only.
It extracts the Network State related UI to a new component,
network-state-ui.

Bug: 921726
Change-Id: I8df48464a6604e1b605d97df21e498927f582b88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2240236Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Azeem Arshad <azeemarshad@chromium.org>
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#780008}

chrome/app/chromeos_strings.grdp

@@ -3399,6 +3399,18 @@
   <message name="IDS_NETWORK_UI_TITLE" desc="Title of the page">
     Network
   </message>
+  <message name="IDS_NETWORK_UI_TAB_GENERAL" desc="General tab name">
+    General
+  </message>
+  <message name="IDS_NETWORK_UI_TAB_NETWORK_HEALTH" desc="Network health tab name">
+    Network Health
+  </message>
+  <message name="IDS_NETWORK_UI_TAB_NETWORK_STATE" desc="Network state tab name">
+    Network State
+  </message>
+  <message name="IDS_NETWORK_UI_TAB_NETWORK_SELECT" desc="Network Select tab name">
+    Network Select
+  </message>
   <message name="IDS_NETWORK_UI_AUTO_REFRESH" desc="Instructions for how to auto-refresh the page">
     Add a query param in URL to auto-refresh the page: chrome://network/?refresh=&lt;sec&gt;
   </message>

chrome/browser/browser_resources.grd

@@ -334,7 +334,8 @@
       <if expr="chromeos">
         <include name="IDR_NETWORK_UI_HTML" file="resources\chromeos\network_ui\network_ui.html" type="BINDATA" />
         <include name="IDR_NETWORK_UI_JS" file="resources\chromeos\network_ui\network_ui.js" type="BINDATA" />
-        <include name="IDR_NETWORK_UI_CSS" file="resources\chromeos\network_ui\network_ui.css" type="BINDATA" />
+        <include name="IDR_NETWORK_STATE_UI_HTML" file="resources\chromeos\network_ui\network_state_ui.html" type="BINDATA" />
+        <include name="IDR_NETWORK_STATE_UI_JS" file="resources\chromeos\network_ui\network_state_ui.js" type="BINDATA" />
       </if>
       <if expr="_google_chrome">
         <include name="IDR_PREF_HASH_SEED_BIN" file="resources\settings_internal\pref_hash_seed.bin" type="BINDATA" />

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

@@ -5,22 +5,31 @@
 import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
-  deps = [ ":network_ui" ]
+  deps = [
+    ":network_state_ui",
+    ":network_ui",
+  ]
 }
 
 js_library("network_ui") {
   deps = [
-    "//chromeos/services/network_config/public/mojom:mojom_js_library_for_compile",
-    "//chromeos/services/network_health/public/mojom:mojom_js_library_for_compile",
-    "//ui/webui/resources/cr_components/chromeos/network:mojo_interface_provider",
-    "//ui/webui/resources/cr_components/chromeos/network:network_icon",
-    "//ui/webui/resources/cr_components/chromeos/network:network_list",
+    ":network_state_ui",
     "//ui/webui/resources/cr_components/chromeos/network:onc_mojo",
     "//ui/webui/resources/js:load_time_data",
     "//ui/webui/resources/js:util",
     "//ui/webui/resources/js/cr:ui",
     "//ui/webui/resources/js/cr/ui:tabs",
   ]
+}
+
+js_library("network_state_ui") {
+  deps = [
+    "//chromeos/services/network_config/public/mojom:mojom_js_library_for_compile",
+    "//ui/webui/resources/cr_components/chromeos/network:mojo_interface_provider",
+    "//ui/webui/resources/cr_components/chromeos/network:network_icon",
+    "//ui/webui/resources/cr_components/chromeos/network:network_list",
+    "//ui/webui/resources/cr_components/chromeos/network:onc_mojo",
+  ]
   externs_list = chrome_extension_public_externs +
                  [ "$externs_path/networking_private.js" ]
 }

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/mojo_interface_provider.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_icon.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_listener_behavior.html">
+<link rel="import" href="chrome://resources/cr_components/chromeos/network/onc_mojo.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+
+<dom-module id="network-state-ui">
+  <template>
+    <style include="cr-shared-style">
+      div {
+        margin: 10px 0;
+      }
+
+      .state-table {
+        border-collapse: collapse;
+        min-width: 800px;
+      }
+
+      .state-table tr td {
+        border: 1px solid rgb(220, 220, 220);
+        font-size: 13px;
+      }
+
+      .state-table-header {
+        font-weight: bold;
+      }
+
+      .state-table-expand-button-cell {
+        text-align: center;
+      }
+
+      .state-table-expand-button {
+        background-color: #fff;
+        border: none;
+        height: 20px;
+        margin: 0;
+        outline: none;
+        padding: 0;
+        width: 20px;
+      }
+
+      .state-table-expanded-cell {
+        min-width: 400px;
+        white-space: pre-wrap;
+      }
+
+      .state-table-icon-cell {
+        height: 32px;
+        width: 32px;
+      }
+    </style>
+
+    <div>$i18n{autoRefreshText}</div>
+
+    <div>
+      <cr-button class="action-button" id="refresh"
+          on-click="requestNetworks">
+        $i18n{networkRefreshText}
+      </cr-button>
+    </div>
+
+    <div>
+      <h2>$i18n{networkListsLabel}</h2>
+      <div>$i18n{clickToExpandText}</div>
+      <div>
+        <span>$i18n{propertyFormatText}</span>
+        <select id="get-property-format" on-change="requestNetworks">
+          <option value="normal">$i18n{normalFormatOption}</option>
+          <option value="managed">$i18n{managedFormatOption}</option>
+          <option value="state">$i18n{stateFormatOption}</option>
+          <option value="shill">$i18n{shillFormatOption}</option>
+        </select>
+      </div>
+
+      <h3>$i18n{devicesLabel}</h3>
+      <table id="device-state-table" class="state-table">
+        <tr class="state-table-header">
+          <td></td>
+          <td></td>
+          <td>Type</td>
+          <td>State</td>
+        </tr>
+      </table>
+
+      <h3>$i18n{visibleNetworksLabel}</h3>
+      <table id="network-state-table" class="state-table">
+        <tr class="state-table-header">
+          <td></td>
+          <td></td>
+          <td>GUID</td>
+          <td>Name</td>
+          <td>Type</td>
+          <td>State</td>
+          <td>Connect?</td>
+          <td>Error</td>
+          <td>Security</td>
+          <td>Tech</td>
+          <td>Activation</td>
+          <td>Roam</td>
+          <td>Frequency</td>
+          <td>Strength</td>
+        </tr>
+      </table>
+
+      <h3>$i18n{ethernetEapNetworkLabel}</h3>
+      <table id="ethernet-eap-state-table" class="state-table">
+        <tr class="state-table-header">
+          <td></td>
+          <td></td>
+          <td>GUID</td>
+          <td>Name</td>
+          <td>Type</td>
+          <td>ONC Source</td>
+        </tr>
+      </table>
+
+      <h3>$i18n{favoriteNetworksLabel}</h3>
+      <table id="favorite-state-table" class="state-table">
+        <tr class="state-table-header">
+          <td></td>
+          <td></td>
+          <td>GUID</td>
+          <td>Name</td>
+          <td>Type</td>
+          <td>ONC Source</td>
+        </tr>
+      </table>
+    </div>
+  </template>
+  <script src="network_state_ui.js"></script>
+</dom-module>

chrome/browser/resources/chromeos/network_ui/network_ui.css

-/* Copyright 2013 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 {
-  display: flex;
-  flex-direction: column;
-}
-
-.state-table {
-  border-collapse: collapse;
-  min-width: 800px;
-}
-
-.state-table tr td {
-  border: 1px solid rgb(220, 220, 220);
-  font-size: 13px;
-}
-
-.state-table-header {
-  font-weight: bold;
-}
-
-.state-table-expand-button-cell {
-  text-align: center;
-}
-
-.state-table-expand-button {
-  background-color: #fff;
-  border: none;
-  height: 20px;
-  margin: 0;
-  outline: none;
-  padding: 0;
-  width: 20px;
-}
-
-.state-table-expanded-cell {
-  min-width: 400px;
-  white-space: pre-wrap;
-}
-
-.state-table-icon-cell {
-  height: 32px;
-  width: 32px;
-}

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

@@ -7,13 +7,12 @@
 
   <link rel="stylesheet" href="chrome://resources/css/tabs.css">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
-  <link rel="stylesheet" href="chrome://network/network_ui.css">
 
-  <link rel="import" href="chrome://resources/cr_components/chromeos/network/mojo_interface_provider.html">
   <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_icon.html">
   <link rel="import" href="chrome://resources/cr_components/chromeos/network/network_select.html">
   <link rel="import" href="chrome://resources/cr_components/chromeos/network_health/network_health_summary.html">
   <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+  <link rel="import" href="network_state_ui.html">
 
   <script src="chrome://resources/js/cr.js"></script>
   <script src="chrome://resources/js/cr/ui.js"></script>
@@ -52,16 +51,21 @@
 
 <tabbox id="network-ui">
   <tabs>
-    <tab>General</tab>
-    <tab>Network Health</tab>
-    <tab>Network Select</tab>
+    <tab>$i18n{generalTab}</tab>
+    <tab>$i18n{networkHealthTab}</tab>
+    <tab>$i18n{networkStateTab}</tab>
+    <tab>$i18n{networkSelectTab}</tab>
   </tabs>
   <tabpanels>
     <tabpanel id="general">
       <h2>$i18n{titleText}</h2>
-      <div>$i18n{autoRefreshText}</div>
       <span>$i18nRaw{deviceLogLinkText}</span>
 
+      <div>
+        <h2>$i18n{globalPolicyLabel}</h2>
+        <div id="global-policy"></div>
+      </div>
+
       <div>
         <h2>$i18n{cellularActivationLabel}</h2>
         <cr-button class="action-button" id="cellular-activation-button">
@@ -76,88 +80,17 @@
           $i18n{addNewWifiButtonText}
         </cr-button>
       </div>
+    </tabpanel>  
 
-      <h2>$i18n{globalPolicyLabel}</h2>
-      <div id="global-policy"></div>
-      <div>
-        <cr-button class="action-button" id="refresh">
-          $i18n{networkRefreshText}
-        </cr-button>
-      </div>
-
-      <h2>$i18n{networkListsLabel}</h2>
-
-      <div>$i18n{clickToExpandText}</div>
-      <div>
-        <span>$i18n{propertyFormatText}</span>
-        <select id="get-property-format">
-          <option value="normal">$i18n{normalFormatOption}</option>
-          <option value="managed">$i18n{managedFormatOption}</option>
-          <option value="state">$i18n{stateFormatOption}</option>
-          <option value="shill">$i18n{shillFormatOption}</option>
-        </select>
-      </div>
-
-      <h3>$i18n{devicesLabel}</h3>
-      <table id="device-state-table" class="state-table">
-        <tr class="state-table-header">
-          <td></td>
-          <td></td>
-          <td>Type</td>
-          <td>State</td>
-        </tr>
-      </table>
-
-      <h3>$i18n{visibleNetworksLabel}</h3>
-      <table id="network-state-table" class="state-table">
-        <tr class="state-table-header">
-          <td></td>
-          <td></td>
-          <td>GUID</td>
-          <td>Name</td>
-          <td>Type</td>
-          <td>State</td>
-          <td>Connect?</td>
-          <td>Error</td>
-          <td>Security</td>
-          <td>Tech</td>
-          <td>Activation</td>
-          <td>Roam</td>
-          <td>Frequency</td>
-          <td>Strength</td>
-        </tr>
-      </table>
-
-      <h3>$i18n{ethernetEapNetworkLabel}</h3>
-      <table id="ethernet-eap-state-table" class="state-table">
-        <tr class="state-table-header">
-          <td></td>
-          <td></td>
-          <td>GUID</td>
-          <td>Name</td>
-          <td>Type</td>
-          <td>ONC Source</td>
-        </tr>
-      </table>
-
-      <h3>$i18n{favoriteNetworksLabel}</h3>
-      <table id="favorite-state-table" class="state-table">
-        <tr class="state-table-header">
-          <td></td>
-          <td></td>
-          <td>GUID</td>
-          <td>Name</td>
-          <td>Type</td>
-          <td>ONC Source</td>
-        </tr>
-      </table>
-
-    </tabpanel>
     <tabpanel id="health">
       <h2>$i18n{networkHealthLabel}</h2>
       <network-health-summary></network-health-summary>
     </tabpanel>
 
+    <tabpanel id="state">
+      <network-state-ui></network-state-ui>
+    </tabpanel>
+
     <tabpanel id="select">
       <div id="select-div">
         <network-select></network-select>

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

@@ -315,6 +315,18 @@ void NetworkUI::GetLocalizedStrings(base::DictionaryValue* localized_strings) {
   localized_strings->SetString("titleText",
                                l10n_util::GetStringUTF16(IDS_NETWORK_UI_TITLE));
 
+  localized_strings->SetString(
+      "generalTab", l10n_util::GetStringUTF16(IDS_NETWORK_UI_TAB_GENERAL));
+  localized_strings->SetString(
+      "networkHealthTab",
+      l10n_util::GetStringUTF16(IDS_NETWORK_UI_TAB_NETWORK_HEALTH));
+  localized_strings->SetString(
+      "networkStateTab",
+      l10n_util::GetStringUTF16(IDS_NETWORK_UI_TAB_NETWORK_STATE));
+  localized_strings->SetString(
+      "networkSelectTab",
+      l10n_util::GetStringUTF16(IDS_NETWORK_UI_TAB_NETWORK_SELECT));
+
   localized_strings->SetString(
       "autoRefreshText",
       l10n_util::GetStringUTF16(IDS_NETWORK_UI_AUTO_REFRESH));
@@ -396,10 +408,11 @@ NetworkUI::NetworkUI(content::WebUI* web_ui)
   html->AddLocalizedStrings(localized_strings);
 
   network_element::AddLocalizedStrings(html);
-
   html->UseStringsJs();
-  html->AddResourcePath("network_ui.css", IDR_NETWORK_UI_CSS);
+
   html->AddResourcePath("network_ui.js", IDR_NETWORK_UI_JS);
+  html->AddResourcePath("network_state_ui.html", IDR_NETWORK_STATE_UI_HTML);
+  html->AddResourcePath("network_state_ui.js", IDR_NETWORK_STATE_UI_JS);
   html->SetDefaultResource(IDR_NETWORK_UI_HTML);
 
   content::WebUIDataSource::Add(web_ui->GetWebContents()->GetBrowserContext(),