[File Manager] Welcome to Google Docs banner

chrome/browser/resources/file_manager/js/file_manager.js

Index: chrome/browser/resources/file_manager/js/file_manager.js
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index 3a35ebbca9b4a9e14f399ee99cbbf360ffd328b5..919b354bdfa1621e19eef19870514130bac1b74e 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -70,6 +70,12 @@ FileManager.prototype = {
       'answer.py?hl=en&answer=1061547';
 
   /**
+   * Location of the FAQ about Google Docs.
+   */
+  var GOOGLE_DRIVE_FAQ_URL =
+      'https://support.google.com/chromeos/?hl=en&p=filemanager_drive';
+
+  /**
   * Location of the FAQ about the file actions.
   */
   var NO_ACTION_FOR_FILE_URL = 'http://support.google.com/chromeos/bin/' +
@@ -721,6 +727,8 @@ FileManager.prototype = {
         str('ENABLE_GDATA') == '1',
         this.metadataCache_);
 
+    this.initGDataWelcomeBanners_();
+
     var dataModel = this.directoryModel_.getFileList();
     var collator = this.collator_;
     // TODO(dgozman): refactor comparison functions together with
@@ -845,7 +853,7 @@ FileManager.prototype = {
 
     var loading = this.document_.createElement('div');
     loading.className = 'gdata loading';
-    loading.textContent = strf('GDATA_LOADING', str('GDATA_PRODUCT_NAME'));
+    loading.textContent = str('GDATA_LOADING');
     this.unmountedPanel_.appendChild(loading);
 
     var spinnerBox = this.document_.createElement('div');
@@ -868,14 +876,12 @@ FileManager.prototype = {
     this.unmountedPanel_.appendChild(retry);
 
     var learnMore = this.document_.createElement('div');
-    learnMore.className = 'gdata learn-more';
+    learnMore.className = 'gdata learn-more plain-link';
+    learnMore.textContent = str('GDATA_LEARN_MORE');
+    learnMore.addEventListener('click', function() {
+       chrome.tabs.create({url: GOOGLE_DRIVE_FAQ_URL});
+    });
     this.unmountedPanel_.appendChild(learnMore);
-
-    var learnMoreLink = this.document_.createElement('a');
-    learnMoreLink.textContent = str('GDATA_LEARN_MORE');
-    learnMoreLink.href = 'javascript://';  // TODO: Set a proper link URL.
-    learnMoreLink.className = 'gdata learn-more';
-    learnMore.appendChild(learnMoreLink);
   };
 
   FileManager.prototype.onDataModelSplice_ = function(event) {
@@ -4338,4 +4344,96 @@ FileManager.prototype = {
 
     customSplitter.decorate(splitterElement);
   };
+
+  FileManager.prototype.initGDataWelcomeBanners_ = function() {
+    var WELCOME_HEADER_COUNTER_KEY = 'gdataWelcomeHeaderCounter';
+    var WELCOME_HEADER_COUNTER_LIMIT = 5;
+
+    function getHeaderCounter() {
+      return parseInt(localStorage[WELCOME_HEADER_COUNTER_KEY] || '0');
+    }
+
+    if (getHeaderCounter() >= WELCOME_HEADER_COUNTER_LIMIT)
+      return;
+
+    function createDiv(className, parent) {
+      var div = parent.ownerDocument.createElement('div');
+      div.className = className;
+      parent.appendChild(div);
+      return div;
+    }
+
+    function createBanner(container, messageText) {
+      var wrapper = createDiv('gdata-welcome-wrapper', container);
+      createDiv('gdata-welcome-icon', wrapper);
+
+      var close = createDiv('gdata-welcome-close', wrapper);
+      close.addEventListener('click', closeBanner);
+
+      var message = createDiv('gdata-welcome-message', wrapper);
+
+      var title = createDiv('gdata-welcome-title', message);
+      title.textContent =
+          strf('GDATA_WELCOME_TITLE', str('GDATA_PRODUCT_NAME'));
+
+      var text = createDiv('gdata-welcome-text', message);
+      text.innerHTML = messageText;
+
+      var links = createDiv('gdata-welcome-links', message);
+
+      var more = createDiv('gdata-welcome-more plain-link', links);
+      more.textContent = str('GDATA_LEARN_MORE');
+      more.addEventListener('click', function() {
+        chrome.tabs.create({url: GOOGLE_DRIVE_FAQ_URL});
+      });
+
+      var dismiss = createDiv('gdata-welcome-dismiss plain-link', links);
+      dismiss.textContent = str('GDATA_WELCOME_DISMISS');
+      dismiss.addEventListener('click', closeBanner);
+    }
+
+    var self = this;
+
+    function maybeShowBanner() {
+      if (!self.isOnGData()) {
+        self.dialogContainer_.removeAttribute('gdata-welcome');
+        return;
+      }
+
+      var counter = getHeaderCounter();
+
+      if (self.directoryModel_.getFileList().length == 0 && counter == 0) {
+        // Only show the full page banner if the header banner was never shown.
+        // Do not increment the counter.
+        self.dialogContainer_.setAttribute('gdata-welcome', 'page');
+      } else if (counter < WELCOME_HEADER_COUNTER_LIMIT) {
+        localStorage[WELCOME_HEADER_COUNTER_KEY] = ++counter;
+        self.dialogContainer_.setAttribute('gdata-welcome', 'header');
+      } else {
+        closeBanner();
+      }
+    }
+
+    function closeBanner() {
+      self.directoryModel_.removeEventListener('scan-completed',
+          maybeShowBanner);
+      self.directoryModel_.removeEventListener('rescan-completed',
+          maybeShowBanner);
+
+      self.dialogContainer_.removeAttribute('gdata-welcome');
+      // Stop showing the welcome banner.
+      localStorage[WELCOME_HEADER_COUNTER_KEY] = WELCOME_HEADER_COUNTER_LIMIT;
+    }
+
+    createBanner(this.dialogDom_.querySelector('.gdata-welcome.page'),
+        strf('GDATA_WELCOME_TEXT_LONG', str('GDATA_PRODUCT_NAME')));
+
+    createBanner(this.dialogDom_.querySelector('.gdata-welcome.header'),
+        str('GDATA_WELCOME_TEXT_SHORT'));
+
+    this.directoryModel_.addEventListener('scan-completed',
+        maybeShowBanner);
+    this.directoryModel_.addEventListener('rescan-completed',
+        maybeShowBanner);
+  };
 })();