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..0b13a1ca7a897b35a8e4cd54dc0c228cb5024a3b
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/important_site_checkbox.html
@@ -0,0 +1,58 @@
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
+<link rel="import" href="chrome://resources/html/polymer.html">
+<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);
+      }
+
+      .favicon-image {
+        display: inline-block;
+        margin: 4px 14px 4px 0;
+      }
+
+      .important-site-label {
+        display: inline-block;
+      }
+
+      .has-notifications {
+        color: red;
+      }
+
+    </style>
+    <div id="outerRow">
+      <paper-checkbox id="checkbox" checked="{{site.isChecked}}"
+          disabled="[[disabled]]">
+        <div class="favicon-image" style$="[[siteIcon_(site.exampleOrigin)]];">
+        </div>
+        <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>
+              <span class="has-notifications">$i18n{notificationWarning}</span>
+            </template>
+          </div>
+        </div>
+      </paper-checkbox>

[dschuyler, 2017/03/20 19:22:38]

Much of important_site_checkbox.* appears to be a paste of settings_checkbox.
Would it make sense to add a <content select...> to settings_checkbox? I'm
concerned about adding a one-off specialization.

[dullweber, 2017/03/22 15:34:23]

I initially looked at settings_checkbox but then created this control because
settings_checkbox is backed by a preference while important sites are not. You
are right that there is some duplication because both checkboxes should look
about the same but the data behind them is different. Do you have a good idea
how this could be improved? Extracting the html to a common base class seems
also not like a good solution because both paper-checkbox and the
cr-policy-pref-indicator access the pref. The biggest common part is the
stylesheet that could be reused for both.

[dschuyler, 2017/03/23 01:35:52]

Hmm, does that mean that the user will need to adjust these checkboxes each time
they reach this dialog (rather than saving the state like the CBD UI does)? Is
it reasonable to save the values?

Is there any plans to enforce (like by policy) the choices here?

If we want to save the selections or allow for policy enforcement then it will
be getting closer to a settings checkbox. (For the record, I'm not trying to go
in that direction for the sake of using settings checkbox; instead I'm making a
prediction that those will be desired and we'll end up there in the near
future).

+    </div>
+  </template>
+  <script src="important_site_checkbox.js"></script>
+</dom-module>