MD Bookmarks: Show toolbar overlay when multiple items are selected

This shows the same toolbar overlay as MD History, with 'Cancel'/'Delete'
options. In MD Bookmarks, the overlay is only shown when more than one
item is selected, to avoid flickering when double clicking items.

BUG=692827
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2827573002
Cr-Commit-Position: refs/heads/master@{#467582}

chrome/app/bookmarks_strings.grdp

@@ -410,6 +410,9 @@
   <message name="IDS_MD_BOOKMARK_MANAGER_NO_SEARCH_RESULTS" desc="Text on the bookmarks list that indicates that no bookmarks or folders match the search.">
     No search results found
   </message>
+  <message name="IDS_MD_BOOKMARK_MANAGER_ITEMS_SELECTED" desc="Label displayed in bookmark manager toolbar telling the user how many items they have selected.">
+    <ph name="NUMBER_OF_ITEMS_SELECTED">$1</ph> selected
+  </message>
   <message name="IDS_MD_BOOKMARK_MANAGER_TITLE" desc="Title of the bookmark manager window.">
     Bookmarks
   </message>

chrome/browser/resources/md_bookmarks/edit_dialog.html

@@ -27,7 +27,7 @@
       </div>
       <div class="button-container">
         <paper-button class="cancel-button" on-tap="onCancelButtonTap_">
-          $i18n{cancelEdit}
+          $i18n{cancel}
         </paper-button>
         <paper-button id="saveButton" class="action-button"
             on-tap="onSaveButtonTap_">

chrome/browser/resources/md_bookmarks/list.html

@@ -14,7 +14,8 @@
     <style include="shared-style">
       :host {
         overflow-y: auto;
-        padding: 20px 32px 20px calc(32px - var(--splitter-width));
+        padding: 20px var(--card-padding-side) 20px
+            calc(var(--card-padding-side) - var(--splitter-width));
       }
 
       #bookmarksCard {

chrome/browser/resources/md_bookmarks/shared_vars.html

 <style is="custom-style">
   :root {
     --card-max-width: 960px;
+    --card-padding-side: 32px;
     --folder-inactive-color: #5a5a5a;
     --interactive-color: var(--google-blue-500);
     --min-sidebar-width: 256px;

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,20 @@
         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);
+      }
+
+      :host(:not([narrow_])) 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 +70,8 @@
     <cr-toolbar page-name="$i18n{title}"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
+        hidden$="[[showSelectionOverlay]]"
+        narrow="{{narrow_}}"
         on-search-changed="onSearchChanged_">
       <button is="paper-icon-button-light" class="more-actions more-vert-button"
           on-tap="onMenuButtonOpenTap_">
@@ -60,6 +83,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="[[getItemsSelectedString_(selectedCount_)]]"
+          on-clear-selected-items="onClearSelectionTap_">
+      </cr-toolbar-selection-overlay>
+    </template>
   </template>
   <script src="chrome://bookmarks/toolbar.js"></script>
 </dom-module>

chrome/browser/resources/md_bookmarks/toolbar.js

@@ -20,12 +20,32 @@ Polymer({
       type: String,
       observer: 'onSidebarWidthChanged_',
     },
+
+    showSelectionOverlay: {
+      type: Boolean,
+      computed: 'shouldShowSelectionOverlay_(selectedCount_)',
+      readOnly: true,
+      reflectToAttribute: true,
+    },
+
+    /** @private */
+    narrow_: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
+    /** @private */
+    selectedCount_: Number,
   },
 
   attached: function() {
     this.watch('searchTerm_', function(state) {
       return state.search.term;
     });
+    this.watch('selectedCount_', function(state) {
+      return state.selection.items.size;
+    });
+    this.updateFromStore();
   },
 
   /** @return {CrToolbarSearchFieldElement} */
