Files app: Add a toolbar button to show some context menu items.

This change will only add these items:
- Cut, Copy
- zip selection

"Available offline" is not refreshed in some cases.
"Get info" and "Rename" is not added by this change.
Those should be fixed by another change.

TEST=manually tested by check-select files and opening the menu

Bug: 740842
Change-Id: Ic074b3b38eddf5c1bd9d8ae162e5c0d24bb17c8e
Reviewed-on: https://chromium-review.googlesource.com/566768Reviewed-by: Naoki Fukino <fukino@chromium.org>
Commit-Queue: Tatsuhisa Yamaguchi <yamaguchi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486715}

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

@@ -433,6 +433,16 @@ body.check-select #gear-button {
   display: none;
 }
 
+#selection-menu-button > .icon {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/menu.png) 1x,
+      url(../images/files/ui/2x/menu.png) 2x);
+}
+
+body:not(.check-select) #selection-menu-button {
+  display: none;
+}
+
 .cloud-import-combo-button {
   height: 32px;
   margin: 8px;
@@ -1723,6 +1733,10 @@ cr-menu#file-context-menu > :not(hr) {
   -webkit-padding-end: 8px;
 }
 
+cr-menu#file-context-menu.toolbar-menu > .hide-on-toolbar {
+  display: none;
+}
+
 cr-menu.chrome-menu hr {
   color: transparent;
   font-size: 0;

ui/file_manager/file_manager/foreground/js/compiled_resources2.gyp

@@ -189,6 +189,7 @@
         'quick_view_uma',
         'scan_controller',
         'search_controller',
+        'selection_menu_controller',
         'sort_menu_controller',
         'spinner_controller',
         'task_controller',
@@ -503,6 +504,15 @@
       ],
       'includes': ['../../../compile_js2.gypi'],
     },
