Storage manager: Add conditional messages for disk low situation and update design.

chrome/browser/resources/options/chromeos/storage_manager.js

 // Copyright 2016 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.
 
 /**
  * @typedef {{
  *   totalSize: string,
  *   availableSize: string,
  *   usedSize: string,
- *   usedRatio: number
+ *   usedRatio: number,
+ *   isSpaceLow: boolean,
+ *   isSpaceCriticallyLow: boolean
  * }}
  */
 options.StorageSizeStat;
 
 cr.define('options', function() {
   var Page = cr.ui.pageManager.Page;
   var PageManager = cr.ui.pageManager.PageManager;
 
   function StorageManager() {
     Page.call(this, 'storage',
@@ skipping 32 matching lines @@
     /**
      * Updates the size information (total/used/available) of the internal
      * storage.
      * @param {!options.StorageSizeStat} sizeStat
      * @private
      */
     setSizeStat_: function(sizeStat) {
       $('storage-manager-size-capacity').textContent = sizeStat.totalSize;
       $('storage-manager-size-in-use').textContent = sizeStat.usedSize;
       $('storage-manager-size-available').textContent = sizeStat.availableSize;
+      $('storage-bar-progress').style.width = sizeStat.usedRatio * 100 + '%';
+      $('storageManagerPage').classList.toggle('critically-low-space',
+          sizeStat.isSpaceCriticallyLow);
+      $('storageManagerPage').classList.toggle('low-space',
+          sizeStat.isSpaceLow && !sizeStat.isSpaceCriticallyLow);
     },
 
     /**
      * Updates the size Downloads directory.
      * @param {string} size Formatted string of the size of Downloads.
      * @private
      */
     setDownloadsSize_: function(size) {
       $('storage-manager-size-downloads').textContent = size;
     },
@@ skipping 23 matching lines @@
     'setArcSize',
     'setDownloadsSize',
     'setSizeStat',
     'showArcItem',
   ]);
 
   return {
     StorageManager: StorageManager
   };
 });