Implement important sites dialog for desktop.

chrome/browser/resources/settings/controls/important_site_checkbox.html

Index: chrome/browser/resources/settings/controls/important_site_checkbox.html
diff --git a/chrome/browser/resources/settings/controls/important_site_checkbox.html b/chrome/browser/resources/settings/controls/important_site_checkbox.html
new file mode 100644
index 0000000000000000000000000000000000000000..b9f3e924749892ff78f3a5f1d40d772b93fef0e3
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/important_site_checkbox.html
@@ -0,0 +1,46 @@
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
+<link rel="import" href="chrome://resources/html/polymer.html">

[dschuyler, 2017/04/27 23:10:25]

I've learned that polymer.html should be imported first (which is an exception
to the sorted imports rule).

[dullweber, 2017/04/28 12:34:03]

fixed, thanks!

+<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="settings_boolean_control_behavior.html">
+<link rel="import" href="../settings_shared_css.html">
+
+<dom-module id="important-site-checkbox">
+  <template>
+    <style include="settings-shared">
+      #outerRow {
+        align-items: center;
+        display: flex;
+        min-height: var(--settings-row-two-line-min-height);
+        width: 100%;
+      }
+
+      paper-checkbox {
+        width: 100%;
+      }
+
+      paper-checkbox:not([checked]) .secondary {
+        @apply(--settings-secondary-unchecked);
+      }
+
+      .important-site-label {
+        display: inline-block;
+      }
+    </style>
+    <div id="outerRow">
+      <paper-checkbox id="checkbox" checked="{{site.isChecked}}"
+          disabled="[[disabled]]">
+        <div class="important-site-label">
+          <div>[[site.registerableDomain]]</div>
+          <div class="secondary">
+            <span class="storage-size">[[site.storageSize]]</span>
+            <template is="dom-if" if="[[site.hasNotifications]]">
+              <span>&nbsp;&middot;&nbsp;</span>

[dschuyler, 2017/04/27 23:10:25]

nit: If the   can be avoided, please remove them. (Maybe with nowrap or
similar) (I'm flexible on this, it would be nice to avoid the  )

[dullweber, 2017/04/28 12:34:03]

I replaced the spaces with padding.

+              <span class="has-notifications">$i18n{notificationWarning}</span>
+            </template>
+          </div>
+        </div>
+      </paper-checkbox>
+    </div>
+  </template>
+  <script src="important_site_checkbox.js"></script>
+</dom-module>