Implemented status section functionality for about:policy.

chrome/browser/resources/policy.js

Index: chrome/browser/resources/policy.js
diff --git a/chrome/browser/resources/policy.js b/chrome/browser/resources/policy.js
index db4f404f79b2b9635bbe2ac9deab998e1e827db4..83165a875cb5e371d82ef3fa2698a6dffe535328 100644
--- a/chrome/browser/resources/policy.js
+++ b/chrome/browser/resources/policy.js
@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var localStrings = new LocalStrings();
+//var localStrings = new LocalStrings();
 
 /**
  * This variable structure is here to document the structure that the template
@@ -16,10 +16,23 @@ var policyDataformat = {
       'set': true,
       'sourceType': 'Device',
       'status': 'ok',
-      'value': true,
-    },
+      'value': true
+    }
   ],
-  'anyPoliciesSet': true
+  'anyPoliciesSet': true,
+  'status': {
+    'deviceFetchInterval': '8min',
+    'deviceId': 'D2AC39A2-3C8FC-E2C0-E45D2DC3782C',
+    'deviceLastFetchTime': '9:50 PM',
+    'devicePolicyDomain': 'google.com',
+    'deviceStatusMessage': 'OK',
+    'displayStatusSection': true,
+    'user': 'simo@google.com',
+    'userFetchInterval': '8min',
+    'userId': 'D2AC39A2-3C8FC-E2C0-E45D2DC3782C',
+    'userLastFetchTime': '9:50 PM',
+    'userStatusMessage': 'OK'
+  }
 };
 
 cr.define('policies', function() {
@@ -38,6 +51,12 @@ cr.define('policies', function() {
     noActivePolicies_: false,
 
     /**
+     * True if the status section is being displayed, false otherwise.
+     * @type {boolean}
+     */
+    displayStatusSection_: false,
+
+    /**
      * The current search term for filtering of the policy table.
      * @type {string}
      * @private
@@ -45,18 +64,26 @@ cr.define('policies', function() {
     searchTerm_: '',
 
     /**
-     * Takes the |policyData| input argument which represents data about the
-     * policies supported by the device/client and populates the html jstemplate
-     * with that data. It expects an object structure like the above.
+     * The interval with which the last policy fetch times should be updated in
+     * ms.
+     * @type {number}
+     */
+    fetchTimeRefreshInterval_: 60000,
+
+    /**
+     * Takes the |policyData| argument and populates the page with this data. It
+     * expects an object structure like the above.
      * @param {Object} policyData Detailed info about policies
      */
-    renderTemplate: function(policyData) {
-      this.noActivePolicies_ = !policyData.anyPoliciesSet;
+    renderTemplate: function(data) {
+      this.noActivePolicies_ = !data.anyPoliciesSet;
+      this.displayStatusSection_ = data.status.displayStatusSection;
 
       // This is the javascript code that processes the template:
-      var input = new JsEvalContext(policyData);
-      var output = $('policiesTemplate');
+      var input = new JsEvalContext(data);
+      var output = $('dataTemplate');
       jstProcess(input, output);
+      this.setToggleEventHandlers_();
     },
 
     /**
@@ -97,34 +124,141 @@ cr.define('policies', function() {
       var tableRows = document.getElementsByClassName('policy-unset');
       for (var i = 0; i < tableRows.length; i++) {
         if ($('toggle-unsent-policies').checked)
-          tableRows[i].style.visibility = 'visible';
+          tableRows[i].style.display = 'table-row';
         else
-          tableRows[i].style.visibility = 'hidden';
+          tableRows[i].style.display = 'none';
       }
 
       // Filter table again in case a search was active.
       this.filterTable(this.searchTerm_);
+    },
+
+    /**
+     * Set event handlers for the "Show more"/"Hide" links generated by
+     * jstemplate.
+     */
+    setToggleEventHandlers_: function() {
+      var toggles = document.querySelectorAll('.policy-set * .toggler');
+      for (var i = 0; i < toggles.length; i++) {
+        toggles[i].onclick = function() {
+          Policy.getInstance().toggleCellExpand_(this);
+        };
+      }
+    },
+
+    /**
+     * Expands or collapses a table cell that has overflowing text.
+     * @param {Object} toggler The toggler that was clicked on
+     */
+    toggleCellExpand_: function(toggler) {
+      var tableCell = toggler.parentElement;
+      var textContainer = tableCell.querySelector('.text-container');
+
+      if (textContainer.collapsed)
+        this.expandCell_(textContainer);
+      else
+        this.collapseCell_(textContainer);
+
+      textContainer.collapsed = !textContainer.collapsed;
+      var expand = tableCell.querySelector('.expand');
+      var collapse = tableCell.querySelector('.collapse');
+      expand.style.display = textContainer.collapsed ? '' : 'none';
+      collapse.style.display = textContainer.collapsed ? 'none' : '';
+    },
+
+    /**
+     * Collapses all expanded table cells and updates the visibility of the
+     * toggles accordingly. Should be called before the policy information in
+     * the table is updated.
+     */
+    collapseExpandedCells: function() {
+      var toggles = document.querySelectorAll('.policy-set * .toggler');
+      for (var i = 0; i < toggles.length; i++)
+        toggles[i].style.display = 'none';
+
+      var textContainers =
+          document.querySelectorAll('.expanded');
+      for (var i = 0; i < textContainers.length; i++)
+        this.collapseCell_(textContainers[i]);
+    },
+
+    /**
+     * Expands a table cell so that all the text it contains is visible.
+     * @param {Object} textContainer The cell's div element that contains the
+     * text
+     */
+    expandCell_: function(textContainer) {
+      textContainer.classList.remove('collapsed');
+      textContainer.classList.add('expanded');
+    },
+
+    /**
+     * Collapses a table cell so that overflowing text is hidden.
+     * @param {Object} textContainer The cell's div element that contains the
+     * text
+     */
+    collapseCell_: function(textContainer) {
+      textContainer.classList.remove('expanded');
+      textContainer.classList.add('collapsed');
     }
   };
 
   /**
-   * Asks the C++ PolicyUIHandler to get details about policies. The
-   * PolicyDOMHandler should reply to returnPolicyData() (below).
+   * Asks the C++ PolicyUIHandler to get details about policies and status
+   * information. The PolicyUIHandler should reply to returnData() (below).
+   */
+  Policy.requestData = function() {
+    chrome.send('requestData');
+  };
+
+  /**
+   * Called by the C++ PolicyUIHandler when it has the requested data.
+   * @param {Object} data The data
    */
