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}

10 files changed, 196 insertions, 3 deletions

diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index 45f806f..f83f14f 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/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,
diff --git a/ui/file_manager/file_manager/foreground/images/files/ui/2x/details_white.png b/ui/file_manager/file_manager/foreground/images/files/ui/2x/details_white.png
new file mode 100644
index 0000000..e5b8728
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/images/files/ui/2x/details_white.png
diff --git a/ui/file_manager/file_manager/foreground/images/files/ui/details_white.png b/ui/file_manager/file_manager/foreground/images/files/ui/details_white.png
new file mode 100644
index 0000000..7618185
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/images/files/ui/details_white.png
diff --git a/ui/file_manager/file_manager/foreground/js/app_state_controller.js b/ui/file_manager/file_manager/foreground/js/app_state_controller.js
index bfaa930..7df9810 100644
--- a/ui/file_manager/file_manager/foreground/js/app_state_controller.js
+++ b/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();
diff --git a/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp b/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp
index 5031555..9b9a5da 100644
--- a/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp
+++ b/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',
diff --git a/ui/file_manager/file_manager/foreground/js/main_scripts.js b/ui/file_manager/file_manager/foreground/js/main_scripts.js
index e826ffd..c7c905a 100644
--- a/ui/file_manager/file_manager/foreground/js/main_scripts.js
+++ b/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">
diff --git a/ui/file_manager/file_manager/foreground/js/main_window_component.js b/ui/file_manager/file_manager/foreground/js/main_window_component.js
index 0a1419e..12c83ca 100644
--- a/ui/file_manager/file_manager/foreground/js/main_window_component.js
+++ b/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));
 }
 
 /**
@@ -159,6 +163,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.
  *
  * @param {Event} event The click event.
@@ -236,6 +251,18 @@ MainWindowComponent.prototype.onToggleViewButtonClick_ = function(event) {
 };
 
 /**
+ * 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.
  * @private
diff --git a/ui/file_manager/file_manager/foreground/js/ui/details_container.js b/ui/file_manager/file_manager/foreground/js/ui/details_container.js
new file mode 100644
index 0000000..1d54bad
--- /dev/null
+++ b/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;
+};
diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
index 8f4db8a..4c04632 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
@@ -163,6 +163,23 @@ function FileManagerUI(providersModel, element, launchParam) {
       '#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}
    * @const
@@ -215,6 +232,12 @@ function FileManagerUI(providersModel, element, launchParam) {
   this.listContainer = null;
 
   /**
+   * Details container.
+   * @type {DetailsContainer}
+   */
+  this.detailsContainer = null;
+
+  /**
    * @type {!HTMLElement}
    */
   this.formatPanelError =
@@ -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;
 
@@ -447,6 +486,17 @@ FileManagerUI.prototype.setCurrentListType = function(listType) {
 };
 
 /**
+ * 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
  * default, other links do not open at all.
diff --git a/ui/file_manager/file_manager/main.html b/ui/file_manager/file_manager/main.html
index ca17199..3639d5a 100644
--- a/ui/file_manager/file_manager/main.html
+++ b/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">