Promo for buying Drive storage when you're low on space

BUG=137515

Review URL: https://chromiumcodereview.appspot.com/10843063

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@149833 0039d316-1c4b-4281-b951-d872f2087c98

chrome/app/generated_resources.grd

@@ -11259,6 +11259,12 @@ Some features may be unavailable.  Please check that the profile exists and you
       <message name="IDS_FILE_BROWSER_GDATA_BUY_MORE_SPACE" desc="Menu item, offering user to buy more space on Google Drive">
         Buy more storage...
       </message>
+      <message name="IDS_FILE_BROWSER_GDATA_SPACE_AVAILABLE_LONG" desc="Text showing space left on Google Drive">
+        Google Drive space left: <ph name="SPACE_AVAILABLE">$1<ex>400 MB</ex></ph>.
+      </message>
+      <message name="IDS_FILE_BROWSER_GDATA_BUY_MORE_SPACE_LINK" desc="Text on the link, offering user to buy more space on Google Drive">
+        Buy more storage
+      </message>
       <message name="IDS_FILE_BROWSER_GDATA_WAITING_FOR_SPACE_INFO" desc="Menu item, saying that FileBrowser is waiting for account's space information from GData servers. When actual data arrives, this item will be replaced with IDS_FILE_BROWSER_GDATA_SPACE_AVAILABLE">
         Waiting for space info...
       </message>

chrome/browser/chromeos/extensions/file_browser_private_api.cc

@@ -1599,9 +1599,11 @@ bool FileDialogStringsFunction::RunImpl() {
   SET_STRING(IDS_FILE_BROWSER, GDATA_SHOW_HOSTED_FILES_OPTION);
   SET_STRING(IDS_FILE_BROWSER, GDATA_MOBILE_CONNECTION_OPTION);
   SET_STRING(IDS_FILE_BROWSER, GDATA_SPACE_AVAILABLE);
+  SET_STRING(IDS_FILE_BROWSER, GDATA_SPACE_AVAILABLE_LONG);
   SET_STRING(IDS_FILE_BROWSER, GDATA_WAITING_FOR_SPACE_INFO);
   SET_STRING(IDS_FILE_BROWSER, GDATA_FAILED_SPACE_INFO);
   SET_STRING(IDS_FILE_BROWSER, GDATA_BUY_MORE_SPACE);
+  SET_STRING(IDS_FILE_BROWSER, GDATA_BUY_MORE_SPACE_LINK);
 
   SET_STRING(IDS_FILE_BROWSER, SELECT_FOLDER_TITLE);
   SET_STRING(IDS_FILE_BROWSER, SELECT_OPEN_FILE_TITLE);

chrome/browser/resources/file_manager/css/file_manager.css

@@ -594,6 +594,43 @@ button#detail-view:not([disabled]) {
   height: 0;
 }
 
