[cr-toolbar-selection-overlay] Fix animations.

This CL fixes animations in the toolbar selection overlay. The elements
would originally instantly appear rather than smoothly animate in due to
the way dom-if worked. This has been fixed by applying an opacity animation
rather than a show/hide.

Bug: 842007
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I75598d9048c3b4533a2dd52d003ff5a5d37e615d
Reviewed-on: https://chromium-review.googlesource.com/1084391Reviewed-by: Alan Cutter <alancutter@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#564801}

chrome/browser/resources/md_bookmarks/toolbar.html

@@ -10,11 +10,7 @@
     <style include="shared-style">
       :host {
         background: var(--md-toolbar-color);
-        transition: background-color 150ms;
-      }
-
-      :host([show-selection-overlay]) {
-        background: white;
+        position: relative;
       }
 
       paper-icon-button-light.more-actions {
@@ -25,13 +21,9 @@
         border-color: white;
       }
 
-      cr-toolbar,
-      cr-toolbar-selection-overlay {
-        flex: 1;
-      }
-
       cr-toolbar {
         color: #fff;
+        flex: 1;
         --cr-toolbar-field-margin:
             calc(var(--sidebar-width) + var(--splitter-width));
       }
@@ -45,7 +37,6 @@
     <cr-toolbar page-name="$i18n{title}"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
-        hidden$="[[showSelectionOverlay]]"
         narrow="{{narrow_}}"
         on-search-changed="onSearchChanged_">
       <paper-icon-button-light class="more-actions more-vert-button">
@@ -59,15 +50,14 @@
         </button>
       </paper-icon-button-light>
     </cr-toolbar>
-    <template is="dom-if" if="[[showSelectionOverlay]]">
-      <cr-toolbar-selection-overlay delete-label="$i18n{delete}"
-          cancel-label="$i18n{cancel}"
-          selection-label="[[getItemsSelectedString_(selectedItems_.size)]]"
-          delete-disabled="[[!canDeleteSelection_(selectedItems_)]]"
-          on-delete-selected-items="onDeleteSelectionTap_"
-          on-clear-selected-items="onClearSelectionTap_">
-      </cr-toolbar-selection-overlay>
-    </template>
+    <cr-toolbar-selection-overlay show="[[showSelectionOverlay]]"
+        delete-label="$i18n{delete}"
+        cancel-label="$i18n{cancel}"
+        selection-label="[[getItemsSelectedString_(selectedItems_.size)]]"
+        delete-disabled="[[!canDeleteSelection_(selectedItems_)]]"
+        on-delete-selected-items="onDeleteSelectionTap_"
+        on-clear-selected-items="onClearSelectionTap_">
+    </cr-toolbar-selection-overlay>
   </template>
   <script src="chrome://bookmarks/toolbar.js"></script>
 </dom-module>

chrome/browser/resources/md_bookmarks/toolbar.js

