MD Site Settings: Add five new top level categories

chrome/browser/resources/settings/site_settings_page/site_settings_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/site_settings/constants.html">
 <link rel="import" href="/site_settings/site_settings_behavior.html">
 <link rel="import" href="/site_settings/site_settings_prefs_browser_proxy.html">
 
 <dom-module id="settings-site-settings-page">
   <template>
@@ skipping 56 matching lines @@
         category$="[[ContentSettingsTypes.JAVASCRIPT]]"
         on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.JAVASCRIPT)]]" item-icon=""></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.JAVASCRIPT)]]
         <div id="javascript" class="secondary"></div>
       </div>
     </div>
     <div class="settings-box two-line"
+        category$="[[ContentSettingsTypes.PLUGINS]]"
+        on-tap="onTapCategory">
+      <iron-icon icon="[[computeIconForContentCategory(
+          ContentSettingsTypes.PLUGINS)]]" item-icon=""></iron-icon>
+      <div class="middle">
+        [[computeTitleForContentCategory(ContentSettingsTypes.PLUGINS)]]
+        <div id="plugins" class="secondary"></div>
+      </div>
+    </div>
+    <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.IMAGES]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.IMAGES)]]" item-icon=""></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.IMAGES)]]
         <div id="images" class="secondary"></div>
       </div>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.POPUPS]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
           ContentSettingsTypes.POPUPS)]]" item-icon=""></iron-icon>
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.POPUPS)]]
         <div id="popups" class="secondary"></div>
       </div>
     </div>
+    <div class="settings-box two-line"
+        category$="[[ContentSettingsTypes.BACKGROUND_SYNC]]"
+        on-tap="onTapCategory">
+      <iron-icon icon="[[computeIconForContentCategory(
+          ContentSettingsTypes.BACKGROUND_SYNC)]]" item-icon=""></iron-icon>
+      <div class="middle">
+        [[computeTitleForContentCategory(
+            ContentSettingsTypes.BACKGROUND_SYNC)]]

[michaelpg, 2016/06/02 12:58:30]

+2 indent

[Finnur, 2016/06/02 17:31:36]

I'm confused... For HTML we use a 2 space indent and one applies 2x when a line
wraps, right?
That means line 111 should be four spaces indented... which it is, no? :s

[michaelpg, 2016/06/03 13:37:14]

We have a new style guideline of wrapping computed functions 4 spaces. It's a
bit tricky and, in this case, apparently not definitive. +stevenjb

See the examples under "Wrap computed bindings to keep within the 80-character
column limit, indenting the next line an additional 4 spaces." in the draft
Polymer WebUI Style Guide:
https://www.chromium.org/developers/web-development-style-guide

I added this as a 3rd example for us to decide there and wound up tentatively
agreeing with you. Either way please feel free to land this as-is. 

+        <div id="backgroundSync" class="secondary"></div>
+      </div>
+    </div>
+    <div class="settings-box two-line"
+        category$="[[ContentSettingsTypes.KEYGEN]]"
+        on-tap="onTapCategory">
+      <iron-icon icon="[[computeIconForContentCategory(
+          ContentSettingsTypes.KEYGEN)]]" item-icon=""></iron-icon>
+      <div class="middle">
+        [[computeTitleForContentCategory(
+            ContentSettingsTypes.KEYGEN)]]

[michaelpg, 2016/06/02 12:58:30]

+2 indent

+        <div id="keygen" class="secondary"></div>
+      </div>
+    </div>
+    <div class="settings-box two-line"
+        category$="[[ContentSettingsTypes.AUTOMATIC_DOWNLOADS]]"
+        on-tap="onTapCategory">
+      <iron-icon icon="[[computeIconForContentCategory(
+          ContentSettingsTypes.AUTOMATIC_DOWNLOADS)]]" item-icon=""></iron-icon>
+      <div class="middle">
+        [[computeTitleForContentCategory(
+            ContentSettingsTypes.AUTOMATIC_DOWNLOADS)]]

[michaelpg, 2016/06/02 12:58:31]

+2 indent

+        <div id="automaticDownloads" class="secondary"></div>
+      </div>
+    </div>
+    <div class="settings-box two-line"
+        category$="[[ContentSettingsTypes.UNSANDBOXED_PLUGINS]]"
+        on-tap="onTapCategory">
+      <iron-icon icon="[[computeIconForContentCategory(
+          ContentSettingsTypes.UNSANDBOXED_PLUGINS)]]" item-icon=""></iron-icon>
+      <div class="middle">
+        [[computeTitleForContentCategory(
+            ContentSettingsTypes.UNSANDBOXED_PLUGINS)]]

[michaelpg, 2016/06/02 12:58:30]

+2 indent

+        <div id="unsandboxedPlugins" class="secondary"></div>
+      </div>
+    </div>
   </template>
   <script src="site_settings_page.js"></script>
 </dom-module>