Site Settings Desktop: Implement the cookies list and details dialog.

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

Index: chrome/browser/resources/settings/site_settings/site_data_details_dialog.html
diff --git a/chrome/browser/resources/settings/site_settings/site_data_details_dialog.html b/chrome/browser/resources/settings/site_settings/site_data_details_dialog.html
new file mode 100644
index 0000000000000000000000000000000000000000..8eb5db586df13dc80fb0cdbf60a9165183bb1881
--- /dev/null
+++ b/chrome/browser/resources/settings/site_settings/site_data_details_dialog.html
@@ -0,0 +1,59 @@
+<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/paper-dropdown-menu/paper-dropdown-menu.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-listbox/paper-listbox.html">
+<link rel="import" href="/i18n_setup.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="site-data-details-dialog">
+  <template>
+    <style include="settings-shared">
+      .remove-button {
+        margin-top: 12px;
+      }
+    </style>
+    <cr-dialog id="dialog">
+      <div class="title">
+        [[title_]]
+      </div>
+      <div class="body">
+        <div class="layout horizontal" id="container">
+          <div class="flex">
+            <paper-dropdown-menu>

[michaelpg, 2016/07/05 18:01:11]

should this be disabled or something when there's only one item?

[Finnur, 2016/07/06 09:57:35]

It's hidden when there's only one item (see populateDialog_).

+              <paper-listbox id="picker" class="dropdown-content"
+                  attr-for-selected="picker-value"
+                  on-iron-activate="onItemSelected_">
+                <template is="dom-repeat" items="[[entries_]]">
+                  <paper-item picker-value$="[[item.id]]">
+                    [[item.title]]
+                  </paper-item>
+                </template>
+              </paper-listbox>
+            </paper-dropdown-menu>
+          </div>
+          <div class="button-container">
+            <paper-button on-tap="onRemove_"
+                class="cancel-button remove-button">

[Finnur, 2016/07/05 14:00:18]

The latest mocks have this button in the same style as the cancel button (not
blue) and I took the opportunity and also aligned it better vertically. (post
screenshot) 

+              $i18n{siteSettingsCookieRemove}
+            </paper-button>
+          </div>
+        </div>
+
+        <div id="content"></div>
+
+        <div class="button-container">
+          <paper-button class="cancel-button" dialog-dismiss>
+              $i18n{cancel}
+          </paper-button>
+          <paper-button class="action-button" dialog-dismiss

[michaelpg, 2016/07/05 18:01:11]

dialog-confirm? (though I don't think it really matters)

[Finnur, 2016/07/06 09:57:35]

Done.

+              id="clear" on-tap="onRemoveAll_">
+            $i18n{siteSettingsCookieRemoveAll}
+          </paper-button>
+        </div>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="cookie_tree_node.js"></script>
+  <script src="site_data_details_dialog.js"></script>
+</dom-module>