Settings > Internet > Config: Update dialog to match UX

This CL:
* Resizes the dialogs to better match the mocks
* Modifies the dialog title and layout to better match the mocks
* Updates the style of the inputs to match dialog input style
* Renames internet-config-dialog in internet_config.html to
  internet-config match the filename and reduce confusion
  with internet_config_dialog.html (stand alone dialog).

Bug: 380937
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I7086e18be6d2bd627c8038de39f7e89dc16d0ea7
Reviewed-on: https://chromium-review.googlesource.com/742341
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Toni Barzic <tbarzic@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512722}

chrome/app/settings_strings.grdp

@@ -1288,9 +1288,15 @@
     <message name="IDS_SETTINGS_INTERNET" desc="Name of the settings page which displays internet preferences.">
       Network
     </message>
-    <message name="IDS_SETTINGS_INTERNET_CONFIG" desc="Name of the settings page for configuring a network.">
+    <message name="IDS_SETTINGS_INTERNET_CONFIG" desc="Title for the network configuration dialog.">
       Configure network
     </message>
+    <message name="IDS_SETTINGS_INTERNET_CONFIG_NAME" desc="Title for the network configuration dialog for an existing network.">
+      Configure <ph name="NAME">$1<ex>My WiFi network</ex></ph>
+    </message>
+    <message name="IDS_SETTINGS_INTERNET_JOIN_TYPE" desc="Title for the network configuration dialog for a new network.">
+      Join <ph name="TYPE">$1<ex>WiFi</ex></ph> network
+    </message>
     <message name="IDS_SETTINGS_INTERNET_DETAIL" desc="Name of the settings page which displays network details.">
       Network Details
     </message>

chrome/browser/resources/chromeos/internet_config_dialog.html

@@ -28,16 +28,14 @@
   <template>
     <style include="network-shared iron-flex">
       .button-strip {
+        border-top: var(--cr-separator-line);
         justify-content: flex-end;
       }
 
       .section {
         @apply(--cr-section);
-        margin-bottom: 10px;
-      }
-
-      .section.first {
         border-top: none;
+        margin-bottom: 10px;
       }
 
       .section.single-column {
@@ -56,15 +54,18 @@
         font-size: 107.69%;  /* 14px / 13px */
         font-weight: 500;
       }
+
+      network-config {
+        /* Give the network-config section some extra padding for the dialog. */
+        -webkit-padding-start: 20px;
+      }
     </style>
 
     <!-- Title section: Icon + name. -->
-    <div class="section first">
-      <div class="start layout horizontal center">
+    <div class="section layout horizontal center">
       <cr-network-icon network-state="[[networkProperties_]]" is-list-item>
       </cr-network-icon>
-        <div class="title">[[getTitle_(networkProperties_.*)]]</div>
-      </div>
+      <div class="title">[[getDialogTitle_(networkProperties_)]]</div>
     </div>
 
     <div class="section single-column">

chrome/browser/resources/chromeos/internet_config_dialog.js

