[CrOS Tether] When a network has become lost, display a warning.

This remedies the following situation:
  (1) Host scan discovers a potential Tether host device.
  (2) User visits the "internet detail page", which displays information
      about that Tether host.
  (2b - optional) User opens the tether confirmation dialog.
  (3) A subsequent host scan can no longer find the device.
  (4) User can no longer connect to the device, but has no idea why.

This CL places a warning in red text on both the internet detail page
and the tether confirmation dialog when this situation occurs. Likewise,
this CL also adds a warning in the detail page for Wi-Fi networks which
have gone out of range.

Bug: 750955, 672263
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I75666e25a0df0add94ea469599641b0703b64d76
Reviewed-on: https://chromium-review.googlesource.com/818465
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#523496}

chrome/app/settings_strings.grdp

@@ -1632,6 +1632,12 @@
     <message name="IDS_SETTINGS_INTERNET_NO_NETWORKS" desc="Entry when there are no preferred networks or no networks of a particular type.">
       None
     </message>
+    <message name="IDS_SETTINGS_INTERNET_WIFI_NETWORK_OUT_OF_RANGE" desc="Text shown when viewing the Wi-Fi network detail page when the currently-viewed Wi-Fi network has been lost (e.g., has gone out of range).">
+      Network out of range
+    </message>
+    <message name="IDS_SETTINGS_INTERNET_TETHER_PHONE_OUT_OF_RANGE" desc="Text shown when viewing the Tether network detail page when the currently-viewed Tether network has been lost (e.g., has gone out of range). Because Tether networks are provided by Android phones, we use the word 'phone' here instead of 'network'.">
+      Unable to detect your phone
+    </message>
     <message name="IDS_SETTINGS_INTERNET_NO_NETWORKS_MOBILE_DATA" desc="Text shown when viewing the Mobile data page when there are no cellular or tether networks available.">
       No mobile connection found. Turn on Instant Tethering on your other devices and try again. &lt;a target="_blank" href="<ph name="URL">$1<ex>https://google.com/</ex></ph>"&gt;Learn more&lt;/a&gt;
     </message>

chrome/browser/resources/settings/icons.html

@@ -102,6 +102,7 @@ List icons here rather than importing large sets of (e.g. Polymer) icons.
       <g id="rotate-right"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"></path></g>
       <g id="security"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path></g>
 <if expr="chromeos">
+      <g id="alert-device-out-of-range" fill="none" fill-rule="evenodd"><path d="M-1-1h20v20H-1z"></path><path fill="#C53929" fill-rule="nonzero" d="M8.167 11.5h1.666v1.667H8.167V11.5zm0-6.667h1.666v5H8.167v-5zM8.992.667C4.392.667.667 4.4.667 9s3.725 8.333 8.325 8.333c4.608 0 8.341-3.733 8.341-8.333S13.6.667 8.992.667zm.008 15A6.665 6.665 0 0 1 2.333 9 6.665 6.665 0 0 1 9 2.333 6.665 6.665 0 0 1 15.667 9 6.665 6.665 0 0 1 9 15.667z"></path></g>
       <g id="signal-cellular-0-bar"><path fill-opacity=".3" d="M2 22h20V2z"></path></g>
       <g id="signal-cellular-1-bar"><path fill-opacity=".3" d="M2 22h20V2z"></path><path d="M12 12L2 22h10z"></path></g>
       <g id="signal-cellular-2-bar"><path fill-opacity=".3" d="M2 22h20V2z"></path><path d="M14 10L2 22h12z"></path></g>

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

@@ -57,6 +57,10 @@
       #networkState[connected] {
         color: var(--google-green-500);
       }
+
+      #networkState[error] {
+        color: var(--google-red-500);
+      }
     </style>
     <!-- Title section: Icon + name + connection state. -->
     <div id="titleDiv" class="settings-box first">
@@ -64,8 +68,9 @@
         <cr-network-icon network-state="[[networkProperties]]">
         </cr-network-icon>
         <div id="networkState" class="title"
-            connected$="[[isConnectedState_(networkProperties)]]">
-          [[getStateText_(networkProperties)]]
+            connected$="[[isConnectedState_(networkProperties)]]"
+            error$="[[outOfRange_]]">
+          [[getStateText_(networkProperties, outOfRange_)]]
         </div>
         <template is="dom-if"
             if="[[isPolicySource(networkProperties.Source))]]">
@@ -96,7 +101,7 @@
       <paper-button class="primary-button" on-tap="onConnectTap_"
           hidden$="[[!showConnect_(networkProperties, globalPolicy)]]"
           disabled="[[!enableConnect_(networkProperties, defaultNetwork,
-              globalPolicy)]]">
+              globalPolicy, networkPropertiesReceived_, outOfRange_)]]">
         $i18n{networkButtonConnect}
       </paper-button>
       <paper-button class="primary-button" on-tap="onDisconnectTap_"
@@ -285,7 +290,8 @@
 
     <tether-connection-dialog id="tetherDialog"
         network-properties="[[networkProperties]]"
-        on-tether-connect="onTetherConnect_">
+        on-tether-connect="onTetherConnect_"
+        out-of-range="[[outOfRange_]]">
     </tether-connection-dialog>
   </template>
   <script src="internet_detail_page.js"></script>

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

