This patch just introduces details panel(just empty) & details button.

It's under development, so please pass --enable-files-details-panel as an extra argument to activate this feature.

BUG=274045

Review URL: https://codereview.chromium.org/1762623002

Cr-Commit-Position: refs/heads/master@{#379718}

chrome/app/chromeos_strings.grdp

@@ -998,6 +998,9 @@ Press any key to continue exploring.
   <message name="IDS_FILE_BROWSER_SORT_BUTTON_TOOLTIP" desc="Tooltip for the button which provides sort options in Files.app.">
     Sort options
   </message>
+  <message name="IDS_FILE_BROWSER_DETAIL_BUTTON_TOOLTIP" desc="Tooltip for the detals button to show the details panel which provides information of selected files in Files.app.">
+    View details
+  </message>
   <message name="IDS_FILE_BROWSER_GEAR_BUTTON_TOOLTIP" desc="Tooltip for the gear button in Files.app.">
     Settings
   </message>

chrome/browser/chromeos/extensions/file_manager/private_api_strings.cc

@@ -456,6 +456,7 @@ bool FileManagerPrivateGetStringsFunction::RunSync() {
   SET_STRING("FORMAT_DEVICE_BUTTON_LABEL",
              IDS_FILE_BROWSER_FORMAT_DEVICE_BUTTON_LABEL);
   SET_STRING("SORT_BUTTON_TOOLTIP", IDS_FILE_BROWSER_SORT_BUTTON_TOOLTIP);
+  SET_STRING("DETAIL_BUTTON_TOOLTIP", IDS_FILE_BROWSER_DETAIL_BUTTON_TOOLTIP);
   SET_STRING("GEAR_BUTTON_TOOLTIP", IDS_FILE_BROWSER_GEAR_BUTTON_TOOLTIP);
   SET_STRING("HOSTED_OFFLINE_MESSAGE", IDS_FILE_BROWSER_HOSTED_OFFLINE_MESSAGE);
   SET_STRING("HOSTED_OFFLINE_MESSAGE_PLURAL",

chromeos/chromeos_switches.cc

@@ -119,6 +119,9 @@ const char kEnableArc[] = "enable-arc";
 // locate the device.
 const char kEnableConsumerManagement[] = "enable-consumer-management";
 
+// Enables details panel in Files app.
+const char kEnableFilesDetailsPanel[] = "enable-files-details-panel";
+
 // If this switch is set, the device cannot be remotely disabled by its owner.
 const char kDisableDeviceDisabling[] = "disable-device-disabling";
 

chromeos/chromeos_switches.h

@@ -61,6 +61,7 @@ CHROMEOS_EXPORT extern const char kEafePath[];
 CHROMEOS_EXPORT extern const char kEnableArc[];
 CHROMEOS_EXPORT extern const char kEnableConsumerManagement[];
 CHROMEOS_EXPORT extern const char kEnableExtensionAssetsSharing[];
+CHROMEOS_EXPORT extern const char kEnableFilesDetailsPanel[];
 CHROMEOS_EXPORT extern const char kEnableFirstRunUITransitions[];
 CHROMEOS_EXPORT extern const char kEnableImeMenu[];
 CHROMEOS_EXPORT extern const char kEnableKioskMode[];

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

@@ -124,6 +124,24 @@ a:focus {
   flex-direction: column;
 }
 
+/* Details pane */
+.details-container {
+  background-color: rgb(250, 250, 250);
+  flex: none;
+  max-width: 30%;
+  min-width: 100px;
+  overflow: hidden;
+  position: relative;
+}
+
+#list-details-splitter:not([activated]) {
+  display: none;
+}
+
+.details-container:not([activated]) {
+  display: none;
+}
+
 /* Directory tree at the left. */
 .dialog-navigation-list {
   -webkit-border-end: 1px solid rgba(0, 0, 0, 0.15);
@@ -449,6 +467,24 @@ body.check-select #sort-button {
   display: none;
 }
 
+#details-button {
+  /**
+   * TODO(ryoh): This should be removed after we finally implement details
+   *     panel.
+   */
+  display: none;
+}
+
+#details-button > .icon {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/details_white.png) 1x,
+      url(../images/files/ui/2x/details_white.png) 2x);
+}
+
+body.check-select #details-button {
+  display: none;
+}
+
 #gear-button > .icon {
   background-image: -webkit-image-set(
       url(../images/files/ui/menu_white.png) 1x,

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

@@ -79,6 +79,7 @@ AppStateController.prototype.initialize = function(ui, directoryModel) {
   // Restore preferences.
   this.ui_.setCurrentListType(
       this.viewOptions_.listType || ListContainer.ListType.DETAIL);
+  this.ui_.setDetailsVisibility(!!this.viewOptions_.detailsVisibility);
   this.directoryModel_.getFileList().sort(
       this.viewOptions_.sortField || 'modificationTime',
       this.viewOptions_.sortDirection || 'desc');
@@ -97,7 +98,12 @@ AppStateController.prototype.saveViewOptions = function() {
     sortField: sortStatus.field,
     sortDirection: sortStatus.direction,
     columnConfig: {},
-    listType: this.ui_.listContainer.currentListType
+    listType: this.ui_.listContainer.currentListType,
+    /**
+     * TODO(ryoh): Simplify this line after we finally implement details panel.
+     */
+    detailsVisibility: this.ui_.detailsContainer &&
+        this.ui_.detailsContainer.visible || false
   };
   var cm = this.ui_.listContainer.table.columnModel;
   prefs.columnConfig = cm.exportColumnConfig();

ui/file_manager/file_manager/foreground/js/compiled_resources.gyp

@@ -124,6 +124,7 @@
           './ui/actions_submenu.js',
           './ui/banners.js',
           './ui/default_task_dialog.js',
+          './ui/details_container.js',
           './ui/dialog_footer.js',
           './ui/directory_tree.js',
           './ui/drag_selector.js',

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

@@ -140,6 +140,7 @@
 //<include src="ui/actions_submenu.js">
 //<include src="ui/banners.js" >
 //<include src="ui/default_task_dialog.js">
+//<include src="ui/details_container.js">
 //<include src="ui/dialog_footer.js">
 //<include src="ui/directory_tree.js">
 //<include src="ui/drag_selector.js">

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

@@ -124,6 +124,8 @@ function MainWindowComponent(
       'pathclick', this.onBreadcrumbClick_.bind(this));
   ui.toggleViewButton.addEventListener(
       'click', this.onToggleViewButtonClick_.bind(this));
+  ui.detailsButton.addEventListener(
+      'click', this.onDetailsButtonClick_.bind(this));
   directoryModel.addEventListener(
       'directory-changed', this.onDirectoryChanged_.bind(this));
   volumeManager.addEventListener(
@@ -132,6 +134,8 @@ function MainWindowComponent(
   this.onDriveConnectionChanged_();
   document.addEventListener('keydown', this.onKeyDown_.bind(this));
   document.addEventListener('keyup', this.onKeyUp_.bind(this));
+  selectionHandler.addEventListener('change',
+      this.onFileSelectionChanged_.bind(this));
 }
 
 /**
@@ -158,6 +162,17 @@ MainWindowComponent.prototype.onFileListFocus_ = function() {
   }
 };
 
+/**
+ * Handles file selection event.
+ *
+ * @private
+ */
+MainWindowComponent.prototype.onFileSelectionChanged_ = function(event) {
+  if (this.ui_.detailsContainer) {
+    this.ui_.detailsContainer.onFileSelectionChanged(event);
+  }
+};
+
 /**
  * Handles mouse click or tap.
  *
@@ -235,6 +250,18 @@ MainWindowComponent.prototype.onToggleViewButtonClick_ = function(event) {
   this.ui_.listContainer.focus();
 };
 
+/**
+ * Handles click event on the toggle-view button.
+ * @param {Event} event Click event.
+ * @private
+ */
+MainWindowComponent.prototype.onDetailsButtonClick_ = function(event) {
+  var visible = this.ui_.detailsContainer.visible;
+  this.ui_.setDetailsVisibility(!visible);
+  this.appStateController_.saveViewOptions();
+  this.ui_.listContainer.focus();
+};
+
 /**
  * KeyDown event handler for the document.
  * @param {Event} event Key event.

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

@@ -0,0 +1,63 @@
+// Copyright 2016 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 {!HTMLElement} element
+ * @param {!Element} splitter
+ * @param {!Element} button
+ * @param {!FilesToggleRipple} toggleRipple
+ * @constructor
+ * @struct
+ */
+function DetailsContainer(element, splitter, button, toggleRipple) {
+  /**
+   * Container element.
+   * @private {!HTMLElement}
+   * @const
+   */
+  this.element_ = element;
+  /**
+   * Splitter element between the file list and the details panel.
+   * @private {!Element}
+   * @const
+   */
+  this.splitter_ = splitter;
+  /**
+   * "View details" button element.
+   * @private {!Element}
+   * @const
+   */
+  this.button_ = button;
+  /**
+   * Ripple element of "View details" button.
+   * @private {!Element}
+   * @const
+   */
+  this.toggleRipple_ = toggleRipple;
+  /**
+   * @type {boolean}
+   */
+  this.visible = false;
+  this.setVisibility(false);
+}
+
+DetailsContainer.prototype.onFileSelectionChanged = function(event) {
+  var selection = event.target.selection;
+};
+
+/**
+ * Sets the details panel visibility
+ * @param {boolean} visibility True if the details panel is visible.
+ */
+DetailsContainer.prototype.setVisibility = function(visibility) {
+  if (visibility) {
+    this.splitter_.setAttribute('activated', '');
+    this.element_.setAttribute('activated', '');
+  } else {
+    this.splitter_.removeAttribute('activated');
+    this.element_.removeAttribute('activated');
+  }
+  this.visible = visibility;
+  this.toggleRipple_.activated = visibility;
+};

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

@@ -162,6 +162,23 @@ function FileManagerUI(providersModel, element, launchParam) {
   this.sortButton = util.queryDecoratedElement(
       '#sort-button', cr.ui.MenuButton);
 
+  /**
+   * The button to open the details panel.
+   * @type {!Element}
+   * @const
+   */
+  this.detailsButton = queryRequiredElement(
+      '#details-button', this.element);
+
+  /**
+   * Ripple effect of details button.
+   * @private {!FilesToggleRipple}
+   * @const
+   */
+  this.detailsButtonToggleRipple_ =
+      /** @type {!FilesToggleRipple} */ (queryRequiredElement(
+          'files-toggle-ripple', this.detailsButton));
+
   /**
    * Ripple effect of sort button.
    * @private {!FilesToggleRipple}
@@ -214,6 +231,12 @@ function FileManagerUI(providersModel, element, launchParam) {
    */
   this.listContainer = null;
 
+  /**
+   * Details container.
+   * @type {DetailsContainer}
+   */
+  this.detailsContainer = null;
+
   /**
    * @type {!HTMLElement}
    */
@@ -327,6 +350,22 @@ FileManagerUI.prototype.initAdditionalUI = function(
   this.decorateSplitter_(
       queryRequiredElement('#navigation-list-splitter', this.element));
 
+  // Details container.
+  chrome.commandLinePrivate.hasSwitch('enable-files-details-panel',
+      function(enabled) {
+    if (enabled) {
+      this.detailsButton.style.display = 'block';
+      var listDetailsSplitter =
+          queryRequiredElement('#list-details-splitter', this.element);
+      this.decorateSplitter_(listDetailsSplitter);
+      this.detailsContainer = new DetailsContainer(
+          queryRequiredElement('#details-container', this.element),
+          listDetailsSplitter,
+          this.detailsButton,
+          this.detailsButtonToggleRipple_);
+    }
+  }.bind(this));
+
   // Location line.
   this.locationLine = locationLine;
 
@@ -446,6 +485,17 @@ FileManagerUI.prototype.setCurrentListType = function(listType) {
   this.relayout();
 };
 
+/**
+ * Sets the details panel visibility
+ * @param {boolean} visibility True if the details panel is visible.
+ */
+FileManagerUI.prototype.setDetailsVisibility = function(visibility) {
+  if (this.detailsContainer) {
+    this.detailsContainer.setVisibility(visibility);
+    this.relayout();
+  }
+};
+
 /**
  * Overrides default handling for clicks on hyperlinks.
  * In a packaged apps links with targer='_blank' open in a new tab by

ui/file_manager/file_manager/main.html

@@ -309,7 +309,13 @@
         <files-toggle-ripple></files-toggle-ripple>
         <div class="icon"></div>
       </button>
-      <button id="gear-button" class="icon-button" tabindex="18"
+      <button id="details-button" class="icon-button" tabindex="18"
+              i18n-values="aria-label:DETAIL_BUTTON_TOOLTIP"
+              has-tooltip>
+        <files-toggle-ripple></files-toggle-ripple>
+        <div class="icon"></div>
+      </button>
+      <button id="gear-button" class="icon-button" tabindex="19"
               menu="#gear-menu"
               i18n-values="aria-label:GEAR_BUTTON_TOOLTIP"
               aria-activedescendant="gear-menu"
@@ -342,7 +348,7 @@
     <div class="dialog-container">
       <div class="dialog-navigation-list">
         <div class="dialog-navigation-list-contents">
-          <tree id="directory-tree" tabindex="19"></tree>
+          <tree id="directory-tree" tabindex="20"></tree>
         </div>
         <div class="dialog-navigation-list-footer">
           <div id="progress-center" hidden>
@@ -403,6 +409,9 @@
           </div>
         </div>
       </div>
+      <div class="splitter" id="list-details-splitter"></div>
+      <div id="details-container" class="details-container">
+      </div>
     </div>
     <div class="dialog-footer progressable" tabindex="-1"
          visibleif="saveas-file open-file open-multi-file folder upload-folder">