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

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();
+
+/**
+ * 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',
+    },
+  ]
+}
+
+/**
+ * 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
+ */
+function renderTemplate(policyData) {
+  // This is the javascript code that processes the template:
+  var input = new JsEvalContext(policyData);
+  var output = document.getElementById('policiesTemplate');

[James Hawkins, 2011/08/10 17:38:08]

$('') here and elsewhere.

[simo, 2011/08/11 17:12:53]

Done.

+  jstProcess(input, output);
+}
+
+/**
+ * Asks the C++ PolicyUIHandler to get details about policies. The
+ * PolicyDOMHandler should reply to returnPolicyData() (below).
+ */
+function requestPolicyData() {
+  chrome.send('requestPolicyData', []);

[James Hawkins, 2011/08/10 17:38:08]

No need to pass this last (empty) param.

[simo, 2011/08/11 17:12:53]

Done.

+}
+
+/**
+* Called by the C++ PolicyUIHandler when it has the requested policy data.
+*/
+function returnPolicyData(policyData) {
+  renderTemplate(policyData);
+}
+
+/**
+* Determines whether a policy should be visible or not.
+* @param {policy} policy information in the format given by above the
+* PolicyDataFormat
+*/
+function shouldDisplayPolicy(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
+*/
+function isPolicySet(policy) {
+  return policy.set;
+}
+
+/**
+* Initializes the page and loads the list of policies.
+*/
+function load() {
+  i18nTemplate.process(document, templateData);
+  requestPolicyData();
+
+  // Set HTML event handlers.
+  $('toggle-unsent-policies').onchange = function (event) {
+    var table_rows = document.getElementsByClassName('policy-unset');
+    for (var i = 0; i < table_rows.length; ++i) {
+      if ($('toggle-unsent-policies').checked)
+        table_rows[i].style.display = 'table-row';
+      else
+        table_rows[i].style.display = 'none';
+    }
+
+    // Filter table again in case a search was active.
+    filterTable(search_term);
+  };
+
+  $('search-field').onsearch = function(event) {
+    filterTable(this.value);
+  };
+
+  $('search-field').placeholder = localStrings.getString('filterPoliciesText');
+}
+
+// The current search text for filtering the policy table.
+var search_term = '';
+
+/**
+* Filters the table of policies by name.
+* @param {term} The search string
+*/
+function filterTable (term) {
+  search_term = term.toLowerCase();
+  var table = document.getElementById('policy-table');
+  var show_unsent = $('toggle-unsent-policies').checked;
+  for (var r = 1; r < table.rows.length; ++r) {
+    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];
+    var cell_contents = name_cell.innerHTML.replace(/<[^>]+>/g,"");
+    if (cell_contents.toLowerCase().indexOf(search_term) >= 0)
+      row.style.display = 'table-row';
+    else
+      row.style.display = 'none';
+  }
+}
+
+// Get data and have it displayed upon loading.
+document.addEventListener('DOMContentLoaded', load);