Implement a stub cloud import banner.

This CL adds a stub cloud import banner shown only on DCIM directories on
volumes eligible for import.

TEST=Tested manually.
BUG=451658

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

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

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -114,3 +114,8 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ThumbnailLoader) {
   RunTest(base::FilePath(
       FILE_PATH_LITERAL("foreground/js/thumbnail_loader_unittest.html")));
 }
+
+IN_PROC_BROWSER_TEST_F(FileManagerJsTest, Banners) {
+  RunTest(base::FilePath(
+      FILE_PATH_LITERAL("foreground/js/ui/banners_unittest.html")));
+}

ui/file_manager/file_manager/background/js/mock_volume_manager.js

@@ -179,7 +179,7 @@ MockVolumeManagerWrapper.prototype.createVolumeInfo =
  */
 MockVolumeManagerWrapper.prototype.getVolumeInfo = function(entry) {
   for (var i = 0; i < this.volumeInfoList.length; i++) {
-    if (this.volumeInfoList.item(i).volumeId === entry.volumeId)
+    if (this.volumeInfoList.item(i).volumeId === entry.filesystem.name)
       return this.volumeInfoList.item(i);
   }
   return null;

ui/file_manager/file_manager/common/js/unittest_util.js

@@ -174,3 +174,50 @@ MockAPIEvent.prototype.dispatch = function(var_args) {
     this.listeners_[i].apply(null, arguments);
   }
 };
+
+/**
+ * Stubs the chrome.storage API.
+ * @construct
+ * @struct
+ */
+function MockChromeStorageAPI() {
+  /** @type {Object<string, ?>} */
+  this.state = {};
+
+  window.chrome = window.chrome || {};
+  window.chrome.runtime = window.chrome.runtime || {};  // For lastError.
+  window.chrome.storage = {
+    local: {
+      get: this.get_.bind(this),
+      set: this.set_.bind(this)
+    }
+  };
+}
+
+/**
+ * @param {Array<string>|string} keys
+ * @param {function(Object.<string, ?>)} callback
+ * @private
+ */
+MockChromeStorageAPI.prototype.get_ = function(keys, callback) {
+  var keyArray = keys instanceof Array ? keys : [keys];
+  var result = {};
+  for (var key in keys) {
+    if (key in this.state)
+      result[key] = this.state[key];
+  }
+  callback(result);
+};
+
+/**
+ * @param {Object.<string, ?>} values
+ * @param {function()=} opt_callback
+ * @private
+ */
+MockChromeStorageAPI.prototype.set_ = function(values, opt_callback) {
+  for (var key in values) {
+    this.state[key] = values[key];
+  }
+  if (opt_callback)
+    opt_callback();
+};

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

@@ -1801,6 +1801,15 @@ list.autocomplete-suggestions > [lead] > div.detail-text em {
   visibility: hidden;
 }
 
