[MD settings] Make expand row clickable

This CL makes the cookie name part of the expand button so that clicking
on it will expand/collapse the local data.

Bug: 752821
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Id81f16c3ecd435c4e99e4ccd9a6cfacf0cf81ef8
Reviewed-on: https://chromium-review.googlesource.com/820651Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#524252}

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

@@ -23,8 +23,8 @@
     </style>
     <template is="dom-repeat" items="[[entries_]]">
       <div class="settings-box" first$="[[!index]]">
-        <div class="start">[[getEntryDescription_(item)]]</div>
-        <cr-expand-button expanded="{{item.expanded_}}">
+        <cr-expand-button class="start" expanded="{{item.expanded_}}">
+          [[getEntryDescription_(item)]]
         </cr-expand-button>
         <div class="separator"></div>
         <button is="paper-icon-button-light" data-id-path$="[[item.idPath]]"

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html

@@ -6,10 +6,6 @@
 <dom-module id="cr-expand-button">
   <template>
     <style include="cr-icons cr-shared-style">
-      :host {
-        display: inline-block;
-      }
-
       :host([disabled]) {
         pointer-events: none;
       }
@@ -17,13 +13,24 @@
       button[is=paper-icon-button-light] {
         @apply(--cr-paper-icon-button-margin);
       }
+
+      #outer {
+        align-items: center;
+        display: flex;
+      }
+
+      #label {
+        flex: 1;
+      }
     </style>
-    <content></content>
-    <button is="paper-icon-button-light" class$="[[iconName_(expanded)]]"
-        toggles active="{{expanded}}" disabled="[[disabled]]" alt="[[alt]]"
-        aria-active-attribute="aria-expanded" on-tap="toggleExpand_"
-        tabindex$="[[tabIndex]]">
-    </button>
+    <div id="outer" on-tap="toggleExpand_">
+      <div id="label" on-tap="toggleExpand_"><slot></slot></div>
+      <button is="paper-icon-button-light" class$="[[iconName_(expanded)]]"
+          toggles active="{{expanded}}" disabled="[[disabled]]" alt="[[alt]]"
+          aria-active-attribute="aria-expanded"
+          tabindex$="[[tabIndex]]">
+      </button>
+    </div>
   </template>
   <script src="cr_expand_button.js"></script>
 </dom-module>