@@ -63,6 +63,18 @@ Polymer({
       readOnly: true,
     },
 
+    /**
+     * Whether the network has been lost (e.g., has gone out of range). A
+     * network is considered to be lost when a 'network-list-changed' event
+     * occurs, and the new network list does not contain the GUID of the current
+     * network.
+     * @private
+     */
+    outOfRange_: {
+      type: Boolean,
+      value: false,
+    },
+
     /**
      * Highest priority connected network or null.
      * @type {?CrOnc.NetworkStateProperties}
@@ -131,8 +143,6 @@ Polymer({
   /**
    * Set to true to once the initial properties have been received. This
    * prevents setProperties from being called when setting default properties.
-   * This will also be set to false if the network no longer exists in the
-   * list of networks (e.g. it goes out of range).
    * @private {boolean}
    */
   networkPropertiesReceived_: false,
@@ -265,7 +275,7 @@ Polymer({
    */
   checkNetworkExists_: function(event) {
     var networkIds = event.detail;
-    this.networkPropertiesReceived_ = networkIds.indexOf(this.guid) != -1;
+    this.outOfRange_ = networkIds.indexOf(this.guid) == -1;
   },
 
   /**
@@ -330,6 +340,7 @@ Polymer({
 
     this.networkProperties = properties;
     this.networkPropertiesReceived_ = true;
+    this.outOfRange_ = false;
   },
 
   /**
@@ -351,6 +362,7 @@ Polymer({
       ConnectionState: state.ConnectionState,
     };
     this.networkPropertiesReceived_ = true;
+    this.outOfRange_ = false;
   },
 
   /**
@@ -384,12 +396,20 @@ Polymer({
 
   /**
    * @param {!CrOnc.NetworkProperties} networkProperties
+   * @param {boolean} outOfRange
    * @return {string} The text to display for the network connection state.
    * @private
    */
-  getStateText_: function(networkProperties) {
+  getStateText_: function(networkProperties, outOfRange) {
     if (!networkProperties.ConnectionState)
       return '';
+
+    if (outOfRange) {
+      return networkProperties.Type == CrOnc.Type.TETHER ?
+          this.i18n('tetherPhoneOutOfRange') :
+          this.i18n('networkOutOfRange');
+    }
+
     return this.i18n('Onc' + networkProperties.ConnectionState);
   },
 
@@ -564,13 +584,17 @@ Polymer({
    * @param {!CrOnc.NetworkProperties} networkProperties
    * @param {?CrOnc.NetworkStateProperties} defaultNetwork
    * @param {!chrome.networkingPrivate.GlobalPolicy} globalPolicy
+   * @param {boolean} networkPropertiesReceived
+   * @param {boolean} outOfRange
    * @return {boolean} Whether or not to enable the network connect button.
    * @private
    */
-  enableConnect_: function(networkProperties, defaultNetwork, globalPolicy) {
+  enableConnect_: function(
+      networkProperties, defaultNetwork, globalPolicy,
+      networkPropertiesReceived, outOfRange) {
     if (!this.showConnect_(networkProperties, globalPolicy))
       return false;
-    if (!this.networkPropertiesReceived_)
+    if (!networkPropertiesReceived || outOfRange)
       return false;
     if ((networkProperties.Type == CrOnc.Type.CELLULAR) &&
         (CrOnc.isSimLocked(networkProperties) ||

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

@@ -2,6 +2,7 @@
 <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/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="../icons.html">
@@ -10,7 +11,7 @@
 
 <dom-module id="tether-connection-dialog">
   <template>
-    <style include="settings-shared">
+    <style include="settings-shared iron-flex">
       [slot=title] {
         margin-top: 9px;
       }
@@ -59,6 +60,11 @@
       #tether-description-list {
         padding-left: 16px;
       }
+
+      #host-device-lost-container {
+        color: var(--google-red-500);
+        font-weight: 500;
+      }
     </style>
     <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
       <div slot="title">$i18n{tetherConnectionDialogTitle}</div>
@@ -78,6 +84,11 @@
               [[getBatteryPercentageString_(networkProperties)]]
             </span>
           </div>
+          <div class="flex"></div>
+          <div id="host-device-lost-container" hidden$="[[!outOfRange]]">
+            <iron-icon icon="settings:alert-device-out-of-range"></iron-icon>
+            $i18n{tetherPhoneOutOfRange}
+          </div>
         </div>
         <div id="tether-explanation">
           [[getExplanation_(networkProperties)]]
@@ -100,8 +111,8 @@
         <paper-button class="cancel-button" on-tap="onNotNowTap_">
           $i18n{tetherConnectionNotNowButton}
         </paper-button>
-        <paper-button id="connectButton"
-            class="action-button" on-tap="onConnectTap_">
+        <paper-button id="connectButton" class="action-button"
+            on-tap="onConnectTap_" disabled="[[outOfRange]]">
           $i18n{tetherConnectionConnectButton}
         </paper-button>
       </div>

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

@@ -25,6 +25,12 @@ Polymer({
     networkProperties: {
       type: Object,
     },
+
+    /**
+     * Whether the network has been lost (e.g., has gone out of range).
+     * @type {boolean}
+     */
+    outOfRange: Boolean,
   },
 
   open: function() {

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

@@ -1044,6 +1044,9 @@ void AddInternetStrings(content::WebUIDataSource* html_source) {
        IDS_SETTINGS_INTERNET_NETWORK_SECTION_PROXY_ACCESSIBILITY_LABEL},
       {"networkShared", IDS_SETTINGS_INTERNET_NETWORK_SHARED},
       {"networkVpnBuiltin", IDS_NETWORK_TYPE_VPN_BUILTIN},
+      {"networkOutOfRange", IDS_SETTINGS_INTERNET_WIFI_NETWORK_OUT_OF_RANGE},
+      {"tetherPhoneOutOfRange",
+       IDS_SETTINGS_INTERNET_TETHER_PHONE_OUT_OF_RANGE},
       {"tetherConnectionDialogTitle",
        IDS_SETTINGS_INTERNET_TETHER_CONNECTION_DIALOG_TITLE},
       {"tetherConnectionAvailableDeviceTitle",