@@ -58,6 +78,7 @@ Polymer({
     this.closeDropdownMenu_();
   },
 
+  /** @private */
   onAddFolderTap_: function() {
     var dialog =
         /** @type {BookmarksEditDialogElement} */ (this.$.addDialog.get());
@@ -77,6 +98,11 @@ Polymer({
     this.closeDropdownMenu_();
   },
 
+  /** @private */
+  onClearSelectionTap_: function() {
+    this.dispatch(bookmarks.actions.deselectItems());
+  },
+
   /** @private */
   closeDropdownMenu_: function() {
     var menu = /** @type {!CrActionMenuElement} */ (this.$.dropdown);
@@ -93,6 +119,7 @@ Polymer({
       this.dispatch(bookmarks.actions.setSearchTerm(searchTerm));
   },
 
+  /** @private */
   onSidebarWidthChanged_: function() {
     this.style.setProperty('--sidebar-width', this.sidebarWidth);
   },
@@ -109,4 +136,20 @@ Polymer({
   hasSearchTerm_: function() {
     return !!this.searchTerm_;
   },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowSelectionOverlay_: function() {
+    return this.selectedCount_ > 1;
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getItemsSelectedString_: function() {
+    return loadTimeData.getStringF('itemsSelected', this.selectedCount_);
+  },
 });

chrome/browser/ui/webui/md_bookmarks/md_bookmarks_ui.cc

@@ -36,9 +36,10 @@ content::WebUIDataSource* CreateMdBookmarksUIHTMLSource(Profile* profile) {
                      IDS_MD_BOOKMARK_MANAGER_ADD_BOOKMARK_TITLE);
   AddLocalizedString(source, "addFolderTitle",
                      IDS_MD_BOOKMARK_MANAGER_ADD_FOLDER_TITLE);
-  AddLocalizedString(source, "cancelEdit", IDS_CANCEL);
+  AddLocalizedString(source, "cancel", IDS_CANCEL);
   AddLocalizedString(source, "clearSearch",
                      IDS_MD_BOOKMARK_MANAGER_CLEAR_SEARCH);
+  AddLocalizedString(source, "delete", IDS_DELETE);
   AddLocalizedString(source, "editBookmarkTitle", IDS_BOOKMARK_EDITOR_TITLE);
   AddLocalizedString(source, "editDialogInvalidUrl",
                      IDS_BOOKMARK_MANAGER_INVALID_URL);
@@ -48,6 +49,8 @@ content::WebUIDataSource* CreateMdBookmarksUIHTMLSource(Profile* profile) {
                              IDS_BOOKMARK_MANAGER_URL_INPUT_PLACE_HOLDER);
   AddLocalizedString(source, "emptyList",
                      IDS_MD_BOOKMARK_MANAGER_EMPTY_LIST);
+  AddLocalizedString(source, "itemsSelected",
+                     IDS_MD_BOOKMARK_MANAGER_ITEMS_SELECTED);
   AddLocalizedString(source, "menuAddBookmark",
                      IDS_MD_BOOKMARK_MANAGER_MENU_ADD_BOOKMARK);
   AddLocalizedString(source, "menuAddFolder",

chrome/test/data/webui/md_bookmarks/md_bookmarks_browsertest.js

@@ -167,6 +167,20 @@ TEST_F('MaterialBookmarksStoreClientTest', 'All', function() {
   mocha.run();
 });
 
+function MaterialBookmarksToolbarTest() {}
+
+MaterialBookmarksToolbarTest.prototype = {
+  __proto__: MaterialBookmarksBrowserTest.prototype,
+
+  extraLibraries: MaterialBookmarksBrowserTest.prototype.extraLibraries.concat([
+    'toolbar_test.js',
+  ]),
+};
+
+TEST_F('MaterialBookmarksToolbarTest', 'All', function() {
+  mocha.run();
+});
+
 function MaterialBookmarksUtilTest() {}
 
 MaterialBookmarksUtilTest.prototype = {

chrome/test/data/webui/md_bookmarks/toolbar_test.js

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+suite('<bookmarks-toolbar>', function() {
+  var toolbar;
+  var store;
+
+  setup(function() {
+    store = new bookmarks.TestStore({
+      nodes: testTree(createFolder('1', [
+        createItem('2'),
+        createItem('3'),
+      ])),
+      selection: {
+        items: new Set(),
+        anchor: null,
+      },
+    });
+    bookmarks.Store.instance_ = store;
+
+    toolbar = document.createElement('bookmarks-toolbar');
+    replaceBody(toolbar);
+  });
+
+  test('selecting multiple items shows toolbar overlay', function() {
+    assertFalse(toolbar.showSelectionOverlay);
+
+    store.data.selection.items = new Set(['2']);
+    store.notifyObservers();
+    assertFalse(toolbar.showSelectionOverlay);
+
+    store.data.selection.items = new Set(['2', '3']);
+    store.notifyObservers();
+    assertTrue(toolbar.showSelectionOverlay);
+  });
+});

chrome/test/data/webui/md_history/md_history_focus_test.js

@@ -52,7 +52,7 @@ TEST_F('MaterialHistoryFocusTest', 'All', function() {
     });
 
     test('search bar is focused on load in wide mode', function() {
-      toolbar.$['main-toolbar'].narrow_ = false;
+      toolbar.$['main-toolbar'].narrow = false;
 
       historyResult(createHistoryInfo(), []);
       return PolymerTest.flushTasks().then(() => {
@@ -65,7 +65,7 @@ TEST_F('MaterialHistoryFocusTest', 'All', function() {
     });
 
     test('search bar is not focused on load in narrow mode', function() {
-      toolbar.$['main-toolbar'].narrow_ = true;
+      toolbar.$['main-toolbar'].narrow = true;
 
       historyResult(createHistoryInfo(), []);
       return PolymerTest.flushTasks().then(() => {

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

@@ -59,20 +59,20 @@
         -webkit-margin-end: 12px;
       }
 
-      :host([narrow_]) #centeredContent {
+      :host([narrow]) #centeredContent {
         justify-content: flex-end;
       }
 
-      :host([narrow_][showing-search_]) #leftContent {
+      :host([narrow][showing-search_]) #leftContent {
         position: absolute;
         opacity: 0;
       }
 
-      :host(:not([narrow_])) #leftContent {
+      :host(:not([narrow])) #leftContent {
         flex: 1 1 var(--cr-toolbar-field-margin, 0);
       }
 
-      :host(:not([narrow_])) #rightContent {
+      :host(:not([narrow])) #rightContent {
         flex: 1 1 0;
         text-align: end;
       }
@@ -148,12 +148,12 @@
     </div>
 
     <div id="centeredContent">
-      <cr-toolbar-search-field id="search" narrow="[[narrow_]]"
+      <cr-toolbar-search-field id="search" narrow="[[narrow]]"
           label="[[searchPrompt]]" clear-label="[[clearLabel]]"
           spinner-active="[[spinnerActive]]"
           showing-search="{{showingSearch_}}">
       </cr-toolbar-search-field>
-      <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
+      <iron-media-query query="(max-width: 900px)" query-matches="{{narrow}}">
       </iron-media-query>
     </div>
 

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.js

@@ -35,10 +35,15 @@ Polymer({
       value: false,
     },
 
-    closeMenuPromo: String,
+    // True when the toolbar is displaying in narrow mode.
+    narrow: {
+      type: Boolean,
+      reflectToAttribute: true,
+      readonly: true,
+      notify: true,
+    },
 
-    /** @private */
-    narrow_: {type: Boolean, reflectToAttribute: true},
+    closeMenuPromo: String,
 
     /** @private */
     showingSearch_: {