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

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

Index: chrome/browser/resources/settings/internet_page/tether_connection_dialog.html
diff --git a/chrome/browser/resources/settings/internet_page/tether_connection_dialog.html b/chrome/browser/resources/settings/internet_page/tether_connection_dialog.html
new file mode 100644
index 0000000000000000000000000000000000000000..b42d5012dd3457010a58b27cebdf1c6c56261b6e
--- /dev/null
+++ b/chrome/browser/resources/settings/internet_page/tether_connection_dialog.html
@@ -0,0 +1,80 @@
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/html/polymer.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">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="tether-connection-dialog">
+  <template>
+    <style include="settings-shared">
+      .body,
+      #host-device-text-container {
+        display: flex;
+        flex-direction: column;
+      }
+
+      #host-device-container {
+        align-items: center;
+        display: flex;
+      }
+
+      iron-icon {
+        --iron-icon-fill-color: var(--google-blue-500);
+      }
+
+      #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>
+          <li hidden$="[[!tetherData_.isTetherHostCurrentlyOnWifi]]">
+            $i18n{tetherConnectionDescriptionWiFi}
+          </li>
+        </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>