[actionbar] Inhibit hover color when menu is shown

The action icon buttons and open button have an active color when the
menu is shown - suppresses the background color on hover when the
'menu-shown' attribute is set.

Add a TODO about the placement of :focus.

Bug: 1061819
Change-Id: I70cc84784f1e8025f2dcc064c3ce52ca936add66
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2111513
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751963}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -554,6 +554,15 @@ body.check-select .dialog-header:not(.files-ng) cr-button {
   background-color: rgba(0, 0, 0, 12%);
 }
 
+.dialog-header.files-ng button:not([menu-shown]):not(:active):hover {
+  background-color: rgba(0, 0, 0, 4%);
+}
+
+.dialog-header.files-ng button:active {
+  background-color: rgba(0, 0, 0, 12%);
+}
+
+/* TODO(adanilo): put the :focus at the end for consistency. */
 .dialog-header.files-ng cr-button:focus:not(:active),
 .dialog-header.files-ng button:focus:not(:active) {
   border: 1px solid var(--google-blue-600);
@@ -617,10 +626,6 @@ body.check-select .dialog-header
   position: relative;
 }
 
-.dialog-header.files-ng button.menu-button:hover {
-  background-color: rgba(0, 0, 0, 4%);
-}
-
 .dialog-header button.icon-button > iron-icon {
   margin: 8px;
 }