Implement important sites dialog for desktop.

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

Index: chrome/browser/resources/settings/controls/important_site_checkbox.js
diff --git a/chrome/browser/resources/settings/controls/important_site_checkbox.js b/chrome/browser/resources/settings/controls/important_site_checkbox.js
new file mode 100644
index 0000000000000000000000000000000000000000..cdcabad25e52e22844cb6b2fc8c6901731327d46
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/important_site_checkbox.js
@@ -0,0 +1,32 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * `important-site-checkbox` is a checkbox that displays an important site.
+ */
+Polymer({
+  is: 'important-site-checkbox',
+
+  properties: {
+    /** The ImportantSite associated with this checkbox. */

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

nit: consider removing comment.
(if the comment is kept, the /** should change to /*)

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

Done.

+    site: {
+      type: ImportantSite,
+    },

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

site: ImportantSite,

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

Do you mean that I should remove the object with the type attribute and replace
it by just "ImportantSite"? That doesn't seem to work:

[110240:110240:0428/133408.736524:ERROR:CONSOLE(1740)] "Uncaught TypeError:
Cannot read property 'observer' of undefined", source:
chrome://resources/polymer/v1_0/polymer/polymer-extracted.js (1740)
[110240:110240:0428/133408.739644:ERROR:CONSOLE(2047)] "Uncaught TypeError:
Cannot read property 'site' of undefined", source:
chrome://resources/polymer/v1_0/polymer/polymer-mini-extracted.js (2047)

[dschuyler, 2017/04/28 19:31:13]

My intention was that the three lines of code

site: {
  type: ImportantSite,
},

Could be replaced with the one line of code

site: ImportantSite,

i.e. that one is just a syntactic variation of the other. (And that three lines
of code can be reduced to one line of code that is still easy to read).

[dullweber, 2017/05/02 10:38:45]

That doesn't seem to work. I guess the problem is that |ImportantSite| is
declared as "var ImportantSite;" with some magic comments above it but its value
is "undefined". Changing it to 

/** @type {ImportantSite} */
site: Object,

works.

[dschuyler, 2017/05/02 18:19:23]

You're right. Sorry, I totally wrote the wrong thing as an example. 
You did find the exact thing I was *trying* to reference, thanks!

+
+    /** Whether this checkbox should be disabled. */

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

nit: consider removing comment - the code seems clear enough.

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

I removed all comments. I thought public properties should be commented

+    disabled: {type: Boolean, value: false},
+  },
+
+  /**
+   * Returns the icon to use for a given site.
+   * @param {string} site The url of the site to fetch the icon for.
+   * @return {string} The background-image style with the favicon.
+   * @private
+   */
+  siteIcon_: function(url) {
+    return 'background-image: ' + cr.icon.getFavicon(url);
+  },
+
+});