chrome/browser/resources/policy.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * This variable structure is here to document the structure that the template
   7  * expects to correctly populate the page.
   8  */
   9 var policyDataFormat = {
  10   // Whether any of the policies in 'policies' have a value.
  11   'anyPoliciesSet': true,
  12
  13   'policies': [
  14     {
  15       'level': 'managed',
  16       'name': 'AllowXYZ',
  17       'set': true,
  18       'scope': 'Machine',
  19       'status': 'ok',
  20       'value': true
  21     }
  22   ],
  23   'status': {
  24     'deviceFetchInterval': '8min',
  25     'deviceId': 'D2AC39A2-3C8FC-E2C0-E45D2DC3782C',
  26     'deviceLastFetchTime': '9:50 PM',
  27     'devicePolicyDomain': 'google.com',
  28     'deviceStatusMessage': 'OK',
  29     'displayDeviceStatus': true,
  30     'displayStatusSection': true,
  31     'displayUserStatus': true,
  32     'user': 'simo@google.com',
  33     'userFetchInterval': '8min',
  34     'userId': 'D2AC39A2-3C8FC-E2C0-E45D2DC3782C',
  35     'userLastFetchTime': '9:50 PM',
  36     'userStatusMessage': 'OK'
  37   }
  38 };
  39
  40 cr.define('policies', function() {
  41
  42   function Policy() {
  43   }
  44
  45   cr.addSingletonGetter(Policy);
  46
  47   Policy.prototype = {
  48     /**
  49      * True if none of the received policies are actually set, false otherwise.
  50      * @type {boolean}
  51      */
  52     noActivePolicies_: false,
  53
  54     /**
  55      * The current search term for filtering of the policy table.
  56      * @type {string}
  57      * @private
  58      */
  59     searchTerm_: '',
  60
  61     /**
  62      * Takes the |policyData| argument and populates the page with this data. It
  63      * expects an object structure like the policyDataFormat above.
  64      * @param {Object} policyData Detailed info about policies.
  65      */
  66     renderTemplate: function(policyData) {
  67       this.noActivePolicies_ = !policyData.anyPoliciesSet;
  68
  69       if (this.noActivePolicies_)
  70         $('no-policies').hidden = false;
  71       if (policyData.status.displayStatusSection)
  72         $('status-section').hidden = false;
  73
  74       // This is the javascript code that processes the template:
  75       var input = new JsEvalContext(policyData);
  76       var output = $('data-template');
  77       jstProcess(input, output);
  78
  79       var toggles = document.querySelectorAll('.policy-set * .toggler');
  80       for (var i = 0; i < toggles.length; i++) {
  81         toggles[i].hidden = true;
  82         toggles[i].onclick = function() {
  83           Policy.getInstance().toggleCellExpand_(this);
  84         };
  85       }
  86
  87       var containers = document.querySelectorAll('.text-container');
  88       for (var i = 0; i < containers.length; i++)
  89         this.initTextContainer_(containers[i]);
  90     },
  91
  92     /**
  93      * Filters the table of policies by name.
  94      * @param {string} term The search string.
  95      */
  96     filterTable: function(term) {
  97       this.searchTerm_ = term.toLowerCase();
  98       var table = $('policy-table');
  99       var showUnsent = $('toggle-unsent-policies').checked;
 100       for (var r = 1; r < table.rows.length; r++) {
 101         var row = table.rows[r];
 102
 103         // Don't change visibility of policies that aren't set if the checkbox
 104         // isn't checked.
 105         if (!showUnsent && row.className == 'policy-unset')
 106           continue;
 107
 108         var nameCell = row.querySelector('.policy-name');
 109         var cellContents = nameCell.textContent;
 110         row.hidden =
 111             !(cellContents.toLowerCase().indexOf(this.searchTerm_) >= 0);
 112       }
 113     },
 114
 115     /**
 116      * Updates the visibility of the policies depending on the state of the
 117      * 'toggle-unsent-policies' checkbox.
 118      */
 119     updatePolicyVisibility: function() {
 120       if ($('toggle-unsent-policies').checked)
 121         $('policies').style.display = '';
 122       else if (this.noActivePolicies_)
 123         $('policies').style.display = 'none';
 124
 125       var tableRows = document.getElementsByClassName('policy-unset');
 126       for (var i = 0; i < tableRows.length; i++)
 127         tableRows[i].hidden = !($('toggle-unsent-policies').checked);
 128
 129       // Filter table again in case a search was active.
 130       this.filterTable(this.searchTerm_);
 131     },
 132
 133     /**
 134      * Expands or collapses a table cell that has overflowing text.
 135      * @param {Object} toggler The toggler that was clicked on.
 136      * @private
 137      */
 138     toggleCellExpand_: function(toggler) {
 139       var textContainer = toggler.parentElement;
 140       textContainer.collapsed = !textContainer.collapsed;
 141
 142       if (textContainer.collapsed)
 143         this.collapseCell_(textContainer);
 144       else
 145         this.expandCell_(textContainer);
 146     },
 147
 148     /**
 149      * Collapses all expanded table cells and updates the visibility of the
 150      * toggles accordingly. Should be called before the policy information in
 151      * the table is updated.
 152      */
 153     collapseExpandedCells: function() {
 154       var textContainers = document.querySelectorAll('.text-expanded');
 155       for (var i = 0; i < textContainers.length; i++)
 156         this.collapseCell_(textContainers[i]);
 157     },
 158
 159     /**
 160      * Expands a table cell so that all the text it contains is visible.
 161      * @param {Object} textContainer The cell's div element that contains the
 162      * text.
 163      * @private
 164      */
 165     expandCell_: function(textContainer) {
 166       textContainer.classList.remove('text-collapsed');
 167       textContainer.classList.add('text-expanded');
 168       textContainer.querySelector('.expand').hidden = true;
 169       textContainer.querySelector('.collapse').hidden = false;
 170     },
 171
 172     /**
 173      * Collapses a table cell so that overflowing text is hidden.
 174      * @param {Object} textContainer The cell's div element that contains the
 175      * text.
 176      * @private
 177      */
 178     collapseCell_: function(textContainer) {
 179       textContainer.classList.remove('text-expanded');
 180       textContainer.classList.add('text-collapsed');
 181       textContainer.querySelector('.expand').hidden = false;
 182       textContainer.querySelector('.collapse').hidden = true;
 183     },
 184
 185     /**
 186      * Initializes a text container, showing the expand toggle if necessary.
 187      * @param {Object} textContainer The text container element.
 188      */
 189     initTextContainer_: function(textContainer) {
 190       textContainer.collapsed = true;
 191       var textValue = textContainer.querySelector('.text-value');
 192
 193       // If the text is wider than the text container, the expand toggler should
 194       // appear.
 195       if (textContainer.offsetWidth < textValue.offsetWidth ||
 196           textContainer.offsetHeight < textValue.offsetHeight) {
 197         this.collapseCell_(textContainer);
 198       }
 199     }
 200   };
 201
 202   /**
 203    * Asks the C++ PolicyUIHandler to get details about policies and status
 204    * information. The PolicyUIHandler should reply to returnData() (below).
 205    */
 206   Policy.requestData = function() {
 207     chrome.send('requestData');
 208   };
 209
 210   /**
 211    * Called by the C++ PolicyUIHandler when it has the requested data.
 212    * @param {Object} policyData The policy information in the format described
 213    * by the policyDataFormat.
 214    */
 215   Policy.returnData = function(policyData) {
 216     var policy = Policy.getInstance();
 217     policy.collapseExpandedCells();
 218     policy.renderTemplate(policyData);
 219     policy.updatePolicyVisibility();
 220   };
 221
 222   /**
 223    * Called by the C++ PolicyUIHandler when a requested policy refresh has
 224    * completed.
 225    */
 226   Policy.refreshDone = function() {
 227     $('fetch-policies-button').disabled = false;
 228   };
 229
 230   /**
 231    * Asks the C++ PolicyUIHandler to re-fetch policy information.
 232    */
 233   Policy.triggerPolicyFetch = function() {
 234     chrome.send('fetchPolicy');
 235   };
 236
 237   /**
 238    * Determines whether a policy should be visible or not.
 239    * @param {Object} policy An entry in the 'policies' array given by the above
 240    * PolicyDataFormat.
 241    */
 242   Policy.shouldDisplayPolicy = function(policy) {
 243     return $('toggle-unsent-policies').checked || policy.set;
 244   };
 245
 246   /**
 247    * Initializes the page and loads the list of policies and the policy
 248    * status data.
 249    */
 250   Policy.initialize = function() {
 251     Policy.requestData();
 252
 253     // Set HTML event handlers.
 254     $('fetch-policies-button').onclick = function(event) {
 255       this.disabled = true;
 256       Policy.triggerPolicyFetch();
 257     };
 258
 259     $('toggle-unsent-policies').onchange = function(event) {
 260       Policy.getInstance().updatePolicyVisibility();
 261     };
 262
 263     $('search-field').onsearch = function(event) {
 264       Policy.getInstance().filterTable(this.value);
 265     };
 266   };
 267
 268   // Export
 269   return {
 270     Policy: Policy
 271   };
 272 });
 273
 274 var Policy = policies.Policy;
 275
 276 // Get data and have it displayed upon loading.
 277 document.addEventListener('DOMContentLoaded', policies.Policy.initialize);