+    {
+      'target_name': 'selection_menu_controller',
+      'dependencies': [
+        '../elements/compiled_resources2.gyp:files_toggle_ripple',
+        'directory_model',
+        'file_manager_commands',
+      ],
+      'includes': ['../../../compile_js2.gypi'],
+    },
     {
       'target_name': 'share_client',
       'dependencies': [

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

@@ -216,6 +216,14 @@ function FileManager() {
    */
   this.gearMenuController_ = null;
 
+  /**
+   * Controller for the context menu opened by the action bar button in the
+   * check-select mode.
+   * @type {SelectionMenuController}
+   * @private
+   */
+  this.selectionMenuController_ = null;
+
   /**
    * Toolbar controller.
    * @type {ToolbarController}
@@ -554,6 +562,9 @@ FileManager.prototype = /** @struct */ {
         this.ui_.gearMenu,
         this.directoryModel_,
         this.commandHandler_);
+    this.selectionMenuController_ = new SelectionMenuController(
+        this.ui_.selectionMenuButton,
+        util.queryDecoratedElement('#file-context-menu', cr.ui.Menu));
     this.toolbarController_ = new ToolbarController(
         this.ui_.toolbar,
         this.ui_.dialogNavigationList,

ui/file_manager/file_manager/foreground/js/main_scripts.js

@@ -145,6 +145,7 @@
 // <include src="quick_view_uma.js">
 // <include src="scan_controller.js">
 // <include src="search_controller.js">
+// <include src="selection_menu_controller.js">
 // <include src="share_client.js">
 // <include src="spinner_controller.js">
 // <include src="task_controller.js">

ui/file_manager/file_manager/foreground/js/selection_menu_controller.js

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @param {!cr.ui.MenuButton} selectionMenuButton
+ * @param {!cr.ui.Menu} menu
+ * @constructor
+ * @struct
+ */
+function SelectionMenuController(selectionMenuButton, menu) {
+  /**
+   * @type {!FilesToggleRipple}
+   * @const
+   * @private
+   */
+  this.toggleRipple_ =
+      /** @type {!FilesToggleRipple} */ (
+          queryRequiredElement('files-toggle-ripple', selectionMenuButton));
+
+  /**
+   * @type {!cr.ui.Menu}
+   * @const
+   */
+  this.menu_ = menu;
+
+  selectionMenuButton.addEventListener('menushow', this.onShowMenu_.bind(this));
+  selectionMenuButton.addEventListener('menuhide', this.onHideMenu_.bind(this));
+}
+
+/**
+ * Class name to indicate if the menu was opened by the toolbar button or not.
+ * @type {string}
+ * @const
+ */
+SelectionMenuController.TOOLBAR_MENU = 'toolbar-menu';
+
+/**
+ * @private
+ */
+SelectionMenuController.prototype.onShowMenu_ = function() {
+  this.menu_.classList.toggle(SelectionMenuController.TOOLBAR_MENU, true);
+  this.toggleRipple_.activated = true;
+};
+
+/**
+ * @private
+ */
+SelectionMenuController.prototype.onHideMenu_ = function() {
+  this.menu_.classList.toggle(SelectionMenuController.TOOLBAR_MENU, false);
+  this.toggleRipple_.activated = false;
+};

ui/file_manager/file_manager/foreground/js/ui/actions_submenu.js

@@ -62,6 +62,7 @@ ActionsSubmenu.prototype.setActionsModel = function(actionsModel) {
   if (shareAction) {
     var menuItem = this.addMenuItem_({});
     menuItem.command = '#share';
+    menuItem.classList.toggle('hide-on-toolbar', true);
     delete remainingActions[ActionsModel.CommonActionId.SHARE];
   }
   util.queryDecoratedElement('#share', cr.ui.Command).canExecuteChange();

ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js

@@ -219,6 +219,14 @@ function FileManagerUI(providersModel, element, launchParam) {
    */
   this.gearMenu = new GearMenu(this.gearButton.menu);
 
+  /**
+   * The button to open context menu in the check-select mode.
+   * @type {!cr.ui.MenuButton}
+   * @const
+   */
+  this.selectionMenuButton =
+      util.queryDecoratedElement('#selection-menu-button', cr.ui.MenuButton);
+
   /**
    * Directory tree.
    * @type {DirectoryTree}

ui/file_manager/file_manager/main.html

@@ -173,10 +173,10 @@
     <cr-menu id="file-context-menu" class="chrome-menu files-menu"
              menu-item-selector="cr-menu-item,hr" showShortcuts>
       <cr-menu-item id="default-task-menu-item" command="#default-task"
-                visibleif="full-page" hidden></cr-menu-item>
+                visibleif="full-page" class="hide-on-toolbar" hidden></cr-menu-item>
       <cr-menu-item command="#open-with"
-                visibleif="full-page" hidden></cr-menu-item>
-      <hr id="tasks-separator" visibleif="full-page" hidden>
+                visibleif="full-page" class="hide-on-toolbar" hidden></cr-menu-item>
+      <hr id="tasks-separator" visibleif="full-page" class="hide-on-toolbar" hidden>
       <hr id="actions-separator" hidden>
       <cr-menu-item command="#cut" visibleif="full-page"></cr-menu-item>
       <cr-menu-item command="#copy" visibleif="full-page"></cr-menu-item>
@@ -185,12 +185,13 @@
       <hr visibleif="full-page">
       <cr-menu-item command="#get-info"></cr-menu-item>
       <cr-menu-item command="#rename"></cr-menu-item>
-      <cr-menu-item command="#delete" i18n-content="DELETE_BUTTON_LABEL"></cr-menu-item>
+      <cr-menu-item command="#delete" i18n-content="DELETE_BUTTON_LABEL"
+                class="hide-on-toolbar"></cr-menu-item>
       <cr-menu-item command="#zip-selection"></cr-menu-item>
       <cr-menu-item command="#set-wallpaper"></cr-menu-item>
-      <hr visibleif="saveas-file full-page">
-      <cr-menu-item command="#new-folder"
-                visibleif="saveas-file full-page"></cr-menu-item>
+      <hr visibleif="saveas-file full-page" class="hide-on-toolbar">
+      <cr-menu-item command="#new-folder" visibleif="saveas-file full-page"
+                class="hide-on-toolbar"></cr-menu-item>
     </cr-menu>
 
     <cr-menu id="roots-context-menu" class="chrome-menu files-menu"
@@ -380,6 +381,12 @@
         <files-toggle-ripple></files-toggle-ripple>
         <div class="icon"></div>
       </button>
+      <!-- TODO(yamaguchi): Set a proper tooltip. -->
+      <button id="selection-menu-button" class="icon-button" tabindex="19"
+              menu="#file-context-menu" aria-activedescendant="file-context-menu">
+        <files-toggle-ripple></files-toggle-ripple>
+        <div class="icon"></div>
+      </button>
     </div>
 
     <div id="cloud-import-details" class="hidden" hidden>