-  Policy.requestPolicyData = function() {
-    chrome.send('requestPolicyData');
+  Policy.returnData = function(data) {

[Mattias Nissler (ping if slow), 2011/09/02 11:16:09]

Hm, so we now have multiple entry points to push data to the page. Is that
really necessary? Can't we just send a full update every time we need  to update
something? Data-size wise that shouldn't be a problem. Maybe I'm missing
something here.

[simo, 2011/09/02 15:32:02]

Okay, true I can use a single entry point to push data. I have added a boolean
to the policyDataFormat so that I know whether an update is happening because I
need to call some more functions in that case.

+    Policy.getInstance().renderTemplate(data);
+    if (Policy.getInstance().displayStatusSection_)
+      Policy.updateFetchTimes();
   };
 
   /**
-   * Called by the C++ PolicyUIHandler when it has the requested policy data.
+   * Called by the C++ PolicyUIHandler when the policy data has changed.
+   * @param {Object} policyData The data
    */
-  Policy.returnPolicyData = function(policyData) {
+  Policy.updatePolicyData = function(policyData) {
+    Policy.getInstance().collapseExpandedCells();
     Policy.getInstance().renderTemplate(policyData);
+    Policy.getInstance().updatePolicyVisibility();
+  };
+
+  /**
+   * Asks the C++ PolicyUIHandler for updated policy fetch times.
+   */
+  Policy.updateFetchTimes = function() {
+    chrome.send('updateFetchTimes');
+    var t = setTimeout('Policy.updateFetchTimes()',
+                       Policy.getInstance().fetchTimeRefreshInterval_);
+  };
+
+  /**
+   * Called by the C++ PolicyUIHandler when it has the requested updated fetch
+   * times.
+   * @param {Object} fetchTimes The new fetch times
+   */
+  Policy.returnFetchTimes = function(fetchTimes) {
+    if (fetchTimes.deviceLastFetchTime)
+      $('device-last-fetch-time').textContent = fetchTimes.deviceLastFetchTime;
+    if (fetchTimes.userLastFetchTime)
+      $('user-last-fetch-time').textContent = fetchTimes.userLastFetchTime;
+  };
+
+  Policy.triggerPolicyFetch = function() {
+    chrome.send('fetchPolicy');
   };
 
   /**
    * Determines whether a policy should be visible or not.
-   * @param {policy} policy information in the format given by above the
+   * @param {Object} policy An entry in the 'policies' array given by the above
    * PolicyDataFormat
    */
   Policy.shouldDisplayPolicy = function(policy) {
@@ -132,13 +266,34 @@ cr.define('policies', function() {
   };
 
   /**
-   * Initializes the page and loads the list of policies.
+   * Returns true if the "Show more" toggle should appear in a table cell and
+   * false if not.
+   * @param {Object} expandToggle The "Show more" DOM element
+   */
+  Policy.shouldShowExpand = function(expandToggle) {
+    var textContainer =
+        expandToggle.parentNode.querySelector('.text-container');
+    textContainer.collapsed = true;
+    var cellText = textContainer.querySelector('.cellText');
+
+    // If the text is wider than the text container, the expand sign should
+    // appear.
+    return (textContainer.offsetWidth < cellText.offsetWidth);
+  };
+
+  /**
+   * Initializes the page and loads the list of policies and the policy
+   * status data.
    */
   Policy.initialize = function() {
     i18nTemplate.process(document, templateData);
-    Policy.requestPolicyData();
+    Policy.requestData();
 
     // Set HTML event handlers.
+    $('fetch-policies-button').onclick = function(event) {
+      Policy.triggerPolicyFetch();
+    }
+
     $('toggle-unsent-policies').onchange = function(event) {
       Policy.getInstance().updatePolicyVisibility();
     };