[File Manager] Welcome to Google Docs banner

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

 // Copyright (c) 2012 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.
 
 /**
  * FileManager constructor.
  *
  * FileManager objects encapsulate the functionality of the file selector
  * dialogs, as well as the full screen file manager application (though the
  * latter is not yet implemented).
@@ skipping 52 matching lines @@
 
   // Private variables and helper functions.
 
   /**
    * Location of the FAQ about the downloads directory.
    */
   var DOWNLOADS_FAQ_URL = 'http://www.google.com/support/chromeos/bin/' +
       '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/' +
       'answer.py?hl=en&answer=1700055&topic=29026&ctx=topic';
 
   /**
    * Maximum amount of thumbnails in the preview pane.
    */
   var MAX_PREVIEW_THUMBAIL_COUNT = 4;
 
@@ skipping 631 matching lines @@
         this.dialogType_ == FileManager.DialogType.SELECT_OPEN_FILE ||
         this.dialogType_ == FileManager.DialogType.SELECT_FOLDER ||
         this.dialogType_ == FileManager.DialogType.SELECT_SAVEAS_FILE;
 
     this.directoryModel_ = new DirectoryModel(
         this.filesystem_.root,
         sigleSelection,
         str('ENABLE_GDATA') == '1',
         this.metadataCache_);
 
+    this.initGDataWelcomeBanners_();
+
     var dataModel = this.directoryModel_.getFileList();
     var collator = this.collator_;
     // TODO(dgozman): refactor comparison functions together with
     // render/update/display.
     dataModel.setCompareFunction('name', function(a, b) {
       return collator.compare(a.name, b.name);
     });
     dataModel.setCompareFunction('modificationTime',
                                  this.compareMtime_.bind(this));
     dataModel.setCompareFunction('size',
@@ skipping 104 matching lines @@
       this.unmountedPanel_.setAttribute('retry', true);
     }
   };
 
   FileManager.prototype.initGDataUnmountedPanel_ = function() {
     if (this.unmountedPanel_.firstElementChild)
       return;
 
     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');
     spinnerBox.className = 'spinner-box';
     loading.appendChild(spinnerBox);
 
     var spinner = this.document_.createElement('div');
     spinner.className = 'spinner';
     spinnerBox.appendChild(spinner);
 
     var error = this.document_.createElement('div');
     error.className = 'gdata error';
     error.textContent = strf('GDATA_CANNOT_REACH', str('GDATA_PRODUCT_NAME'));
     this.unmountedPanel_.appendChild(error);
 
     var retry = this.document_.createElement('button');
     retry.className = 'gdata retry';
     retry.textContent = str('GDATA_RETRY');
     retry.onclick = this.initGData_.bind(this, false /* retry */);
     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) {
     var checkbox = this.document_.querySelector('#select-all-checkbox');
     if (checkbox)
       this.updateSelectAllCheckboxState_(checkbox);
   };
 
   FileManager.prototype.onDataModelPermuted_ = function(event) {
     var sortStatus = this.directoryModel_.getFileList().sortStatus;
@@ skipping 3442 matching lines @@
       },
 
       handleSplitterDragEnd: function(e) {
         Splitter.prototype.handleSplitterDragEnd.apply(this, arguments);
         this.ownerDocument.documentElement.classList.remove('col-resize');
       }
     };
 
     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);
+  };
 })();