First CL for the about:policy page. This only implements the policy section of the page.

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
new file mode 100644
index 0000000000000000000000000000000000000000..729ab5019209cb3326dced4e09b46e732b14062b
--- /dev/null
+++ b/chrome/browser/resources/policy.js
@@ -0,0 +1,171 @@
+// 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();
+
+/**
+ * This variable structure is here to document the structure that the template
+ * expects to correctly populate the page.
+ */
+var policyDataformat = {
+  'policies': [
+    {
+      'level': 'managed',
+      'name': 'AllowXYZ',
+      'set': true,
+      'source_type': 'Device',
+      'status': 'ok',
+      'value': 'true',
+    },
+  ],
+  'any_policies_set': true

[arv (Not doing code reviews), 2011/08/11 23:30:58]

do you have control of the json schema? Can you change to camelCase?

[simo, 2011/08/16 17:36:34]

Done.

+}

[arv (Not doing code reviews), 2011/08/11 23:30:58]

missing semicolon

[simo, 2011/08/16 17:36:34]

Done.

+
+cr.define('cr.ui', function() {
+
+  function Policy() {
+  }
+
+  cr.addSingletonGetter(Policy);
+
+  Policy.prototype = {
+
+    /**
+    * True if none of the received policies are actually set, false otherwise.

[arv (Not doing code reviews), 2011/08/11 23:30:58]

/**
 * ...
 */

[simo, 2011/08/16 17:36:34]

Done.

+    * @type {boolean}
+    */
+    no_active_policies_: false,

[arv (Not doing code reviews), 2011/08/11 23:30:58]

no underscores in js names

[simo, 2011/08/16 17:36:34]

Done.

+
+    /**
+    * The current search term for filtering of the policy table.
+    * @type {string}
+    */
+    search_term_: '',
+
+    /**
+    * 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.
+    * @param {Object} policyData Detailed info about policies
+    */
+    renderTemplate: function(policyData) {
+      this.no_active_policies_ = !policyData.any_policies_set;
+      // This is the javascript code that processes the template:
+      var input = new JsEvalContext(policyData);
+      var output = $('policiesTemplate');
+      jstProcess(input, output);
+    },
+
+    /**
+    * Filters the table of policies by name.
+    * @param {term} The search string

[arv (Not doing code reviews), 2011/08/11 23:30:58]

@param {TypeName} type The search string.

[simo, 2011/08/16 17:36:34]

Done.

+    */
+    filterTable: function(term) {
+      this.search_term_ = term.toLowerCase();
+      var table = $('policy-table');
+      var show_unsent = $('toggle-unsent-policies').checked;

[arv (Not doing code reviews), 2011/08/11 23:30:58]

no underscores

[simo, 2011/08/16 17:36:34]

Done.

+      for (var r = 1; r < table.rows.length; ++r) {

[arv (Not doing code reviews), 2011/08/11 23:30:58]

r++

[simo, 2011/08/16 17:36:34]

Done.

+        var row = table.rows[r];
+
+        // Don't change visibility of policies that aren't set if the checkbox
+        // isn't checked.
+        if (!show_unsent && row.className == 'policy-unset')
+          continue;
+
+        var name_cell = row.getElementsByClassName('policy-name')[0];

[arv (Not doing code reviews), 2011/08/11 23:30:58]

var nameCell = row.querySelector('.policy-name');

[simo, 2011/08/16 17:36:34]

Done.

+        var cell_contents = name_cell.innerHTML.replace(/<[^>]+>/g,"");

[arv (Not doing code reviews), 2011/08/11 23:30:58]

use single quoted strings... but this use of innerHTML is pretty suspicious. Can
you just use textContent instead?

[simo, 2011/08/16 17:36:34]

Done.

+        if (cell_contents.toLowerCase().indexOf(this.search_term_) >= 0)
+          row.style.display = 'table-row';
+        else
+          row.style.display = 'none';
+      }
+    },
+
+    /**
+    * Updates the visibility of the policies depending on the state of the
+    * 'toggle-unsent-policies' checkbox.
+    */
+    updatePolicyVisibility: function() {
+      if ($('toggle-unsent-policies').checked)
+          $('policies').style.display = '';

[arv (Not doing code reviews), 2011/08/11 23:30:58]

How about using the 'hidden' dom property instead?

[simo, 2011/08/16 17:36:34]

Done.

+      else if (this.no_active_policies_)
+          $('policies').style.display = 'none';
+
+      var table_rows = document.getElementsByClassName('policy-unset');
+      for (var i = 0; i < table_rows.length; ++i) {

[arv (Not doing code reviews), 2011/08/11 23:30:58]

Prefer post increment in JS for consistency

[simo, 2011/08/16 17:36:34]

Done.

+        if ($('toggle-unsent-policies').checked)
+          table_rows[i].style.display = 'table-row';

[arv (Not doing code reviews), 2011/08/11 23:30:58]

here too

[simo, 2011/08/16 17:36:34]

Done.

+        else
+          table_rows[i].style.display = 'none';
+      }
+
+      // Filter table again in case a search was active.
+      this.filterTable(this.search_term_);
+    }
+  };
+
+  /**
+   * Asks the C++ PolicyUIHandler to get details about policies. The
+   * PolicyDOMHandler should reply to returnPolicyData() (below).
+   */
+  Policy.requestPolicyData = function() {
+    chrome.send('requestPolicyData');
+  };
+
+  /**
+  * Called by the C++ PolicyUIHandler when it has the requested policy data.
+  */
+  Policy.returnPolicyData = function(policyData) {
+    Policy.getInstance().renderTemplate(policyData);
+  };
+
+  /**
+  * Determines whether a policy should be visible or not.
+  * @param {policy} policy information in the format given by above the
+  * PolicyDataFormat
+  */
+  Policy.shouldDisplayPolicy = function(policy) {
+    return $('toggle-unsent-policies').checked || policy.set;
+  };
+
+  /**
+  * Returns true if the given policy was actually set and false otherwise (i.e.
+  * it is just one of the policies supported by the client but isn't set to a
+  * value).
+  * @policy {policy} information in the format given by above PolicyDataFormat
+  */
+  Policy.isPolicySet = function(policy) {

[arv (Not doing code reviews), 2011/08/11 23:30:58]

This seems pretty useless. Can you inline this?

[simo, 2011/08/16 17:36:34]

Done.

+    return policy.set;
+  };
+
+  /**
+  * Initializes the page and loads the list of policies.
+  */
+  Policy.initialize = function() {
+    i18nTemplate.process(document, templateData);
+    Policy.requestPolicyData();
+
+    // Set HTML event handlers.
+    $('toggle-unsent-policies').onchange = function (event) {

[arv (Not doing code reviews), 2011/08/11 23:30:58]

... = function(event) {

[simo, 2011/08/16 17:36:34]

Done.

+      Policy.getInstance().updatePolicyVisibility();
+    };
+
+    $('search-field').onsearch = function(event) {
+      Policy.getInstance().filterTable(this.value);
+    };
+
+    $('search-field').placeholder =
+        localStrings.getString('filterPoliciesText');
+  };
+
+  // Export
+  return {
+    Policy: Policy
+  };
+});
+
+var Policy = cr.ui.Policy;
+
+// Get data and have it displayed upon loading.
+document.addEventListener('DOMContentLoaded', cr.ui.Policy.initialize);