Made number of cellular plan display improvements:

- removed more info button
- added ability to show multiple plans
- added error message when plans can not be loaded
- added better check for case when we run out of plan

BUG=chromium-os:
TEST=open chrome:settings/internet and take a look at cellular plan details

Review URL: http://codereview.chromium.org/5198005

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

5 files changed, 158 insertions, 37 deletions

diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index 3a51d56..e288be4 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -63,6 +63,7 @@
 <script src="options/options_page.js"></script>
 <if expr="pp_ifdef('chromeos')">
   <script src="options/about_page.js"></script>
+  <script src="options/chromeos_cellular_plan_element.js"></script>
   <script src="options/chromeos_internet_network_element.js"></script>
   <script src="options/chromeos_internet_options.js"></script>
   <script src="options/chromeos_language_add_language_overlay.js"></script>
diff --git a/chrome/browser/resources/options/chromeos_cellular_plan_element.js b/chrome/browser/resources/options/chromeos_cellular_plan_element.js
new file mode 100644
index 0000000..8e88601
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_cellular_plan_element.js
@@ -0,0 +1,132 @@
+// Copyright (c) 2010 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.
+
+cr.define('options.internet', function() {
+  /**
+   * Creates a new network list div.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {HTMLDivElement}
+   */
+  var CellularPlanElement = cr.ui.define('div');
+
+  CellularPlanElement.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+    },
+
+    /**
+     * Loads given network list.
+     * @param {Array} networks An array of network object.
+     */
+    load: function(plans) {
+      this.textContent = '';
+      if (!plans || !plans.length) {
+        var noplansDiv = this.ownerDocument.createElement('div');
+        noplansDiv.textContent = localStrings.getString('noPlansFound');
+        this.appendChild(detailsTable);
+      } else {
+        for (var i = 0; i < plans.length; ++i) {
+          this.appendChild(new CellularPlanItem(i, plans[i]));
+        }
+      }
+    }
+  };
+
+  /**
+   * Creates a new network item.
+   * @param {Object} network The network this represents.
+   * @constructor
+   * @extends {HTMLDivElement}
+   */
+  function CellularPlanItem(idx, plan) {
+    var el = cr.doc.createElement('div');
+    el.data = {
+      idx: idx,
+      planType: plan.planType,
+      name: plan.name,
+      planSummary: plan.planSummary,
+      dataRemaining: plan.dataRemaining,
+      planExpires: plan.planExpires,
+      warning: plan.warning
+    };
+    CellularPlanItem.decorate(el);
+    return el;
+  }
+
+
+  /**
+   * Decorates an element as a network item.
+   * @param {!HTMLElement} el The element to decorate.
+   */
+  CellularPlanItem.decorate = function(el) {
+    el.__proto__ = CellularPlanItem.prototype;
+    el.decorate();
+  };
+
+  CellularPlanItem.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      this.className = 'cellular-plan';
+      var detailsTable = this.createTable_('details-plan-table',
+                                           'option-control-table');
+      this.addRow_(detailsTable, 'plan-details-info',
+          'option-name', 'planSummary', this.data.planSummary);
+      this.addRow_(detailsTable, 'plan-details-info',
+          'option-name', null, localStrings.getString('planName'),
+          'option-value', 'planName', this.data.name);
+      this.addRow_(detailsTable, 'plan-details-info',
+        'option-name', null, localStrings.getString('dataRemaining'),
+        'option-value', 'dataRemaining', this.data.dataRemaining);
+      this.addRow_(detailsTable, 'plan-details-info',
+        'option-name', null, localStrings.getString('planExpires'),
+        'option-value', 'dataRemaining', this.data.planExpires);
+      if (this.data.warning && this.data.warning != "") {
+        this.addRow_(detailsTable, 'plan-details-info',
+            'option-name', 'planWarning', this.data.warning);
+      }
+      this.appendChild(detailsTable);
+      this.appendChild(this.ownerDocument.createElement('hr'));
+    },
+
+    createTable_: function(tableId, tableClass) {
+      var table = this.ownerDocument.createElement('table');
+      table.id = tableId;
+      table.className = tableClass;
+      return table;
+    },
+
+    addRow_: function(table, rowClass, col1Class, col1Id, col1Value,
+            col2Class, col2Id, col2Value) {
+      var row = this.ownerDocument.createElement('tr');
+      if (rowClass)
+        row.className = rowClass;
+      var col1 = this.ownerDocument.createElement('td');
+      col1.className = col1Class;
+      if (col1Id)
+        col1.id = col1Id;
+      col1.textContent = col1Value;
+      if (!col2Class)
+        col1.setAttribute('colspan','2');
+      row.appendChild(col1);
+      if (col2Class) {
+        var col2 = this.ownerDocument.createElement('td');
+        col2.className = col2Class;
+        if (col2Id)
+          col2.id = col2Id;
+        col2.textContent = col2Value;
+        row.appendChild(col2);
+      }
+      table.appendChild(row);
+    }
+  };
+
+  return {
+    CellularPlanElement: CellularPlanElement
+  };
+});
diff --git a/chrome/browser/resources/options/chromeos_internet_detail.html b/chrome/browser/resources/options/chromeos_internet_detail.html
index a6ddd4c..8f1683f 100644
--- a/chrome/browser/resources/options/chromeos_internet_detail.html
+++ b/chrome/browser/resources/options/chromeos_internet_detail.html
@@ -87,32 +87,18 @@
   </div>
   <div id="cellularPlanTab" class="subpages-tab-contents cellular-details">
     <section>
