[actionbar] Change selection-menu cr-button to button

The selection menu button was using 'cr-button', while all of the other
menu buttons on the action bar were using 'button' elements.

Styling for files-ng was added to our CSS targeting 'button' for some
background-color cases.

Changes the selection menu button to 'button' element so those styles
apply.

Fixes 2 integration tests to look for lack of 'display:none' on the
selection menu button, i.e. actually test for visibility.

Bug: 1067218
Change-Id: I6fc8050128ec42b9e743f8facf405281b9d9c013
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2143415
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#757751}

ui/file_manager/file_manager/main.html

@@ -444,14 +444,14 @@
           <files-toggle-ripple></files-toggle-ripple>
           <div class="icon"></div>
         </button>
-        <cr-button id="selection-menu-button" class="icon-button menu-button" tabindex="0"
+        <button id="selection-menu-button" class="icon-button menu-button" tabindex="0"
                 menu="#file-context-menu"
                 aria-label="$i18n{SELECTION_MENU_BUTTON_TOOLTIP}"
                 aria-activedescendant="file-context-menu"
                 has-tooltip hidden>
           <files-toggle-ripple></files-toggle-ripple>
           <div class="icon"></div>
-        </cr-button>
+        </button>
       </div>
     </div>
 

ui/file_manager/integration_tests/file_manager/quick_view.js

@@ -2725,17 +2725,19 @@
     const ctrlA = ['#file-list', 'a', true, false, false];
     await remoteCall.fakeKeyDown(appId, ...ctrlA);
 
+    const caller = getCaller();
+
     // Wait until the selection menu is visible.
-    function checkElementsDisplayFlex(elements) {
+    function checkElementsDisplayVisible(elements) {
       chrome.test.assertTrue(Array.isArray(elements));
-      if (elements.length == 0 || elements[0].styles.display !== 'flex') {
+      if (elements.length == 0 || elements[0].styles.display === 'none') {
         return pending(caller, 'Waiting for Selection Menu to be visible.');
       }
     }
 
     await repeatUntil(async () => {
       const elements = ['#selection-menu-button'];
-      return checkElementsDisplayFlex(await remoteCall.callRemoteTestUtil(
+      return checkElementsDisplayVisible(await remoteCall.callRemoteTestUtil(
           'deepQueryAllElements', appId, [elements, ['display']]));
     });
 
@@ -2764,7 +2766,6 @@
         '#file-context-menu:not([hidden]) [command="#get-info"]:not([hidden])');
 
     // Check: the Quick View dialog should be shown.
-    const caller = getCaller();
     await repeatUntil(async () => {
       const query = ['#quick-view', '#dialog[open]'];
       const elements = await remoteCall.callRemoteTestUtil(
@@ -2809,16 +2810,16 @@
     await remoteCall.fakeKeyDown(appId, ...ctrlA);
 
     // Wait until the selection menu is visible.
-    function checkElementsDisplayFlex(elements) {
+    function checkElementsDisplayVisible(elements) {
       chrome.test.assertTrue(Array.isArray(elements));
-      if (elements.length == 0 || elements[0].styles.display !== 'flex') {
+      if (elements.length == 0 || elements[0].styles.display === 'none') {
         return pending(caller, 'Waiting for Selection Menu to be visible.');
       }
     }
 
     await repeatUntil(async () => {
       const elements = ['#selection-menu-button'];
-      return checkElementsDisplayFlex(await remoteCall.callRemoteTestUtil(
+      return checkElementsDisplayVisible(await remoteCall.callRemoteTestUtil(
           'deepQueryAllElements', appId, [elements, ['display']]));
     });