MD Bookmarks: Show toolbar overlay when multiple items are selected

chrome/browser/resources/md_bookmarks/toolbar.html

Index: chrome/browser/resources/md_bookmarks/toolbar.html
diff --git a/chrome/browser/resources/md_bookmarks/toolbar.html b/chrome/browser/resources/md_bookmarks/toolbar.html
index 90d4655bc979d947119f9736e67a4d4c33dbd2fe..73c0a002f733afffe8c222778146120f6a7d5f02 100644
--- a/chrome/browser/resources/md_bookmarks/toolbar.html
+++ b/chrome/browser/resources/md_bookmarks/toolbar.html
@@ -2,6 +2,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://bookmarks/edit_dialog.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
@@ -10,6 +11,16 @@
 <dom-module id="bookmarks-toolbar">
   <template>
     <style include="shared-style">
+      :host {
+        background: var(--md-toolbar-color);
+        color: #fff;
+        transition: background-color 150ms;
+      }
+
+      :host([show-selection-overlay]) {
+        background: var(--interactive-color);
+      }
+
       button.more-actions {
         margin: 4px;
       }
@@ -18,10 +29,22 @@
         border-color: white;
       }
 
+      cr-toolbar,
+      cr-toolbar-selection-overlay {
+        flex: 1;
+      }
+
       cr-toolbar {
         --cr-toolbar-field-margin:
             calc(var(--sidebar-width) + var(--splitter-width));
-        background: var(--md-toolbar-color);
+      }
+
+      @media (min-width: 901px) {

[calamity, 2017/04/24 06:06:38]

=S

Any way to factor this into a css variable in cr somewhere?

Toolbar breakpoints should be configurable from a single place.

[tsergeant, 2017/04/24 06:49:10]

You can't have CSS variables in media queries, but I've made cr-toolbar's
`narrow` property public, which means we can bind it up and use it.

[calamity, 2017/04/26 10:13:25]

Wew.

+        cr-toolbar-selection-overlay {
+          --selection-overlay-padding: var(--card-padding-side);
+          --cr-toolbar-field-margin: var(--sidebar-width);
+          --selection-overlay-max-width: var(--card-max-width);
+        }
       }
     </style>
     <dialog is="cr-action-menu" id="dropdown">
@@ -49,6 +72,7 @@
     <cr-toolbar page-name="$i18n{title}"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
+        hidden$="[[showSelectionOverlay]]"
         on-search-changed="onSearchChanged_">
       <button is="paper-icon-button-light" class="more-actions more-vert-button"
           on-tap="onMenuButtonOpenTap_">
@@ -60,6 +84,13 @@
     <template is="cr-lazy-render" id="addDialog">
       <bookmarks-edit-dialog></bookmarks-edit-dialog>
     </template>
+    <template is="dom-if" if="[[showSelectionOverlay]]">
+      <cr-toolbar-selection-overlay delete-label="$i18n{delete}"
+          cancel-label="$i18n{cancel}"
+          selection-label="[[numberOfItemsSelected_(selectedCount_)]]"

[calamity, 2017/04/24 06:06:38]

nit: (get)itemsSelectedString_

[tsergeant, 2017/04/24 06:49:10]

Done.

+          on-clear-selected-items="onClearSelectionTap_">
+      </cr-toolbar-selection-overlay>
+    </template>
   </template>
   <script src="chrome://bookmarks/toolbar.js"></script>
 </dom-module>