Network config: Show error messages in button container

This CL:
* Moves the 'error' message display to the host dialogs so that it
  can be displayed in the button container which is always shown at
  the bottom of the dialog.
* Eliminates the 'Connecting' message which is no longer necessary
  since we now close the dialogs as soon as the asynchronous
  connection attempt starts.

TBR=stevenjb@chromium.org

(cherry picked from commit 0f54d8999aa322ffb5b58b103c1b24ea1529fecf)

Bug: 812477
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I5fa17ed3b568f689bd76c71b9a921010a81bf56e
Reviewed-on: https://chromium-review.googlesource.com/922795
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Kevin Cernekee <cernekee@chromium.org>
Reviewed-by: Toni Barzic <tbarzic@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#538341}
Reviewed-on: https://chromium-review.googlesource.com/940430
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/branch-heads/3325@{#613}
Cr-Branched-From: bc084a8b5afa3744a74927344e304c02ae54189f-refs/heads/master@{#530369}
diff --git a/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.html b/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.html
index e8fe923..8c7d6c1 100644
--- a/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.html
+++ b/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.html
@@ -38,6 +38,11 @@
              to ensure the content is stretched to fit. */
           height: 480px;
         }
+
+        .error {
+          color: red;
+          font-weight: 500;
+        }
       </style>
 
       <dialog is="cr-dialog" id="dialog" no-cancel>
@@ -50,11 +55,15 @@
               enable-connect="{{enableConnect_}}" connect-on-save
               share-allow-enable="[[shareAllowEnable_]]"
               share-default="[[shareDefault_]]"
+              error="{{error_}}"
               on-close="close_">
           </network-config>
         </div>
 
-        <div slot="button-container">
+        <div class="layout horizontal center" slot="button-container">
+          <template is="dom-if" if="[[error_]]" restamp>
+            <div class="flex error">[[getError_(error_)]]</div>
+          </template>
           <paper-button class="cancel-button" on-tap="onCancelTap_">
             $i18n{cancel}
           </paper-button>
diff --git a/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.js b/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.js
index c3f8a7a..847f8af 100644
--- a/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.js
+++ b/chrome/browser/resources/chromeos/internet_config_dialog/internet_config_dialog.js
@@ -58,6 +58,15 @@
      * @type {!chrome.networkingPrivate.NetworkProperties}
      */
     networkProperties_: Object,
+
+    /**
+     * Set by network-config when a configuration error occurs.
+     * @private
+     */
+    error_: {
+      type: String,
+      value: '',
+    },
   },
 
   /** @override */
@@ -105,6 +114,16 @@
     return this.i18n('internetJoinType', type);
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  getError_: function() {
+    if (this.i18nExists(this.error_))
+      return this.i18n(this.error_);
+    return this.i18n('networkErrorUnknown');
+  },
+
   /** @private */
   onCancelTap_: function() {
     this.close_();
diff --git a/chrome/browser/resources/settings/internet_page/internet_config.html b/chrome/browser/resources/settings/internet_page/internet_config.html
index 22a7b87..4fa0a79 100644
--- a/chrome/browser/resources/settings/internet_page/internet_config.html
+++ b/chrome/browser/resources/settings/internet_page/internet_config.html
@@ -14,6 +14,11 @@
       dialog {
         width: 460px;
       }
+
+      .error {
+        color: red;
+        font-weight: 500;
+      }
     </style>
 
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
@@ -26,11 +31,15 @@
             enable-connect="{{enableConnect_}}" enable-save="{{enableSave_}}"
             share-allow-enable="[[shareAllowEnable_]]"
             share-default="[[shareDefault_]]"
+            error="{{error_}}"
             on-close="close">
         </network-config>
       </div>
 
-      <div slot="button-container">
+      <div class="layout horizontal center" slot="button-container">
+        <template is="dom-if" if="[[error_]]" restamp>
+          <div class="flex error">[[getError_(error_)]]</div>
+        </template>
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancel}
         </paper-button>
diff --git a/chrome/browser/resources/settings/internet_page/internet_config.js b/chrome/browser/resources/settings/internet_page/internet_config.js
index a4764b49..b6bda81 100644
--- a/chrome/browser/resources/settings/internet_page/internet_config.js
+++ b/chrome/browser/resources/settings/internet_page/internet_config.js
@@ -69,6 +69,15 @@
      * @private {!chrome.networkingPrivate.NetworkProperties}
      */
     networkProperties_: Object,
+
+    /**
+     * Set by network-config when a configuration error occurs.
+     * @private
+     */
+    error_: {
+      type: String,
+      value: '',
+    },
   },
 
   open: function() {
@@ -106,6 +115,16 @@
   },
 
   /**
+   * @return {string}
+   * @private
+   */
+  getError_: function() {
+    if (this.i18nExists(this.error_))
+      return this.i18n(this.error_);
+    return this.i18n('networkErrorUnknown');
+  },
+
+  /**
    * @return {boolean}
    * @private
    */
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_config.html b/ui/webui/resources/cr_components/chromeos/network/network_config.html
index 5902a64..a2ba57be 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_config.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_config.html
@@ -1,6 +1,5 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
@@ -13,14 +12,6 @@
 <dom-module id="network-config">
   <template>
     <style include="network-shared iron-flex">
