[MD settings] layout of site settings sub-pages

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

Index: chrome/browser/resources/settings/site_settings/site_list.html
diff --git a/chrome/browser/resources/settings/site_settings/site_list.html b/chrome/browser/resources/settings/site_settings/site_list.html
index c4535c32b1a51cec3b527c394687a07ea77515da..d9508c424c6bba6b0f86729f558f9b8ddd131a1e 100644
--- a/chrome/browser/resources/settings/site_settings/site_list.html
+++ b/chrome/browser/resources/settings/site_settings/site_list.html
@@ -1,64 +1,65 @@
 <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-flex-layout/classes/iron-flex-layout.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-item/paper-item.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item-body.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-submenu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu-button/paper-menu-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 <link rel="import" href="chrome://md-settings/site_settings/constants.html">
 <link rel="import" href="chrome://md-settings/site_settings/site_settings_behavior.html">
 <link rel="import" href="chrome://md-settings/site_settings/site_settings_prefs_browser_proxy.html">
 
 <dom-module id="settings-site-list">
-  <link rel="import" type="css" href="site_list.css">
   <template>
-    <style include="settings-shared"></style>
-    <paper-submenu id="category" hidden on-paper-submenu-open="onToggle_"
-        on-paper-submenu-close="onToggle_">
-      <paper-item class="menu-trigger" hidden$="[[allSites]]">
-        <div class="site-header horizontal layout">
-          <div class="flex" id="header"
-              >[[computeSiteListHeader_(sites, categoryEnabled)]]</div>
-          <iron-icon id="icon" icon="cr:expand-more"></iron-icon>
+    <style include="settings-shared">
+    paper-menu-button {
+      left: 8px;
+      margin: 0;
+      padding: 0;
+    }

[Finnur, 2016/05/10 13:05:22]

Why is this here and not in the (newly removed) .css file? Is this a new
convention -- to have styles appear in the html file, as opposed to on their
own?

[dschuyler, 2016/05/10 20:44:14]

Yep, it's the new style of style. I made some notes about it here:
https://docs.google.com/document/d/1G0t519y_cSW4etXVwruR145abZH0N5-9R7JyejzVo...

+    </style>
+    <paper-submenu id="category" hidden
+        on-paper-submenu-open="onToggle_" on-paper-submenu-close="onToggle_">
+      <div class="menu-trigger settings-box" hidden$="[[allSites]]">
+        <div class="flex" id="header">
+          [[computeSiteListHeader_(sites, categoryEnabled)]]
         </div>
-      </paper-item>
+        <iron-icon id="icon" icon="cr:expand-more"></iron-icon>
+      </div>
 
-      <paper-menu class="menu-content" id="listContainer">
+      <div class="list-frame menu-content vertical-list" id="listContainer">

[Finnur, 2016/05/10 13:05:22]

The list-frame class adds a lot of left padding to the list. I'm assuming this
is to be consistent with the all other lists for md-settings (as opposed to
following some mocks)?

[dschuyler, 2016/05/10 20:44:14]

Both, it's about having the lists be consistent and also the mocks
call for a 56px margin. (More literally, the mocks call for a 20px +
20px + 16px margin).

https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20Inner%20Pag...

         <template is="dom-repeat" items="[[sites]]">
-          <div class="site-list horizontal layout center">
-            <paper-item class="flex">
-              <div class="website-icon" style$="[[computeSiteIcon(item)]]">
-              </div>
-              <paper-item-body two-line on-tap="onOriginTap_" class="origin">

[Finnur, 2016/05/10 13:05:22]

The origin style was meant to separate the icon a bit from the origin, as per
mocks, I believe. Is the removal intentional?

[dschuyler, 2016/05/10 20:44:14]

Thanks, I thought the settings-shared had this done correctly.
It turns out I needed an adjustment in .middle.

-                <div>[[item.originForDisplay]]</div>
-                <div secondary>[[item.embeddingOriginForDisplay]]</div>
-              </paper-item-body>
-
-              <paper-menu-button hidden$="[[allSites]]">
-                <paper-icon-button icon="menu"
-                    class="dropdown-trigger"></paper-icon-button>
-                <paper-menu id="actionMenu" class="dropdown-content"
-                    on-iron-activate="onActionMenuIronActivate_">
-                  <paper-item value="[[actions_.ALLOW]]"
-                      hidden="[[!showAllowAction_]]"
-                      >[[i18n_.allowAction]]</paper-item>
-                  <paper-item value="[[actions_.BLOCK]]"
-                      hidden="[[!showBlockAction_]]"
-                      >[[i18n_.blockAction]]</paper-item>
-                  <paper-item value="[[actions_.RESET]]"
-                      >[[i18n_.resetAction]]</paper-item>
-                </paper-menu>
-              </paper-menu-button>
-            </paper-item>
+          <div class="list-item underscore">
+            <div class="favicon-image" style$="[[computeSiteIcon(item)]]"
+                on-tap="onOriginTap_"></div>
+            <div class="middle" on-tap="onOriginTap_">
+              <div>[[item.originForDisplay]]</div>
+              <div class="secondary">[[item.embeddingOriginForDisplay]]</div>
+            </div>
+            <paper-menu-button hidden$="[[allSites]]">
+              <paper-icon-button icon="more-vert" class="dropdown-trigger">
+              </paper-icon-button>
+              <paper-menu id="actionMenu" class="dropdown-content"
+                  on-iron-activate="onActionMenuIronActivate_">
+                <paper-item value="[[actions_.ALLOW]]"
+                    hidden="[[!showAllowAction_]]">
+                  [[i18n_.allowAction]]
+                </paper-item>
+                <paper-item value="[[actions_.BLOCK]]"
+                    hidden="[[!showBlockAction_]]">
+                  [[i18n_.blockAction]]
+                </paper-item>
+                <paper-item value="[[actions_.RESET]]">
+                  [[i18n_.resetAction]]
+                </paper-item>
+              </paper-menu>
+            </paper-menu-button>
           </div>
         </template>
-
-      </paper-menu>
+      </div>
     </paper-submenu>
   </template>
   <script src="site_list.js"></script>