+/* Drive space warning banner. */
+.gdrive-space-warning {
+  -webkit-box-align: center;
+  -webkit-box-orient: horizontal;
+  -webkit-transition: height 70ms linear;
+  background-image: url('../images/files/ui/clouds.png');
+  background-repeat: repeat-x;
+  background-size: 150px 44px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  color: #333;
+  display: -webkit-box;
+  font-size: 13px;
+  height: 44px;
+  overflow: hidden;
+  position: relative;
+}
+
+.gdrive-space-warning[hidden] {
+  border-top-width: 0;
+  height: 0;
+}
+
+.gdrive-space-warning .gdrive-icon {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/gdrive_logo.png') 1x,
+    url('../images/files/ui/2x/gdrive_logo.png') 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 25px 22px;
+  height: 44px;
+  width: 50px;
+}
+
+.gdrive-space-warning .gdrive-text {
+  margin-right: 11px;
+}
+
 /* The cr.ui.Grid representing the detailed file list. */
 .thumbnail-grid {
   overflow-y: auto;

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

@@ -2888,7 +2888,7 @@ FileManager.prototype = {
    * Show or hide the "Low disk space" warning.
    * @param {boolean} show True if the box need to be shown.
    */
-  FileManager.prototype.showLowDiskSpaceWarning_ = function(show) {
+  FileManager.prototype.showLowDownloadsSpaceWarning_ = function(show) {
     var box = this.dialogDom_.querySelector('.downloads-warning');
 
     if (box.hidden == !show) return;
@@ -2907,6 +2907,70 @@ FileManager.prototype = {
     this.requestResize_(100);
   };
 
+  /**
+   * Show or hide the "Low Google Drive space" warning.
+   * @param {boolean} show True if the box need to be shown.
+   * @param {object} sizeStats Size statistics.
+   */
+  FileManager.prototype.showLowGDriveSpaceWarning_ = function(show, sizeStats) {
+    var box = this.dialogDom_.querySelector('.gdrive-space-warning');
+
+    // If the warning was dismissed before, this key stores the quota value
+    // (as of the moment of dismissal).
+    // If the warning was never dismissed or was reset this key stores 0.
+    var WARNING_DISMISSED_KEY = 'gdriveSpaceWarningDismissed';
+    var dismissed = parseInt(localStorage[WARNING_DISMISSED_KEY] || '0');
+
+    if (dismissed) {
+      if (dismissed == sizeStats.totalSizeKB &&  // Quota had not changed
+          sizeStats.remainingSizeKB / sizeStats.totalSizeKB < 0.15) {
+        // Since the last dismissal decision the quota has not changed AND
+        // the user did not free up significant space. Obey the dismissal.
+        show = false;
+      } else {
+        // Forget the dismissal. Warning will be shown again.
+        localStorage[WARNING_DISMISSED_KEY] = 0;
+      }
+    }
+
+    // Avoid showing two banners.
+    // TODO(kaznacheev): Unify the low space warning and the promo header.
+    if (show) this.cleanupGDataWelcome_();
+
+    if (box.hidden == !show) return;
+
+    box.textContent = '';
+    if (show) {
+      var icon = this.document_.createElement('div');
+      icon.className = 'gdrive-icon';
+      box.appendChild(icon);
+
+      var text = this.document_.createElement('div');
+      text.className = 'gdrive-text';
+      text.textContent = strf('GDATA_SPACE_AVAILABLE_LONG',
+          util.bytesToSi(sizeStats.remainingSizeKB * 1024));
+      box.appendChild(text);
+
+      var link = this.document_.createElement('div');
+      link.className = 'plain-link';
+      link.textContent = str('GDATA_BUY_MORE_SPACE_LINK');
+      link.addEventListener('click',
+          this.onExternalLinkClick_.bind(this, GOOGLE_DRIVE_BUY_STORAGE));
+      box.appendChild(link);
+
+      var close = this.document_.createElement('div');
+      close.className = 'cr-dialog-close';
+      box.appendChild(close);
+      close.addEventListener('click', function(total) {
+        localStorage[WARNING_DISMISSED_KEY] = total;
+        box.hidden = true;
+      }.bind(this, sizeStats.totalSizeKB));
+    }
+
+    box.hidden = !show;
+    this.requestResize_(100);
+  };
+
   /**
    * Update the location in the address bar.
    *
@@ -3717,52 +3781,58 @@ FileManager.prototype = {
    * @param {string} currentPath New path to the current directory.
    */
   FileManager.prototype.checkFreeSpace_ = function(currentPath) {
-    var dir = RootDirectory.DOWNLOADS;
-
-    var scheduleCheck = function(timeout) {
+    var scheduleCheck = function(timeout, root, threshold) {
       if (this.checkFreeSpaceTimer_) {
         clearTimeout(this.checkFreeSpaceTimer_);
         this.checkFreeSpaceTimer_ = null;
       }
 
       if (timeout) {
-        this.checkFreeSpaceTimer_ = setTimeout(doCheck, timeout);
+        this.checkFreeSpaceTimer_ = setTimeout(
+            doCheck, timeout, root, threshold);
       }
     }.bind(this);
 
-    var doCheck = function() {
+    var doCheck = function(root, threshold) {
       // Remember our invocation timer, because getSizeStats is long and
       // asynchronous call.
       var selfTimer = this.checkFreeSpaceTimer_;
 
       chrome.fileBrowserPrivate.getSizeStats(
-          util.makeFilesystemUrl(dir),
+          util.makeFilesystemUrl(root),
           function(sizeStats) {
             // If new check started while we were in async getSizeStats call,
             // then we shouldn't do anything.
             if (selfTimer != this.checkFreeSpaceTimer_) return;
 
             // sizeStats is undefined, if some error occurs.
-            var lowDiskSpace =
-                sizeStats &&
-                sizeStats.totalSizeKB > 0 &&
-                sizeStats.remainingSizeKB / sizeStats.totalSizeKB < 0.2;
+            var ratio = (sizeStats && sizeStats.totalSizeKB > 0) ?
+                sizeStats.remainingSizeKB / sizeStats.totalSizeKB : 1;
+
+            var lowDiskSpace = ratio < threshold;
 
-            this.showLowDiskSpaceWarning_(lowDiskSpace);
+            if (root == RootDirectory.DOWNLOADS)
+              this.showLowDownloadsSpaceWarning_(lowDiskSpace);
+            else
+              this.showLowGDriveSpaceWarning_(lowDiskSpace, sizeStats);
 
             // If disk space is low, check it more often. User can delete files
             // manually and we should not bother her with warning in this case.
-            scheduleCheck(lowDiskSpace ? 1000 * 5 : 1000 * 30);
+            scheduleCheck(lowDiskSpace ? 1000 * 5 : 1000 * 30, root, threshold);
           }.bind(this));
     }.bind(this);
 
-    if (PathUtil.getRootPath(currentPath) === dir) {
-      // Setup short timeout if currentPath just changed.
-      scheduleCheck(500);
+    // TODO(kaznacheev): Unify the two low space warning.
+    var root = PathUtil.getRootPath(currentPath);
+    if (root === RootDirectory.DOWNLOADS) {
+      scheduleCheck(500, root, 0.2);
+    } else if (root === RootDirectory.GDATA) {
+      scheduleCheck(500, root, 0.1);
     } else {
       scheduleCheck(0);
 
-      this.showLowDiskSpaceWarning_(false);
+      this.showLowDownloadsSpaceWarning_(false);
+      this.showLowGDriveSpaceWarning_(false);
     }
   };
 

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

@@ -548,6 +548,9 @@ chrome.fileBrowserPrivate = {
       GDATA_BUY_MORE_SPACE: 'Buy more storage...',
       GDATA_SPACE_AVAILABLE: '$1 left',
 
+      GDATA_BUY_MORE_SPACE_LINK: 'Buy more storage',
+      GDATA_SPACE_AVAILABLE_LONG: 'Google Drive space left: $1.',
+
       OFFLINE_COLUMN_LABEL: 'Available offline',
       GDATA_LOADING: 'Hang with us. We\'re fetching your files.',
       GDATA_RETRY: 'Retry',

chrome/browser/resources/file_manager/main.html

@@ -191,6 +191,7 @@
 
         </div>
         <div class="gdrive-welcome header"></div>
+        <div class="gdrive-space-warning" hidden></div>
         <div class=dialog-body>
           <div class=filelist-panel>
             <div id="list-container">