MD WebUI: Pull 'X selected' toolbar overlay from History into shared element

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html
new file mode 100644
index 0000000000000000000000000000000000000000..4757c137da7d81dfaf0ed51a303262cc0e55af3c
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html
@@ -0,0 +1,61 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
+
+<dom-module id="cr-toolbar-selection-overlay">
+  <template>
+    <style>
+      :host {
+        -webkit-padding-start: var(--cr-toolbar-field-margin, 0);
+        height: 56px;
+        display: flex;
+      }
+
+      #overlay-buttons {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        margin: 0 auto;
+        max-width: var(--selection-overlay-max-width, initial);
+        padding: 0 var(--selection-overlay-padding, 24px);
+      }
+
+      paper-button {
+        font-weight: 500;
+      }
+
+      #number-selected {
+        flex: 1;
+      }
+
+      #cancel-icon-button {
+        -webkit-margin-end: 24px;
+        -webkit-margin-start: 2px;
+        height: 36px;
+        width: 36px;
+      }
+
+      #cancel-icon-button iron-icon {
+        height: 20px;
+        width: 20px;
+      }
+    </style>
+    <div id="overlay-buttons">

[Dan Beam, 2017/04/11 00:39:01]

why do we need #overlay-buttons rather than putting these styles on :host?

[Dan Beam, 2017/04/11 00:39:01]

nit: many of these IDs have presentational details in them.  I guess that's not
horrible, but it's better to have "delete" or "cancel" than "-button" in there
in case the presentation changes, IMO.

not a huge deal, just a general gripe of mine.

[tsergeant, 2017/04/11 01:16:20]

The extra div is used to ensure we can have the left spacing while still having
the children be centered with a max-width. I don't know of any way to make that
all behave correctly with only one diff. 
Got it. In this case, I most of the IDs, since they aren't really necessary.

+      <button is="paper-icon-button-light"
+          id="cancel-icon-button"
+          on-tap="onClearSelectionTap_"
+          title="[[cancelLabel]]">
+        <iron-icon icon="cr:clear"></iron-icon>
+      </button>
+      <div id="number-selected">[[selectionLabel]]</div>
+      <paper-button id="cancel-button" on-tap="onClearSelectionTap_">
+        [[cancelLabel]]
+      </paper-button>
+      <paper-button id="delete-button" on-tap="onDeleteTap_">
+        [[deleteLabel]]
+      </paper-button>
+    </div>
+  </template>
+  <script src="cr_toolbar_selection_overlay.js"></script>
+</dom-module>