Show the details panel when file manager is first opened...on an import...

Show the details panel when file manager is first opened...on an import location. Adjust width and position of details panel to avoid line-wrapping main line.

BUG=464562
TEST=manual

TBR=fukino  // for minor CSS tweaks

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

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

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

@@ -422,10 +422,10 @@ body.check-select #gear-button {
   border-radius: 2px;
   line-height: 1.5em;
   position: absolute;
-  right: 75px;  /* Positioned in relation to the cloud-import toolbar button */
+  right: 13px;  /* Positioned in relation to the cloud-import toolbar button */
   top: 38px;  /* Positioned just overlapping the top of the toolbar */
   transition: all 0.2s ease;
-  width: 250px;
+  width: 270px;
   z-index: 5;
 }
 

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

@@ -149,8 +149,16 @@ importer.ImportController.prototype.onVolumeUnmounted_ = function(volumeId) {
   this.checkState_();
 };
 
-/** @private */
-importer.ImportController.prototype.onDirectoryChanged_ = function() {
+/**
+ * @param {!Event} event
+ * @private
+ */
+importer.ImportController.prototype.onDirectoryChanged_ = function(event) {
+  if (!event.previousDirEntry &&
+      event.newDirEntry &&
+      importer.isMediaDirectory(event.newDirEntry, this.environment_)) {
+    this.commandWidget_.setDetailsVisible(true);
+  }
   this.scanManager_.clearSelectionScan();
   if (this.isCurrentDirectoryScannable_()) {
     this.checkState_(
@@ -411,6 +419,13 @@ importer.CommandWidget.prototype.addClickListener;
  */
 importer.CommandWidget.prototype.update;
 
+/**
+ * Directly sets the visibility of the details panel.
+ *
+ * @param {boolean} visible
+ */
+importer.CommandWidget.prototype.setDetailsVisible;
+
 /**
  * Toggles the visibility state of the details panel.
  */
@@ -503,7 +518,7 @@ importer.RuntimeCommandWidget = function() {
 importer.RuntimeCommandWidget.prototype.onKeyDown_ = function(event) {
   switch (util.getKeyModifiers(event) + event.keyIdentifier) {
     case 'U+001B':
-      this.setDetailsVisible_(false);
+      this.setDetailsVisible(false);
   }
 };
 
@@ -574,7 +589,7 @@ importer.RuntimeCommandWidget.prototype.onButtonClicked_ =
 
 /** @override */
 importer.RuntimeCommandWidget.prototype.toggleDetails = function() {
-    this.setDetailsVisible_(this.detailsPanel_.className === 'hidden');
+    this.setDetailsVisible(this.detailsPanel_.className === 'hidden');
 };
 
 /** @override */
@@ -585,9 +600,8 @@ importer.RuntimeCommandWidget.prototype.setDetailsBannerVisible =
 
 /**
  * @param {boolean} visible
- * @private
  */
-importer.RuntimeCommandWidget.prototype.setDetailsVisible_ = function(visible) {
+importer.RuntimeCommandWidget.prototype.setDetailsVisible = function(visible) {
   if (visible) {
     this.detailsPanel_.hidden = false;
 
@@ -620,7 +634,7 @@ importer.RuntimeCommandWidget.prototype.onDetailsTransitionEnd_ =
 /** @private */
 importer.RuntimeCommandWidget.prototype.onDetailsFocusLost_ =
     function() {
-  this.setDetailsVisible_(false);
+  this.setDetailsVisible(false);
 };
 
 /** @override */
@@ -628,7 +642,7 @@ importer.RuntimeCommandWidget.prototype.update =
     function(activityState, opt_scan) {
   switch(activityState) {
     case importer.ActivityState.HIDDEN:
-      this.setDetailsVisible_(false);
+      this.setDetailsVisible(false);
 
       this.panelButton_.disabled = true;
 
@@ -642,7 +656,7 @@ importer.RuntimeCommandWidget.prototype.update =
 
     case importer.ActivityState.IMPORTING:
       console.assert(!!opt_scan, 'Scan not defined, but is required.');
-      this.setDetailsVisible_(false);
+      this.setDetailsVisible(false);
 
       this.mainButton_.setAttribute('title', strf(
           'CLOUD_IMPORT_TOOLTIP_IMPORTING',
@@ -911,7 +925,7 @@ importer.ControllerEnvironment.prototype.addVolumeUnmountListener;
 /**
  * Installs an 'directory-changed' listener. Listener is called when
  * the directory changed.
- * @param {function()} listener
+ * @param {function(!Event)} listener
  */
 importer.ControllerEnvironment.prototype.addDirectoryChangedListener;
 

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

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/** @const {!Event} */
+var EMPTY_EVENT = new Event('directory-changed');
+
 /** @type {!MockVolumeManager} */
 var volumeManager;
 
@@ -78,7 +81,7 @@ function testClickToStartImport(callback) {
       new MockFileEntry(fileSystem, '/DCIM/photos0/IMG00001.jpg', {size: 0}));
 
   // First we need to force the controller into a scanning state.
-  environment.directoryChangedListener_();
+  environment.directoryChangedListener_(EMPTY_EVENT);
 
   var promise = widget.updateResolver.promise.then(
           function() {
@@ -110,7 +113,7 @@ function testVolumeUnmount_InvalidatesScans(callback) {
       ],
       '/DCIM');
 
-  environment.directoryChangedListener_();
+  environment.directoryChangedListener_(EMPTY_EVENT);
   var promise = widget.updateResolver.promise.then(
           function() {
             // Reset the promise so we can wait on a second widget update.
@@ -120,7 +123,7 @@ function testVolumeUnmount_InvalidatesScans(callback) {
             // A fresh new scan should be started.
             environment.simulateUnmount();
 
-            environment.directoryChangedListener_();
+            environment.directoryChangedListener_(EMPTY_EVENT);
             // Return the new promise, so subsequent "thens" only
             // fire once the widget has been updated again.
             return widget.updateResolver.promise;
@@ -143,10 +146,52 @@ function testDirectoryChange_TriggersUpdate(callback) {
       ],
       '/DCIM');
 
-  environment.directoryChangedListener_();
+  environment.directoryChangedListener_(EMPTY_EVENT);
   reportPromise(widget.updateResolver.promise, callback);
 }
 
+function testDirectoryChange_DetailsPanelVisibility_InitialChangeDir() {
+  var controller = createController(
+      VolumeManagerCommon.VolumeType.MTP,
+      'mtp-volume',
+      [
+        '/DCIM/',
+        '/DCIM/photos0/',
+        '/DCIM/photos0/IMG00001.jpg',
+      ],
+      '/DCIM');
+
+  var event = new Event('directory-changed');
+  event.newDirEntry = new MockDirectoryEntry(
+      new MockFileSystem('testFs'),
+      '/DCIM/');
+
+  environment.directoryChangedListener_(event);
+  assertTrue(widget.detailsVisible);
+}
+
+function testDirectoryChange_DetailsPanelVisibility_SubsequentChangeDir() {
+  var controller = createController(
+      VolumeManagerCommon.VolumeType.MTP,
+      'mtp-volume',
+      [
+        '/DCIM/',
+        '/DCIM/photos0/',
+        '/DCIM/photos0/IMG00001.jpg',
+      ],
+      '/DCIM');
+
+  var event = new Event('directory-changed');
+  event.newDirEntry = new MockDirectoryEntry(
+      new MockFileSystem('testFs'),
+      '/DCIM/');
+  // Any previous dir at all will skip the new window logic.
+  event.previousDirEntry = event.newDirEntry;
+
+  environment.directoryChangedListener_(event);
+  assertFalse(widget.detailsVisible);
+}
+
 function testSelectionChange_TriggersUpdate(callback) {
   var controller = createController(
       VolumeManagerCommon.VolumeType.MTP,
@@ -179,7 +224,7 @@ function testFinalizeScans_TriggersUpdate(callback) {
   mediaScanner.fileEntries.push(
       new MockFileEntry(fileSystem, '/DCIM/photos0/IMG00001.jpg', {size: 0}));
 
-  environment.directoryChangedListener_();  // initiates a scan.
+  environment.directoryChangedListener_(EMPTY_EVENT);  // initiates a scan.
   widget.resetPromises();
   mediaScanner.finalizeScans();
 
@@ -221,7 +266,7 @@ function testClickDestination_ShowsDestinationAfterImportStarted(callback) {
       new MockFileEntry(fileSystem, '/DCIM/photos0/IMG00001.jpg', {size: 0}));
 
   // First we need to force the controller into a scanning state.
-  environment.directoryChangedListener_();
+  environment.directoryChangedListener_(EMPTY_EVENT);
 
   var promise = widget.updateResolver.promise.then(
           function() {
@@ -363,7 +408,7 @@ TestControllerEnvironment = function(volumeInfo, directory) {
   /** @public {boolean} */
   this.isDriveMounted = true;
 
-  /** @private {number} */
+  /** @public {number} */
   this.freeStorageSpace = 123456789;  // bytes
 
   /** @public {!importer.Resolver} */
@@ -466,6 +511,9 @@ importer.TestCommandWidget = function() {
 
   /** @public {!importer.Resolver.<!importer.CommandUpdate>} */
   this.toggleDetailsResolver = new importer.Resolver();
+
+  /** @public {boolean} */
+  this.detailsVisible = false;
 };
 
 /** Resets the widget */
@@ -506,9 +554,15 @@ importer.TestCommandWidget.prototype.toggleDetails = function() {
   assertFalse(
       this.toggleDetailsResolver.settled,
       'Toggle details promise should not have been settled.');
+  this.setDetailsVisible(!this.detailsVisible);
   this.toggleDetailsResolver.resolve();
 };
 
+/** @override */
+importer.TestCommandWidget.prototype.setDetailsVisible = function(visible) {
+  this.detailsVisible = visible;
+};
+
 /** @override */
 importer.TestCommandWidget.prototype.setDetailsBannerVisible =
     function(visible) {