@@ -84,9 +84,9 @@ Polymer({
    * @return {string}
    * @private
    */
-  getTitle_: function() {
-    return this.networkProperties_.Name ||
-        this.i18n('OncType' + this.networkProperties_.Type);
+  getDialogTitle_: function() {
+    var type = this.i18n('OncType' + this.networkProperties_.Type);
+    return this.i18n('internetJoinType', type);
   },
 
   /** @private */

chrome/browser/resources/settings/internet_page/internet_config.html

@@ -9,25 +9,24 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="internet_shared_css.html">
 
-<dom-module id="internet-config-dialog">
+<dom-module id="internet-config">
   <template>
     <style include="internet-shared iron-flex">
+      dialog {
+        width: 460px;
+      }
     </style>
 
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
-      <div slot="title">$i18n{internetConfigTitle}</div>
-
-      <div slot="body">
-        <!-- Icon + name. -->
-        <div class="settings-box first">
-          <div class="start layout horizontal center">
-            <cr-network-icon network-state="[[networkProperties_]]"
-                is-list-item>
+      <div slot="title">
+        <div class="layout horizontal center">
+          <cr-network-icon network-state="[[networkProperties_]]" is-list-item>
           </cr-network-icon>
-            <div class="title">[[getTitle_(networkProperties_.*)]]</div>
+          <div class="title">[[getDialogTitle_(networkProperties_)]]</div>
         </div>
       </div>
-        <div class="settings-box">
+      <div slot="body">
+        <div class="settings-box first">
           <network-config id="networkConfig" class="flex"
               networking-private="[[networkingPrivate]]"
               network-properties="{{networkProperties_}}"

chrome/browser/resources/settings/internet_page/internet_config.js

@@ -4,10 +4,10 @@
 
 /**
  * @fileoverview
- * 'internet-config-dialog' is a Settings dialog wrapper for network-config.
+ * 'internet-config' is a Settings dialog wrapper for network-config.
  */
 Polymer({
-  is: 'internet-config-dialog',
+  is: 'internet-config',
 
   behaviors: [I18nBehavior],
 
@@ -94,9 +94,12 @@ Polymer({
    * @return {string}
    * @private
    */
-  getTitle_: function() {
-    return this.networkProperties_.Name ||
-        this.i18n('OncType' + this.networkProperties_.Type);
+  getDialogTitle_: function() {
+    var name = this.networkProperties_.Name;
+    if (name)
+      return this.i18n('internetConfigName', name);
+    var type = this.i18n('OncType' + this.networkProperties_.Type);
+    return this.i18n('internetJoinType', type);
   },
 
   /**

chrome/browser/resources/settings/internet_page/internet_page.html

@@ -120,9 +120,9 @@
 
     </settings-animated-pages>
 
-    <internet-config-dialog id="configDialog"
+    <internet-config id="configDialog"
         networking-private="[[networkingPrivate]]">
-    </internet-config-dialog>
+    </internet-config>
 
   </template>
   <script src="internet_page.js"></script>

chrome/browser/resources/settings/internet_page/internet_page.js

@@ -234,7 +234,7 @@ Polymer({
    */
   showConfig_: function(type, guid, name) {
     var configDialog =
-        /** @type {!InternetConfigDialogElement} */ (this.$.configDialog);
+        /** @type {!InternetConfigElement} */ (this.$.configDialog);
     configDialog.type =
         /** @type {chrome.networkingPrivate.NetworkType} */ (type);
     configDialog.guid = guid || '';

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

@@ -24,6 +24,10 @@ namespace chromeos {
 
 namespace {
 
+// Width matches the internet config dialog in Settings UI (including margins).
+constexpr int kInternetConfigDialogWidth = 500;
+constexpr int kInternetConfigDialogHeight = 480;
+
 void AddInternetStrings(content::WebUIDataSource* html_source) {
   // Add default strings first.
   chromeos::network_element::AddLocalizedStrings(html_source);
@@ -35,6 +39,7 @@ void AddInternetStrings(content::WebUIDataSource* html_source) {
     const char* name;
     int id;
   } localized_strings[] = {
+      {"internetJoinType", IDS_SETTINGS_INTERNET_JOIN_TYPE},
       {"networkButtonConnect", IDS_SETTINGS_INTERNET_BUTTON_CONNECT},
       {"cancel", IDS_CANCEL},
       {"save", IDS_SAVE},
@@ -72,6 +77,10 @@ InternetConfigDialog::InternetConfigDialog(const std::string& network_type,
 
 InternetConfigDialog::~InternetConfigDialog() {}
 
+void InternetConfigDialog::GetDialogSize(gfx::Size* size) const {
+  size->SetSize(kInternetConfigDialogWidth, kInternetConfigDialogHeight);
+}
+
 std::string InternetConfigDialog::GetDialogArgs() const {
   base::DictionaryValue args;
   args.SetKey("type", base::Value(network_type_));

chrome/browser/ui/webui/chromeos/internet_config_dialog.h

@@ -29,6 +29,7 @@ class InternetConfigDialog : public SystemWebDialogDelegate {
   ~InternetConfigDialog() override;
 
   // ui::WebDialogDelegate
+  void GetDialogSize(gfx::Size* size) const override;
   std::string GetDialogArgs() const override;
 
  private:

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -898,10 +898,11 @@ void AddInternetStrings(content::WebUIDataSource* html_source) {
       {"internetAddThirdPartyVPN", IDS_SETTINGS_INTERNET_ADD_THIRD_PARTY_VPN},
       {"internetAddVPN", IDS_SETTINGS_INTERNET_ADD_VPN},
       {"internetAddWiFi", IDS_SETTINGS_INTERNET_ADD_WIFI},
-      {"internetConfigTitle", IDS_SETTINGS_INTERNET_CONFIG},
+      {"internetConfigName", IDS_SETTINGS_INTERNET_CONFIG_NAME},
       {"internetDetailPageTitle", IDS_SETTINGS_INTERNET_DETAIL},
       {"internetDeviceEnabling", IDS_SETTINGS_INTERNET_DEVICE_ENABLING},
       {"internetDeviceInitializing", IDS_SETTINGS_INTERNET_DEVICE_INITIALIZING},
+      {"internetJoinType", IDS_SETTINGS_INTERNET_JOIN_TYPE},
       {"internetKnownNetworksPageTitle", IDS_SETTINGS_INTERNET_KNOWN_NETWORKS},
       {"internetMobileSearching", IDS_SETTINGS_INTERNET_MOBILE_SEARCH},
       {"internetNoNetworks", IDS_SETTINGS_INTERNET_NO_NETWORKS},

ui/webui/resources/cr_components/chromeos/network/network_config.html

@@ -10,9 +10,10 @@
 <dom-module id="network-config">
   <template>
     <style include="network-shared">
-      paper-toggle-button {
-        -webkit-margin-end: calc(
-          var(--network-control-margin) - var(--cr-icon-ripple-padding));
+      .property-box {
+        /* Align the toggle controls with the show/hide password icon. */
+        width: calc(var(--network-control-width) +
+            var(--network-control-margin) + 4px);
       }
 
       #error {
@@ -21,18 +22,6 @@
       }
     </style>
 
-    <!-- Share (WiFi and WiMAX) -->
-    <template is="dom-if" if="[[shareIsVisible_(type)]]">
-      <div class="property-box hr">
-        <div id="shareLabel" class="start">[[i18n('networkConfigShare')]]</div>
-        <paper-toggle-button id="share" checked="{{shareNetwork_}}"
-            disabled="[[!shareIsEnabled_(guid, configProperties_.*,
-                security_, eapProperties_.*, shareAllowEnable)]]"
-            aria-label="[[i18n('networkConfigShare')]]">
-        </paper-toggle-button>
-      </div>
-    </template>
-
     <!-- SSID (WiFi) -->
     <template is="dom-if" if="[[isType_(NetworkType_.WI_FI, type)]]">
       <network-config-input id="ssid" label="[[i18n('OncWiFi-SSID')]]"
@@ -108,7 +97,7 @@
             cert-list>
         </network-config-select>
       </template>
-      <div class="property-box hr">
+      <div class="property-box">
         <div id="vpnSaveCredentialsLabel" class="start">
           [[i18n('networkConfigSaveCredentials')]]
         </div>
@@ -152,7 +141,7 @@
           value="{{eapProperties_.AnonymousIdentity}}"
           hidden="[[!showEap_.AnonymousIdentity]]">
       </network-config-input>
-      <div class="property-box hr">
+      <div class="property-box">
         <div id="eapSaveCredentialsLabel" class="start">
           [[i18n('networkConfigSaveCredentials')]]
         </div>
@@ -162,6 +151,18 @@
       </div>
     </template>
 
+    <!-- Share (WiFi and WiMAX) -->
+    <template is="dom-if" if="[[shareIsVisible_(type)]]">
+      <div class="property-box">
+        <div id="shareLabel" class="start">[[i18n('networkConfigShare')]]</div>
+        <paper-toggle-button id="share" checked="{{shareNetwork_}}"
+            disabled="[[!shareIsEnabled_(guid, configProperties_.*,
+                      security_, eapProperties_.*, shareAllowEnable)]]"
+            aria-label="[[i18n('networkConfigShare')]]">
+        </paper-toggle-button>
+      </div>
+    </template>
+
     <template is="dom-if" if="[[error_]]">
       <div class="property-box">
         <div id="error" class="start">

ui/webui/resources/cr_components/chromeos/network/network_config_input.html

@@ -10,6 +10,9 @@
   <template>
     <style include="network-shared">
       paper-input-container {
+        --paper-input-container-color: var(--secondary-text-color);
+        --paper-input-container-focus-color: var(--secondary-text-color);
+        --paper-input-container-input-color: var(--primary-text-color);
         -webkit-margin-end: var(--network-control-margin);
       }
 
@@ -19,9 +22,9 @@
       }
     </style>
 
-    <div class="property-box hr">
-      <div id="label" class="start">[[label]]</div>
-      <paper-input-container no-label-float>
+    <div class="property-box two-line">
+      <paper-input-container always-float-label>
+        <label id="label">[[label]]</label>
         <input is="iron-input" value="{{value::change}}"
             disabled="[[disabled]]" aria-label$="[[label]]"
             type="[[getInputType_(password, showPassword)]]">

ui/webui/resources/cr_components/chromeos/network/network_config_select.html

@@ -5,14 +5,22 @@
 <dom-module id="network-config-select">
   <template>
     <style include="network-shared md-select">
+      #label {
+        color: var(--secondary-text-color);
+      }
+
       .md-select {
-        -webkit-margin-end: calc(
-            var(--network-control-margin) - var(--cr-icon-ripple-padding) * 2);
+        color: var(--primary-text-color);
+      }
+
+      .md-select-wrapper {
+        -webkit-margin-start: calc(var(--md-select-side-padding) * -1);
       }
     </style>
 
-    <div class="property-box hr">
-      <div id="label" class="start">[[label]]</div>
+    <div class="property-box two-line single-column">
+      <div id="label">[[label]]</div>
+      <div class="md-select-wrapper">
         <select class="md-select" disabled="[[disabled]]"
             value="{{value::change}}" aria-label$="[[label]]">
           <template is="dom-repeat" items="[[items]]">
@@ -22,6 +30,8 @@
             </option>
           </template>
         </select>
+        <span class="md-select-underline"></span>
+      </div>
     </div>
 
   </template>

ui/webui/resources/cr_components/chromeos/network/network_shared_css.html

@@ -7,7 +7,7 @@
   <template>
     <style include="cr-shared-style md-select">
       :root {
-        --network-control-width: 250px;
+        --network-control-width: 350px;
         /* Margin for the show/hide password icon */
         --network-control-margin: 40px;
       }
@@ -62,10 +62,10 @@
 
       paper-input-container {
         --paper-input-container-input: {
-          color: var(--paper-grey-600);
           font-size: inherit;
           font-weight: 400;
         };
+        --paper-input-container-input-color: var(--secondary-text-color);
         margin-bottom: 0;
         margin-top: -9px;
         width: var(--network-control-width);