MD Bookmarks: Show toolbar overlay when multiple items are selected

chrome/browser/resources/md_bookmarks/toolbar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <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">
 <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
 
 <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;
       }
 
       button.more-vert-button div {
         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">
       <button class="dropdown-item" on-tap="onSortTap_"
           disabled="[[hasSearchTerm_(searchTerm_)]]">
         $i18n{menuSort}
       </button>
       <hr>
       <button class="dropdown-item" on-tap="onAddBookmarkTap_"
           disabled="[[hasSearchTerm_(searchTerm_)]]">
         $i18n{menuAddBookmark}
       </button>
       <button class="dropdown-item" on-tap="onAddFolderTap_"
           disabled="[[hasSearchTerm_(searchTerm_)]]">
         $i18n{menuAddFolder}
       </button>
       <hr>
       <button class="dropdown-item" on-tap="onImportTap_">
         $i18n{menuImport}
       </button>
       <button class="dropdown-item" on-tap="onExportTap_">
         $i18n{menuExport}
       </button>
     </dialog>
     <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_">
         <div></div>
         <div></div>
         <div></div>
       </button>
     </cr-toolbar>
     <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>