@@ -19,7 +19,6 @@ Polymer({
       type: Boolean,
       computed: 'shouldShowSelectionOverlay_(selectedItems_, globalCanEdit_)',
       readOnly: true,
-      reflectToAttribute: true,
     },
 
     /** @private */
@@ -112,9 +111,14 @@ Polymer({
     return this.selectedItems_.size > 1 && this.globalCanEdit_;
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
   canDeleteSelection_: function() {
-    return bookmarks.CommandManager.getInstance().canExecute(
-        Command.DELETE, this.selectedItems_);
+    return this.showSelectionOverlay &&
+        bookmarks.CommandManager.getInstance().canExecute(
+            Command.DELETE, this.selectedItems_);
   },
 
   /**

chrome/browser/resources/md_history/history_toolbar.html

@@ -14,17 +14,12 @@
       :host {
         color: #fff;
         display: flex;
-        transition: background-color 150ms;
+        position: relative;
       }
 
       /* General toolbar layout. */
 
-      :host([items-selected_]) {
-        background: white;
-      }
-
-      cr-toolbar,
-      cr-toolbar-selection-overlay {
+      cr-toolbar {
         --cr-toolbar-field-margin: var(--side-bar-width);
         flex: 1;
       }
@@ -35,14 +30,15 @@
       }
 
       cr-toolbar-selection-overlay {
+        opacity: 0;
         --selection-overlay-max-width: var(--card-max-width);
+        --cr-toolbar-field-margin: var(--side-bar-width);
       }
     </style>
     <cr-toolbar id="main-toolbar"
         page-name="$i18n{title}"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
-        hidden$="[[itemsSelected_]]"
         spinner-active="[[spinnerActive]]"
         show-menu="[[hasDrawer]]"
         show-menu-promo="[[canShowMenuPromo_(showMenuPromo)]]"
@@ -51,14 +47,13 @@
         close-menu-promo="$i18n{closeMenuPromo}"
         on-search-changed="onSearchChanged_">
     </cr-toolbar>
-    <template is="dom-if" if="[[itemsSelected_]]">
-      <cr-toolbar-selection-overlay delete-label="$i18n{delete}"
-          cancel-label="$i18n{cancel}"
-          selection-label="[[numberOfItemsSelected_(count)]]"
-          on-clear-selected-items="clearSelectedItems"
-          on-delete-selected-items="deleteSelectedItems">
-      </cr-toolbar-selection-overlay>
-    </template>
+    <cr-toolbar-selection-overlay show="[[itemsSelected_]]"
+        delete-label="$i18n{delete}"
+        cancel-label="$i18n{cancel}"
+        selection-label="[[numberOfItemsSelected_(count)]]"
+        on-clear-selected-items="clearSelectedItems"
+        on-delete-selected-items="deleteSelectedItems">
+    </cr-toolbar-selection-overlay>
   </template>
   <script src="chrome://history/history_toolbar.js"></script>
 </dom-module>

chrome/browser/resources/md_history/history_toolbar.js

@@ -19,7 +19,6 @@ Polymer({
     itemsSelected_: {
       type: Boolean,
       value: false,
-      reflectToAttribute: true,
     },
 
     // The most recent term entered in the search field. Updated incrementally

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

@@ -10,11 +10,23 @@
     <style include="cr-icons paper-button-style">
       :host {
         -webkit-padding-start: var(--cr-toolbar-field-margin, 0);
+        background: white;
         border-bottom: 1px solid var(--google-grey-300);
-        box-sizing: border-box;
+        bottom: 0;
         color: var(--google-grey-900);
         display: flex;
-        height: 56px;
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: opacity 150ms;
+      }
+
+      :host([show]) {
+        opacity: 1;
+        pointer-events: initial;
       }
 
       #overlay-content {
@@ -46,21 +58,23 @@
         width: 20px;
       }
     </style>
-    <div id="overlay-content">
-      <paper-icon-button-light>
-        <button on-tap="onClearSelectionTap_" title="[[cancelLabel]]">
-          <iron-icon icon="cr:clear"></iron-icon>
-        </button>
-      </paper-icon-button-light>
-      <div id="number-selected">[[selectionLabel]]</div>
-      <paper-button on-tap="onClearSelectionTap_">
-        [[cancelLabel]]
-      </paper-button>
-      <paper-button id="delete" on-tap="onDeleteTap_"
-          disabled="[[deleteDisabled]]">
-        [[deleteLabel]]
-      </paper-button>
-    </div>
+    <template is="dom-if" if="[[hasShown_]]">
+      <div id="overlay-content">
+        <paper-icon-button-light>
+          <button on-tap="onClearSelectionTap_" title="[[cancelLabel]]">
+            <iron-icon icon="cr:clear"></iron-icon>
+          </button>
+        </paper-icon-button-light>
+        <div id="number-selected">[[selectionLabel_]]</div>
+        <paper-button on-tap="onClearSelectionTap_">
+          [[cancelLabel]]
+        </paper-button>
+        <paper-button id="delete" on-tap="onDeleteTap_"
+            disabled="[[deleteDisabled]]">
+          [[deleteLabel]]
+        </paper-button>
+      </div>
+    </template>
   </template>
   <script src="cr_toolbar_selection_overlay.js"></script>
 </dom-module>

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

@@ -6,12 +6,21 @@
  * @fileoverview Element which displays the number of selected items with
  * Cancel/Delete buttons, designed to be used as an overlay on top of
  * <cr-toolbar>. See <history-toolbar> for an example usage.
+ *
+ * Note that the embedder is expected to set position: relative to make the
+ * absolute positioning of this element work.
  */
 
 Polymer({
   is: 'cr-toolbar-selection-overlay',
 
   properties: {
+    show: {
+      type: Boolean,
+      observer: 'onShowChanged_',
+      reflectToAttribute: true,
+    },
+
     deleteLabel: String,
 
     cancelLabel: String,
@@ -19,11 +28,21 @@ Polymer({
     selectionLabel: String,
 
     deleteDisabled: Boolean,
+
+    /** @private */
+    hasShown_: Boolean,
+
+    /** @private */
+    selectionLabel_: String,
   },
 
+  observers: [
+    'updateSelectionLabel_(show, selectionLabel)',
+  ],
+
   /** @return {PaperButtonElement} */
   get deleteButton() {
-    return this.$.delete;
+    return /** @type {PaperButtonElement} */ (this.$$('#delete'));
   },
 
   /** @private */
@@ -35,4 +54,20 @@ Polymer({
   onDeleteTap_: function() {
     this.fire('delete-selected-items');
   },
+
+  /** @private */
+  updateSelectionLabel_: function() {
+    // Do this update in a microtask to ensure |show| and |selectionLabel|
+    // are both updated.
+    this.debounce('updateSelectionLabel_', () => {
+      this.selectionLabel_ =
+          this.show ? this.selectionLabel : this.selectionLabel_;
+    });
+  },
+
+  /** @private */
+  onShowChanged_: function() {
+    if (this.show)
+      this.hasShown_ = true;
+  },
 });