[breadcrumb] Disable inactive <button> CSS hover effects

When the pointer is down, anywhere in the app, a hover over breadcrumb
<button> shows its :hover effect, even though the user cannot interact
with the <button>, since the user has mousedown-ed on some other files
app element or <button>.

We should not show a :hover effect in this case, since it suggests the
<button> is interactive even though it is not. Use the global pointer-
active detector added in CL:2111810 to block the :hover effects on any
:not(:active) breadcrumb <button>.

Bug: 1062902, 1035691
Change-Id: I96d399d22f92d93ae2249027ad4ce9b70e97f802
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2112173Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#752690}

ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js

@@ -101,10 +101,15 @@ const breadCrumbTemplate = `
       background-color: rgba(0, 0, 0, 12%);
     }
 
-    button:not([disabled]):hover {
+    button:not([disabled]):not(:active):hover {
       background-color: rgba(0, 0, 0, 4%);
     }
 
+    :host-context(:root.pointer-active) button:not(:active):hover {
+      background-color: unset;
+      cursor: default;
+    }
+
     button[id]:focus, button[elider]:focus {
       background-color: unset;
       border: 1px solid var(--google-blue-600);