+#cloud-import-banner {
+  background: #2196f3;
+  color: white;
+  display: flex;
+  flex: 0 0 14px;
+  font-size; 14px;
+  padding: 20px 15px;
+}
+
 .text-measure {
   pointer-events: none;
   position: absolute;

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

@@ -8,7 +8,15 @@
  * @extends {cr.EventTarget}
  */
 function MockDirectoryModel() {
+  /**
+   * @private {!MockFileFilter}
+   */
   this.fileFilter_ = new MockFileFilter();
+
+  /**
+   * @private {MockDirectoryEntry}
+   */
+  this.currentEntry_ = null;
 }
 
 /**
@@ -24,6 +32,30 @@ MockDirectoryModel.prototype.getFileFilter = function() {
   return this.fileFilter_;
 };
 
+/**
+ * @return {MockDirectoryEntry}
+ */
+MockDirectoryModel.prototype.getCurrentDirEntry = function() {
+  return this.currentEntry_;
+};
+
+/**
+ * @param {MockDirectoryEntry} entry
+ * @return {Promise}
+ */
+MockDirectoryModel.prototype.navigateToMockEntry = function(entry) {
+  return new Promise(function(resolve, reject) {
+    var event = new Event('directory-changed');
+    event.previousDirEntry = this.currentEntry_;
+    event.newDirEntry = entry;
+    event.volumeChanged = this.currentEntry_ &&
+        util.isSameFileSystem(this.currentEntry_, entry);
+    this.currentEntry_ = entry;
+    this.dispatchEvent(event);
+    resolve();
+  }.bind(this));
+};
+
 /**
  * Mock class for FileFilter.
  * @constructor

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

@@ -2,10 +2,98 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * Manages showing and hiding the banner when needed.
+ *
+ * @param {DirectoryModel} directoryModel
+ * @param {VolumeManagerWrapper} volumeManager
+ * @constructor
+ * @struct
+ */
+function CloudImportBanner(directoryModel, volumeManager) {
+  this.directoryModel_ = directoryModel;
+  this.volumeManager_ = volumeManager;
+
+  /**
+   * @private {Element}
+   */
+  this.banner_ = document.querySelector('#cloud-import-banner');
+
+  /**
+   * @private {Element}
+   */
+  this.closeButton_ = this.banner_.querySelector('#cloud-import-banner-close');
+
+  /**
+   * @private {boolean}
+   */
+  this.dismissed_ = false;
+
+  // Check whether the dialog has ever been dismissed. If no, then initialize
+  // the banner.
+  chrome.storage.local.get(CloudImportBanner.DISMISSED_KEY,
+      /**
+       * @param {Object.<string, ?>} values
+       * @this {CloudImportBanner}
+       */
+      function(values) {
+        if (chrome.runtime.lastError)
+          return;
+        this.dismissed_ = !!values[CloudImportBanner.DISMISSED_KEY];
+
+        if (this.dismissed_)
+          return;
+
+        // Add event listeners.
+        this.closeButton_.addEventListener('click', this.onClose_.bind(this));
+        this.directoryModel_.addEventListener('directory-changed',
+            this.onDirectoryChanged_.bind(this));
+
+        // Maybe show the dialog for the current directory.
+        this.determineVisibility_();
+      }.bind(this));
+};
+
+/**
+ * @const {string}
+ */
+CloudImportBanner.DISMISSED_KEY = 'cloud-import-banner-dismissed';
+
+/**
+ * @param {Event} event
+ * @private
+ */
+CloudImportBanner.prototype.onClose_ = function(event) {
+  this.banner_.hidden = true;
+  this.dismissed_ = true;
+
+  // Never show up the banner again.
+  var values = {};
+  values[CloudImportBanner.DISMISSED_KEY] = true;
+  chrome.storage.local.set(values);
+};
+
+/**
+ * @param {Event} event
+ * @private
+ */
+CloudImportBanner.prototype.onDirectoryChanged_ = function(event) {
+  this.determineVisibility_();
+};
+
+/**
+ * @private
+ */
+CloudImportBanner.prototype.determineVisibility_ = function() {
+  this.banner_.hidden = this.dismissed_ || !importer.isMediaDirectory(
+      this.directoryModel_.getCurrentDirEntry(), this.volumeManager_);
+};
+
 /**
  * Responsible for showing following banners in the file list.
  *  - WelcomeBanner
  *  - AuthFailBanner
+ *  - CloudImportBanner
  * @param {DirectoryModel} directoryModel The model.
  * @param {VolumeManagerWrapper} volumeManager The manager.
  * @param {Document} document HTML document.
@@ -48,6 +136,7 @@ function Banners(directoryModel, volumeManager, document, showOffers) {
             parseInt(values[WARNING_DISMISSED_KEY], 10) || 0;
       }.bind(this));
 
+  // Authentication failed banner.
   this.authFailedBanner_ =
       this.document_.querySelector('#drive-auth-failed-warning');
   var authFailedText = this.authFailedBanner_.querySelector('.drive-text');
@@ -57,6 +146,18 @@ function Banners(directoryModel, volumeManager, document, showOffers) {
     e.preventDefault();
   });
   this.maybeShowAuthFailBanner_();
+
+  // Cloud import banner.
+  this.cloudImportBanner_ = null;
+  importer.importEnabled().then(
+      /**
+       * @param {boolean} enabled
+       * @this {CloudImportBanner}
+       */
+      function(enabled) {
+        this.cloudImportBanner_ = new CloudImportBanner(
+            directoryModel, volumeManager);
+      }.bind(this));
 }
 
 /**

ui/file_manager/file_manager/foreground/js/ui/banners_unittest.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- Copyright 2015 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.
+  -->
+
+<html>
+<body>
+  <script src="../../../../../../ui/webui/resources/js/cr.js"></script>
+  <script src="../../../../../../ui/webui/resources/js/cr/event_target.js"></script>
+  <script src="../../../../../../ui/webui/resources/js/cr/ui.js"></script>
+  <script src="../../../../../../ui/webui/resources/js/cr/ui/array_data_model.js"></script>
+  <script src="../../../../../../ui/webui/resources/js/load_time_data.js"></script>
+
+  <script src="../../../common/js/async_util.js"></script>
+  <script src="../../../common/js/mock_entry.js"></script>
+  <script src="../../../common/js/unittest_util.js"></script>
+  <script src="../../../common/js/util.js"></script>
+  <script src="../../../common/js/volume_manager_common.js"></script>
+  <script src="../../../common/js/importer_common.js"></script>
+  <script src="../../../background/js/mock_volume_manager.js"></script>
+  <script src="../../../background/js/volume_manager.js"></script>
+  <script src="../mock_directory_model.js"></script>
+  <script src="banners.js"></script>
+
+  <script src="banners_unittest.js"></script>
+
+  <!-- Stub DOM structure for the banner. -->
+  <div id="cloud-import-banner" hidden>
+    <div id="cloud-import-banner-close"></div>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,88 @@
+// Copyright 2015 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.
+
+loadTimeData.data = {
+  DOWNLOADS_DIRECTORY_LABEL: 'Downloads',
+  DRIVE_DIRECTORY_LABEL: 'Google Drive',
+  DRIVE_MY_DRIVE_LABEL: 'My Drive',
+  DRIVE_OFFLINE_COLLECTION_LABEL: 'Offline',
+  DRIVE_SHARED_WITH_ME_COLLECTION_LABEL: 'Shared with me',
+  DRIVE_RECENT_COLLECTION_LABEL: 'Recent',
+  REMOVABLE_DIRECTORY_LABEL: 'External Storage',
+  ARCHIVE_DIRECTORY_LABEL: 'Archives'
+};
+
+/** @type {!MockVolumeManager|undefined} */
+var volumeManager;
+
+/** @type {!MockDirectoryModel|undefined} */
+var directoryModel;
+
+/** @type {!MockChromeStorageAPI|undefined} */
+var storageAPI;
+
+/** @type {!MockDirectoryEntyr|undefined} */
+var mtpDcimEntry;
+
+/** @type {!MockDirectoryEntry|undefined} */
+var downloadsEntry;
+
+/** @type {!CloudImportBanner|undefined} */
+var cloudImportBanner;
+
+/** @type {!Element|undefined} */
+var cloudImportBannerDiv;
+
+/** @type {!Element|undefined} */
+var cloudImportBannerCloseDiv;
+
+function setUp() {
+  volumeManager = new MockVolumeManagerWrapper();
+  directoryModel = new MockDirectoryModel();
+  storageAPI = new MockChromeStorageAPI();
+
+  var mtpVolumeInfo = volumeManager.createVolumeInfo(
+      VolumeManagerCommon.VolumeType.MTP, 'mtp:test', 'Magic Space Phone');
+  mtpDcimEntry = new MockDirectoryEntry(mtpVolumeInfo.fileSystem, '/DCIM');
+  downloadsEntry = new MockDirectoryEntry(
+      volumeManager.getCurrentProfileVolumeInfo(
+          VolumeManagerCommon.VolumeType.DOWNLOADS),
+      '/hello-world');
+
+  cloudImportBanner = new CloudImportBanner(directoryModel, volumeManager);
+  cloudImportBannerDiv = document.querySelector('#cloud-import-banner');
+  cloudImportBannerCloseDiv = document.querySelector(
+      '#cloud-import-banner-close');
+}
+
+function testIfCloudImportBannerOnDirectoryChanged(callback) {
+  assertTrue(cloudImportBannerDiv.hidden);
+  reportPromise(directoryModel.navigateToMockEntry(mtpDcimEntry)
+      .then(function() {
+        assertFalse(cloudImportBannerDiv.hidden);
+        return directoryModel.navigateToMockEntry(downloadsEntry);
+      })
+      .then(function() {
+        assertTrue(cloudImportBannerDiv.hidden);
+      }), callback);
+}
+
+function testIfCloudImportBannerDiscard(callback) {
+  assertTrue(cloudImportBannerDiv.hidden);
+  reportPromise(directoryModel.navigateToMockEntry(mtpDcimEntry)
+      .then(function() {
+        assertFalse(cloudImportBannerDiv.hidden);
+        cloudImportBannerCloseDiv.click();
+      })
+      .then(function() {
+        assertTrue(cloudImportBannerDiv.hidden)
+        // Go back to downloads, and again to an eligible directory.
+        return directoryModel.navigateToMockEntry(downloadsEntry).then(
+            directoryModel.navigateToMockEntry(mtpDcimEntry));
+      })
+      .then(function() {
+        // Should not show up.
+        assertTrue(cloudImportBannerDiv.hidden);
+      }), callback);
+}

ui/file_manager/file_manager/main.html

@@ -365,6 +365,11 @@
                 <div class="drive-text" id="drive-auth-failed-warning-text"></div>
               </div>
               <div class="downloads-warning" hidden></div>
+              <div id="cloud-import-banner" hidden>
+                <!-- TODO(mtomasz): Replace with final contents. -->
+                <a id="cloud-import-banner-close" class="cr-dialog-close"></a>
+                Welcome to the new epic photo importer!
+              </div>
               <div id="list-container">
                 <div class="detail-table" id="detail-table" tabindex="5" autofocus>
                 </div>