-      <table class="option-control-table" id="details-plan-table">
-        <tr class="plan-loading-info">
-          <td colspan="2" i18n-content="planLoading" class="option-value"></td>
-        </tr>
-        <tr class="no-plan-info">
-          <td colspan="2" class="option-value"><button id="purchaseMore"
-              i18n-content="purchaseMore"></button></td>
-        </tr>
-        <tr class="plan-details-info">
-          <td class="option-name" id="planSummary"></td>
-          <td class="option-value"><button id="moreInfo"
-              class="details-button" i18n-content="moreInfo"></button></td>
-        </tr>
-      </table>
-    </section>
-    <section class="plan-details-info">
-      <table class="option-control-table">
-        <tr>
-          <td class="option-name" i18n-content="dataRemaining"></td>
-          <td id="dataRemaining" class="option-value"></td>
-        </tr>
-        <tr>
-          <td class="option-name" i18n-content="planExpires"></td>
-          <td id="planExpires" class="option-value"></td>
-        </tr>
-      </table>
+      <div>
+        <table class="option-control-table" id="details-plan-table">
+          <tr class="plan-loading-info">
+            <td i18n-content="planLoading" class="option-value"></td>
+          </tr>
+          <tr class="no-plan-info">
+            <td class="option-value"><button id="purchaseMore"
+                i18n-content="purchaseMore"></button></td>
+          </tr>
+        </table>
+      </div>
+      <div id="planList"></div>
     </section>
     <section class="plan-details-info">
       <div>
diff --git a/chrome/browser/resources/options/chromeos_internet_options.js b/chrome/browser/resources/options/chromeos_internet_options.js
index 94e45f1..d0c4672 100644
--- a/chrome/browser/resources/options/chromeos_internet_options.js
+++ b/chrome/browser/resources/options/chromeos_internet_options.js
@@ -38,6 +38,8 @@ cr.define('options', function() {
       options.internet.NetworkElement.decorate($('rememberedList'));
       $('rememberedList').load(templateData.rememberedList);
 
+      options.internet.CellularPlanElement.decorate($('planList'));
+
       $('wiredSection').hidden = (templateData.wiredList.length == 0);
       $('wirelessSection').hidden = (templateData.wirelessList.length == 0);
       $('rememberedSection').hidden = (templateData.rememberedList.length == 0);
@@ -71,10 +73,6 @@ cr.define('options', function() {
       $('purchaseMore').onclick = function(event) {
         chrome.send('buyDataPlan', []);
       };
-      $('moreInfo').onclick = function(event) {
-        chrome.send('showMorePlanInfo', []);
-      };
-
       this.showNetworkDetails_();
     },
 
@@ -193,17 +191,13 @@ cr.define('options', function() {
 
   InternetOptions.updateCellularPlans = function (data) {
     var page = $('detailsInternetPage');
-    if (!data.plans || !data.plans.length || !data.plans[0].plan_type) {
-      // No cellular data plan.
+    if (data.needsPlan) {
       page.setAttribute('nocellplan', true);
       page.removeAttribute('hascellplan');
     } else {
       page.removeAttribute('nocellplan');
       page.setAttribute('hascellplan', true);
-      var plan = data.plans[0];
-      $('planSummary').textContent = plan.planSummary;
-      $('dataRemaining').textContent = plan.dataRemaining;
-      $('planExpires').textContent = plan.planExpires;
+      $('planList').load(data.plans);
     }
     page.removeAttribute('cellplanloading');
   };
diff --git a/chrome/browser/resources/options/chromeos_internet_options_page.css b/chrome/browser/resources/options/chromeos_internet_options_page.css
index a5c89b0..0dcb635 100644
--- a/chrome/browser/resources/options/chromeos_internet_options_page.css
+++ b/chrome/browser/resources/options/chromeos_internet_options_page.css
@@ -136,7 +136,14 @@ html[dir='rtl'] .network-item-text {
 }
 
 #planSummary {
-  width: 250px;
+  width: 350px;
+  padding-bottom: 5px;
+}
+
+#planWarning {
+  width: 350px;
+  padding-top: 5px;
+  font-weight: bold;
 }
 
 html[dir='rtl'] .details-button {
@@ -153,6 +160,7 @@ html[dir='rtl'] .details-button {
 #detailsInternetPage[wireless] .cellular-details,
 #detailsInternetPage[cellplanloading] .no-plan-info,
 #detailsInternetPage[cellplanloading] .plan-details-info,
+#detailsInternetPage[cellplanloading] #planList,
 #detailsInternetPage[hascellplan] .plan-loading-info,
 #detailsInternetPage[hascellplan] .no-plan-info,
 #detailsInternetPage[nocellplan] .plan-loading-info,