[CrOS Tether] Add a connection dialog to md-settings.

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

+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/device-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="tether-connection-dialog">
+  <template>
+    <style include="settings-shared">
+      .body {
+        @apply(--layout-vertical);

[Dan Beam, 2017/03/17 21:51:39]

why are you using this rather than just raw CSS?

[Kyle Horimoto, 2017/03/17 22:06:39]

Done.

+      }
+
+      #host-device-container {
+        @apply(--layout-horizontal);
+      }
+
+      iron-icon {
+       --iron-icon-fill-color: var(--google-blue-500);
+      }
+
+      #host-device-text-container {
+        @apply(--layout-vertical);

[Dan Beam, 2017/03/17 21:51:39]

why not combine with .body?

[Kyle Horimoto, 2017/03/17 22:06:39]

Done.

+      }
+
+      #tether-explanation,
+      #tether-carrier-warning,
+      #tether-description-title {
+        margin-top: var(--settings-page-vertical-margin);
+      }
+    </style>
+    <dialog is="cr-dialog" id="dialog" on-cancel="onDialogCanceled_"
+        close-text="$i18n{close}" on-closed="onDialogCanceled_">
+      <div class="title">$i18n{tetherConnectionDialogTitle}</div>
+      <div class="body">
+        <div id="host-device-container">
+          <iron-icon icon="[[getReceptionIcon_(tetherData_)]]"></iron-icon>
+          <div id="host-device-text-container">
+            <span id="host-device-text-name">
+              [[tetherData_.tetherNostDeviceName]]
+            </span>
+            <span id="host-device-text-battery" class="secondary">
+              [[i18n('tetherConnectionBatteryPercentage',
+                     tetherData_.batteryPercentage)]]
+            </span>
+          </div>
+        </div>
+        <div id="tether-explanation">
+          [[i18n('tetherConnectionExplanation', tetherData_.batteryPercentage)]]
+        </div>
+        <div id="tether-carrier-warning">
+          $i18n{tetherConnectionCarrierWarning}
+        </div>
+        <div id="tether-description-title">
+          [[i18n('tetherConnectionDescriptionTitle',
+                   tetherData_.tetherNostDeviceName)]]
+        </div>
+        <ul>
+          <li>$i18n{tetherConnectionDescriptionCellData}</li>
+          <li>
+            [[i18n('tetherConnectionDescriptionBattery',
+                   tetherData_.batteryPercentage)]]
+          </li>
+          <template is="dom-if" if="[[tetherData_.isTetherHostCurrentlyOnWifi">
+            <li>$i18n{tetherConnectionDescriptionWiFi}</li>

[Dan Beam, 2017/03/17 21:51:38]

nit: for simple stuff, just bind to
hidden="[[tetherData_.isTetherHostCurrentlyOnWifi]]" instead of dom-if

[Kyle Horimoto, 2017/03/17 22:06:39]

Done.

+          </template>
+        </ul>
+      </div>
+      <div class="button-container">
+        <paper-button class="secondary-button" on-tap="onNotNowTap_">
+          $i18n{tetherConnectionNotNowButton}
+        </paper-button>
+        <paper-button class="primary-button" on-tap="close">
+          $i18n{tetherConnectionConnectButton}
+        </paper-button>
+      </div>
+    </dialog>
+  </template>
+  <script src="tether_connection_dialog.js"></script>
+</dom-module>