[MD settings] update site details permission layout

This CL updates the permission dropdown menu so that it matches the
mocks better.

BUG=632535
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2190243002
Cr-Commit-Position: refs/heads/master@{#408841}

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

 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/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-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="/i18n_setup.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">
@@ -13,64 +11,30 @@
 <dom-module id="site-details-permission">
   <template>
     <style include="settings-shared">
-      :host {
-        display: block;
-      }
-
-      .left-column {
-        -webkit-margin-start: 15px;
-      }
-
-      .right-column {
-        -webkit-margin-start: 10px;
-      }
-
-      .permission-header {
-        -webkit-margin-start: -1px;
-      }
-
-      .permission-list {
-        -webkit-margin-end: 7px;
-      }
-
-      .permission-list > paper-dropdown-menu {
-        -webkit-margin-end: 3px;
-        -webkit-margin-start: -13px;
-        margin-bottom: 12px;
-        margin-top: -20px;
-        width: 100%;
-      }
-
-      .permission-list > paper-dropdown-menu::shadow > paper-menu-button {
-        -webkit-margin-start: 11px;
-        width: 100%;
-      }
     </style>
-    <div id="details" class="horizontal layout top" hidden>
-      <div class="left-column">
-        <iron-icon icon="[[computeIconForContentCategory(category)]]">
-        </iron-icon>
-      </div>
-      <div class="flex right-column">
-        <div class="permission-header">
-          [[computeTitleForContentCategory(category)]]
+    <div id="details" class="list-frame" hidden>
+      <div class="list-item underbar">
+        <div>
+          <iron-icon icon="[[computeIconForContentCategory(category)]]">
+          </iron-icon>
         </div>
-        <div class="permission-list">
-          <paper-dropdown-menu vertical-align="auto">
-            <paper-listbox id="permission" class="dropdown-content"
-                on-iron-activate="onPermissionMenuIronActivate_"
-                attr-for-selected="data-permission-value">
-              <button id="allow" class="dropdown-item" role="option"
-                  data-permission-value$="[[PermissionValues.ALLOW]]">
-                [[i18n_.allowAction]]
-              </button>
-              <button id="block" class="dropdown-item" role="option"
-                  data-permission-value$="[[PermissionValues.BLOCK]]">
-                 [[i18n_.blockAction]]
-              </button>
-            </paper-listbox>
-          </paper-dropdown-menu>
+        <div class="middle" id="permissionHeader">
+          [[computeTitleForContentCategory(category)]]
         </div>
+        <paper-dropdown-menu vertical-align="auto" no-label-float>
+          <paper-listbox id="permission" class="dropdown-content"
+              on-iron-activate="onPermissionMenuIronActivate_"
+              attr-for-selected="data-permission-value">
+            <button id="allow" class="dropdown-item" role="option"
+                data-permission-value$="[[PermissionValues.ALLOW]]">
+              $i18n{siteSettingsActionAllow}
+            </button>
+            <button id="block" class="dropdown-item" role="option"
+                data-permission-value$="[[PermissionValues.BLOCK]]">
+              $i18n{siteSettingsActionBlock}
+            </button>
+          </paper-listbox>
+        </paper-dropdown-menu>
       </div>
     </div>
   </template>

chrome/browser/resources/settings/site_settings/site_details_permission.js

@@ -18,17 +18,6 @@ Polymer({
      * @type {SiteException}
      */
     site: Object,
-
-    i18n_: {
-      readOnly: true,
-      type: Object,
-      value: function() {
-        return {
-          allowAction: loadTimeData.getString('siteSettingsActionAllow'),
-          blockAction: loadTimeData.getString('siteSettingsActionBlock'),
-        };
-      },
-    },
   },
 
   observers: ['siteChanged_(site, category)'],

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

+<link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/icons.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/site_settings/constants.html">

chrome/test/data/webui/settings/site_details_permission_tests.js

@@ -93,7 +93,7 @@ cr.define('site_details_permission', function() {
           assertFalse(testElement.$.details.hidden);
 
           var header = testElement.$.details.querySelector(
-              '.permission-header');
+              '#permissionHeader');
           assertEquals('Camera', header.innerText.trim(),
               'Widget should be labelled correctly');