[MD settings] content settings add site button; layout fixes

chrome/browser/resources/settings/site_settings/site_list.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.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-icon-button/paper-icon-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/site_settings/add_site_dialog.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="site-list">
   <template>
     <style include="settings-shared">
+      paper-button {
+        margin-top: 12px;  /* Align with <h2>. */
+      }
+
       paper-icon-button {
         left: 8px;
         right: 8px;
       }
 
       .selectable {
         -webkit-user-select: text;
       }
     </style>
-    <paper-submenu id="category" hidden
-        on-paper-submenu-open="onToggle_" on-paper-submenu-close="onToggle_">
-      <div class="menu-trigger settings-box" hidden$="[[allSites]]" actionable>
-        <div class="flex" id="header">[[categoryHeader]]</div>
-        <iron-icon id="icon" icon="cr:expand-more"></iron-icon>
+    <div id="category" hidden>
+      <div class="settings-box first" hidden$="[[allSites]]">
+        <h2 class="start">[[categoryHeader]]</h2>
+        <paper-button class="secondary-button" id="icon" on-tap="onAddSiteTap_">
+          $i18n{siteSettingsAddSite}
+        </paper-button>
       </div>
 
       <div class="list-frame menu-content vertical-list" id="listContainer">
         <template is="dom-repeat" items="[[sites]]">
           <div class="list-item">
             <div class="start layout horizontal center" on-tap="onOriginTap_"
                 actionable$="[[enableSiteSettings_]]">
               <div class="favicon-image"
                   style$="[[computeSiteIcon(item.originForDisplay)]]">
               </div>
               <div class="middle">
                 <div class="selectable">[[item.originForDisplay]]</div>
-                <div class="selectable secondary">
-                  [[computeSiteDescription_(item)]]
-                </div>
+                <!-- Until :blank is supported, this div must not contain extra

[dpapad, 2016/10/19 19:40:13]

I could not find :blank documented in any W3C standards doc/draft, so I don't
think we can count on this being implemented any time soon (only firefox seems
to have it as -moz-only-whitespace). Maybe rephrase to

":empty CSS selector only works when no whitespace exists."

[dschuyler, 2016/10/20 00:06:09]

I changed the comment to include an example of the issue and
guidance about what to watch for.

+                     whitespace. -->
+                <div class="selectable secondary"
+                    >[[computeSiteDescription_(item)]]</div>
               </div>
             </div>
 
             <template is="dom-if" if="[[!!computeIconControlledBy_(item)]]">
               <iron-icon icon="[[computeIconControlledBy_(item)]]"></iron-icon>
             </template>
 
             <paper-icon-button id="dots" icon="cr:more-vert" toggles
                   active="{{item.menuOpened}}"
                   hidden="[[isExceptionControlled_(item.source)]]">
@@ skipping 23 matching lines @@
               </iron-dropdown>
             </template>
             <template is="dom-if" if="[[enableSiteSettings_]]">
               <div on-tap="onOriginTap_" actionable>
                 <button class="subpage-arrow" is="paper-icon-button-light">
                 </button>
               </div>
             </template>
           </div>
         </template>
-
-        <template is="dom-if" if="[[!allSites]]">
-          <div class="list-item list-button" on-tap="onAddSiteTap_">
-            $i18n{addSiteLink}
-          </div>
-        </template>
       </div>
-    </paper-submenu>
+    </div>
   </template>
   <script src="site_list.js"></script>
 </dom-module>