Make the position of 'n files selected' label synced with the width o…

…f navigation list.

BUG=402344
TEST=select some items, drag the separator for navigation list, and check that the 'n files selected' label is synced with the separator's position.

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

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

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

@@ -368,14 +368,11 @@ body.selecting .dialog-header {
 #cloud-import-details div {
   border: 0px 0px 1px 0px solid gray;
   padding: 10px;
-};
+}
 
 #files-selected-label {
   display: none;
-  /* TODO(fukino): Move dynamically with the navigation area's separator. */
-  left: 252px;
-  position: absolute;
-  top: 18px;
+  margin: 0 10px;
 }
 
 body.selecting #files-selected-label {
@@ -387,6 +384,10 @@ body.selecting #files-selected-label {
   display: none
 }
 
+#cancel-selection-button-wrapper {
+  width: 240px;  /* initial value, same as .dialog-navigation-list's width. */
+}
+
 #cancel-selection-button > core-icon {
   -webkit-margin-end: 6px;
 }

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

@@ -435,7 +435,9 @@ FileManager.prototype = /** @struct */ {
         this.commandHandler);
     this.toolbarController_ = new ToolbarController(
         this.ui_.cancelSelectionButton,
+        this.ui_.cancelSelectionButtonWrapper,
         this.ui_.filesSelectedLabel,
+        this.ui_.dialogNavigationList,
         this.selectionHandler_,
         this.directoryModel_.getFileListSelection());
 

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

@@ -7,21 +7,33 @@
  * status is changed, this class changes the view of toolbar. If cancel
  * selection button is pressed, this class clears the selection.
  * @param {!HTMLElement} cancelSelectionButton Button to cancel selection.
+ * @param {!HTMLElement} cancelSelectionButtonWrapper Wapper for the button,
+ *     which works as a spacer for the filesSelectionLabel.
  * @param {!HTMLElement} filesSelectedLabel Label to show how many files are
  *     selected.
+ * @param {!HTMLElement} navigationList Navigation list on the left pane. The
+ *     position of silesSelectedLabel depends on the navitaion list's width.
  * @param {!FileSelectionHandler} selectionHandler
  * @param {!cr.ui.ListSelectionModel|!cr.ui.ListSingleSelectionModel}
  *     selectionModel
  * @constructor
  * @struct
  */
 function ToolbarController(cancelSelectionButton,
+                           cancelSelectionButtonWrapper,
                            filesSelectedLabel,
+                           navigationList,
                            selectionHandler,
                            selectionModel) {
+  /** @private {!HTMLElement} */
+  this.cancelSelectionButtonWrapper_ = cancelSelectionButtonWrapper;
+
   /** @private {!HTMLElement} */
   this.filesSelectedLabel_ = filesSelectedLabel;
 
+  /** @private {!HTMLElement} */
+  this.navigationList_ = navigationList;
+
   /** @private {!FileSelectionHandler} */
   this.selectionHandler_ = selectionHandler;
 
@@ -34,6 +46,9 @@ function ToolbarController(cancelSelectionButton,
 
   cancelSelectionButton.addEventListener(
       'click', this.onCancelSelectionButtonClicked_.bind(this));
+
+  this.navigationList_.addEventListener(
+      'relayout', this.onNavigationListRelayout_.bind(this));
 }
 
 /**
@@ -73,3 +88,13 @@ ToolbarController.prototype.onSelectionChanged_ = function() {
 ToolbarController.prototype.onCancelSelectionButtonClicked_ = function() {
   this.selectionModel_.unselectAll();
 }
+
+/**
+ * Handles the relayout event occured on the navigation list.
+ * @private
+ */
+ToolbarController.prototype.onNavigationListRelayout_ = function() {
+  // Make the width of spacer same as the width of navigation list.
+  var navWidth = parseFloat(getComputedStyle(this.navigationList_).width);
+  this.cancelSelectionButtonWrapper_.style.width = navWidth + 'px';
+}

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

@@ -1123,5 +1123,5 @@ DirectoryTree.prototype.onListContentChanged_ = function() {
  * Updates the UI after the layout has changed.
  */
 DirectoryTree.prototype.relayout = function() {
-  cr.dispatchSimpleEvent(this, 'relayout');
+  cr.dispatchSimpleEvent(this, 'relayout', true);
 };

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

@@ -135,6 +135,14 @@ function FileManagerUI(element, launchParam) {
   this.cancelSelectionButton =
       queryRequiredElement(this.element, '#cancel-selection-button');
 
+  /**
+   * The wrapper for the toolbar button to cancel selection.
+   * @type {!HTMLElement}
+   * @const
+   */
+  this.cancelSelectionButtonWrapper =
+      queryRequiredElement(this.element, '#cancel-selection-button-wrapper');
+
   /**
    * The label showing how many files are selected.
    * @type {!HTMLElement}
@@ -143,6 +151,14 @@ function FileManagerUI(element, launchParam) {
   this.filesSelectedLabel =
       queryRequiredElement(this.element, '#files-selected-label');
 
+  /**
+   * The navigation list.
+   * @type {!HTMLElement}
+   * @const
+   */
+  this.dialogNavigationList =
+      queryRequiredElement(this.element, '.dialog-navigation-list');
+
   /**
    * Search box.
    * @type {!SearchBox}

ui/file_manager/file_manager/main.html

@@ -308,10 +308,12 @@
 
     <div class="dialog-header">
       <div id="location-breadcrumbs" class="breadcrumbs"></div>
-      <paper-button id="cancel-selection-button">
-        <core-icon icon="arrow-back" style="width:16px; height:16px"></core-icon>
-        <span i18n-content="CANCEL_SELECTION_BUTTON_LABEL"></span>
-      </paper-button>
+      <div id="cancel-selection-button-wrapper">
+        <paper-button id="cancel-selection-button">
+          <core-icon icon="arrow-back" style="width:16px; height:16px"></core-icon>
+          <span i18n-content="CANCEL_SELECTION_BUTTON_LABEL"></span>
+        </paper-button>
+      </div>
       <div id="files-selected-label"></div>
       <div class="spacer"></div>
       <button id="tasks" class="combobutton" menu="#tasks-menu"