Implemented status section functionality for about:policy.

chrome/browser/resources/policy.js

 // Copyright (c) 2011 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.
 
-var localStrings = new LocalStrings();
+//var localStrings = new LocalStrings();

[James Hawkins, 2011/09/05 22:10:38]

Deadcode.

[simo, 2011/09/07 12:18:16]

Done.

 
 /**
  * This variable structure is here to document the structure that the template
  * expects to correctly populate the page.
  */
-var policyDataformat = {
+var policyDataFormat = {
+  'anyPoliciesSet': true,

[James Hawkins, 2011/09/05 22:10:38]

Document vars.

[simo, 2011/09/07 12:18:16]

Done.

+  'isPolicyUpdate': false,
   'policies': [
     {
       'level': 'managed',
       'name': 'AllowXYZ',
       'set': true,
       'sourceType': 'Device',
       'status': 'ok',
-      'value': true,
-    },
+      'value': 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() {
 
   function Policy() {
   }
 
   cr.addSingletonGetter(Policy);
 
   Policy.prototype = {
 
     /**
      * True if none of the received policies are actually set, false otherwise.
      * @type {boolean}
      */
     noActivePolicies_: false,
 
     /**
+     * True if the status section is being displayed, false otherwise.
+     * @type {boolean}
+     */
+    displayStatusSection_: false,

[James Hawkins, 2011/09/05 22:10:38]

Why not check the visibility of the status on the fly instead of tracking it
with a var?

[simo, 2011/09/07 12:18:16]

Done. I had some use for this var before and then forgot to remove it.

+
+    /**
      * The current search term for filtering of the policy table.
      * @type {string}
      * @private
      */
     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.
+     * Takes the |policyData| argument and populates the page with this data. It
+     * expects an object structure like the above.

[James Hawkins, 2011/09/05 22:10:38]

'the above' is ambiguous.

[simo, 2011/09/07 12:18:16]

Done.

      * @param {Object} policyData Detailed info about policies

[James Hawkins, 2011/09/05 22:10:38]

You changed the parameter but not the documentation.  Is there a reason you
changed it to data from policyData? The latter seems more descriptive.

[simo, 2011/09/07 12:18:16]

At some point I distinguished between statusData and policyData and then I
didn't know whether I should still call it policyData when both are combined so
I changed it to just "data". Now, calling it policyData does make more sense
though. 

      */
-    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_();
     },
 
     /**
      * Filters the table of policies by name.
      * @param {string} term The search string
      */
     filterTable: function(term) {
       this.searchTerm_ = term.toLowerCase();
       var table = $('policy-table');
       var showUnsent = $('toggle-unsent-policies').checked;
@@ skipping 20 matching lines @@
      */
     updatePolicyVisibility: function() {
       if ($('toggle-unsent-policies').checked)
           $('policies').style.display = '';
       else if (this.noActivePolicies_)
           $('policies').style.display = 'none';
 
       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';

[James Hawkins, 2011/09/05 22:10:38]

Using hidden will make this a lot simpler.

[simo, 2011/09/07 12:18:16]

I've changed this but I don't really understand how it makes it simpler. Could
you explain?

         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.requestPolicyData = function() {
-    chrome.send('requestPolicyData');
+  Policy.requestData = function() {
+    chrome.send('requestData');
   };
 
   /**
-   * Called by the C++ PolicyUIHandler when it has the requested policy data.
+   * Called by the C++ PolicyUIHandler when it has the requested data.
+   * @param {Object} data The data

[James Hawkins, 2011/09/05 22:10:38]

Period at end of sentence. I'd also elucidate on 'The data' which doesn't add
much to the already-stated var.

[simo, 2011/09/07 12:18:16]

Done.

    */
-  Policy.returnPolicyData = function(policyData) {
-    Policy.getInstance().renderTemplate(policyData);
+  Policy.returnData = function(data) {
+    if (data.isPolicyUpdate) {
+      Policy.getInstance().collapseExpandedCells();
+      Policy.getInstance().renderTemplate(data);
+      Policy.getInstance().updatePolicyVisibility();
+    } else {
+      Policy.getInstance().renderTemplate(data);
+    }
+  };
+
+  /**
+   * Asks the C++ PolicyUIHandler to re-fetch policy information.
+   */
+  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) {
     return $('toggle-unsent-policies').checked || policy.set;
   };
 
   /**
-   * 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);

[James Hawkins, 2011/09/05 22:10:38]

Remove parens.

[simo, 2011/09/07 12:18:16]

Done.

+  };
+
+  /**
+   * 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();
     };
 
     $('search-field').onsearch = function(event) {
       Policy.getInstance().filterTable(this.value);
     };
   };
 
   // Export
   return {
     Policy: Policy
   };
 });
 
 var Policy = policies.Policy;
 
 // Get data and have it displayed upon loading.
 document.addEventListener('DOMContentLoaded', policies.Policy.initialize);