[cr-toolbar-selection-overlay] Hide toolbar when showing overlay.

This CL fixes an issue where the overlay didn't hide the toolbar properly
so it could still be tabbed to, and a corresponding problem where overlay
buttons could be tabbed to when not visible.

Bug: 851835, 851864
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I1562211745c2373ee64a85936953137f2541ae48
Reviewed-on: https://chromium-review.googlesource.com/1098420
Commit-Queue: calamity <calamity@chromium.org>
Reviewed-by: Alan Cutter <alancutter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#566763}

chrome/browser/resources/md_bookmarks/toolbar.html

@@ -35,6 +35,7 @@
       }
     </style>
     <cr-toolbar page-name="$i18n{title}"
+        has-overlay$="[[showSelectionOverlay]]"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"
         narrow="{{narrow_}}"

chrome/browser/resources/md_history/history_toolbar.html

@@ -36,6 +36,7 @@
       }
     </style>
     <cr-toolbar id="main-toolbar"
+        has-overlay$="[[itemsSelected_]]"
         page-name="$i18n{title}"
         clear-label="$i18n{clearSearch}"
         search-prompt="$i18n{searchPrompt}"

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

@@ -16,6 +16,7 @@
         color: #fff;
         display: flex;
         height: var(--cr-toolbar-height);
+        transition: visibility var(--cr-toolbar-overlay-animation-duration);
       }
 
       h1 {
@@ -61,6 +62,10 @@
         justify-content: flex-end;
       }
 
+      :host([has-overlay]) {
+        visibility: hidden;
+      }
+
       :host([narrow][showing-search_]) #leftContent {
         opacity: 0;
         position: absolute;

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

@@ -21,12 +21,15 @@
         position: absolute;
         right: 0;
         top: 0;
-        transition: opacity 150ms;
+        transition: opacity var(--cr-toolbar-overlay-animation-duration),
+                    visibility var(--cr-toolbar-overlay-animation-duration);
+        visibility: hidden;
       }
 
       :host([show]) {
         opacity: 1;
         pointer-events: initial;
+        visibility: initial;
       }
 
       #overlay-content {

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

@@ -8,7 +8,9 @@
  * <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.
+ * absolute positioning of this element work, and the cr-toolbar should have the
+ * has-overlay attribute set when its overlay is shown to prevent access through
+ * tab-traversal.
  */
 
 Polymer({

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -111,6 +111,8 @@
     --cr-separator-height: 1px;
     --cr-separator-line: var(--cr-separator-height) solid rgba(0, 0, 0, 0.06);
 
+    --cr-toolbar-overlay-animation-duration: 150ms;
+
     --cr-container-shadow: {
       box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
       height: 6px;