-      #error {
-        color: red;
-        font-weight: 500;
-      }
-
-      cr-network-icon {
-        -webkit-margin-end: 10px;
-      }
     </style>
 
     <!-- SSID (WiFi) -->
@@ -167,26 +158,6 @@
       </div>
     </template>
 
-    <template is="dom-if"
-        if="[[connectingIsVisible_(propertiesSent_, error_)]]">
-      <div class="property-box">
-        <div class="start layout horizontal center">
-          <cr-network-icon is-list-item
-              network-state="[[getIconState_(configProperties_)]]">
-          </cr-network-icon>
-          <div>[[i18n('OncConnecting')]]</div>
-        </div>
-      </div>
-    </template>
-
-    <template is="dom-if" if="[[error_]]">
-      <div class="property-box">
-        <div id="error" class="start">
-          [[getError_(error_)]]
-        </div>
-      </div>
-    </template>
-
   </template>
   <script src="network_config.js"></script>
 </dom-module>
diff --git a/ui/webui/resources/cr_components/chromeos/network/network_config.js b/ui/webui/resources/cr_components/chromeos/network/network_config.js
index 2e310e1..6b07c82 100644
--- a/ui/webui/resources/cr_components/chromeos/network/network_config.js
+++ b/ui/webui/resources/cr_components/chromeos/network/network_config.js
@@ -86,6 +86,12 @@
       notify: true,
     },
 
+    /** Set to any error from the last configuration result. */
+    error: {
+      type: String,
+      notify: true,
+    },
+
     /** Set if |guid| is not empty once networkProperties are received. */
     propertiesReceived_: Boolean,
 
@@ -219,9 +225,6 @@
       value: null,
     },
 
-    /** @private */
-    error_: String,
-
     /**
      * Object providing network type values for data binding. Note: Currently
      * we only support WiFi, but support for other types will be following
@@ -361,7 +364,7 @@
     if (this.propertiesSent_)
       return;
     this.propertiesSent_ = true;
-    this.error_ = '';
+    this.error = '';
 
     var propertiesToSet = this.getPropertiesToSet_();
     if (this.getSource_() == CrOnc.Source.NONE) {
@@ -902,7 +905,7 @@
   /** @private */
   updateCertError_: function() {
     /** @const */ var certError = 'networkErrorNoUserCertificate';
-    if (this.error_ && this.error_ != certError)
+    if (this.error && this.error != certError)
       return;
 
     var requireCerts = (this.showEap_ && this.showEap_.UserCert) ||
@@ -1038,14 +1041,6 @@
    * @return {boolean}
    * @private
    */
-  connectingIsVisible_: function() {
-    return this.propertiesSent_ && !this.error_;
-  },
-
-  /**
-   * @return {boolean}
-   * @private
-   */
   shareIsEnabled_: function() {
     if (!this.shareAllowEnable || this.getSource_() != CrOnc.Source.NONE)
       return false;
@@ -1211,8 +1206,8 @@
   /** @private */
   setPropertiesCallback_: function() {
     this.setError_(this.getRuntimeError_());
-    if (this.error_) {
-      console.error('setProperties error: ' + this.guid + ': ' + this.error_);
+    if (this.error) {
+      console.error('setProperties error: ' + this.guid + ': ' + this.error);
       this.propertiesSent_ = false;
       return;
     }
@@ -1232,10 +1227,10 @@
    */
   createNetworkCallback_: function(guid) {
     this.setError_(this.getRuntimeError_());
-    if (this.error_) {
+    if (this.error) {
       console.error(
           'createNetworkError, type: ' + this.networkProperties.Type + ': ' +
-          'error: ' + this.error_);
+          'error: ' + this.error);
       this.propertiesSent_ = false;
       return;
     }
@@ -1287,38 +1282,11 @@
   },
 
   /**
-   * @param {!chrome.networkingPrivate.NetworkConfigProperties} properties
-   * @return {!CrOnc.NetworkStateProperties}
-   * @private
-   */
-  getIconState_: function(properties) {
-    return {
-      ConnectionState: CrOnc.ConnectionState.CONNECTING,
-      GUID: properties.GUID || '',
-      Type: this.type,
-    };
-  },
-
-  /**
    * @param {string|undefined} error
    * @private
    */
   setError_: function(error) {
-    if (!error) {
-      this.error_ = '';
-      return;
-    }
-    this.error_ = error;
+    this.error = error || '';
   },
-
-  /**
-   * @return {string}
-   * @private
-   */
-  getError_: function() {
-    if (this.i18nExists(this.error_))
-      return this.i18n(this.error_);
-    return this.i18n('networkErrorUnknown');
-  }
 });
 })();