Display material design policies grouped by tags.

chrome/browser/resources/md_policy/policy_ui.js

+// Copyright 2015 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.
+
+/**
+ * Define a global entry point that will be set when the page is initialized.
+ * @return {?PolicyUi}
+ */
+cr.define('policy', function() {
+  return { Page: null };
+});
+
+/**
+ * @fileoverview
+ * 'policy-ui' is the main MD element, combining the UI and models.
+ *
+ * Example:
+ *
+ *    <policy-ui></policy-ui>
+ *
+ * @group Chrome Policy Elements
+ * @element policy-ui
+ */
+PolicyUi = Polymer({
+  is: 'policy-ui',
+
+  /** @override */
+  created: function() {
+    /** @type {!Array<{name: string, element: !PolicyGroup}>} */

[stevenjb, 2015/10/08 17:12:39]

Make this a property

[fhorschig, 2015/10/09 11:57:32]

Removed. Figured out it's redundant to this.$.groups.children.

+    this.tagGroups = [];
+  },
+
+  /** @override */
+  ready: function() {
+    // TODO(fhorschig): i18n! Replace sample text with reviewed message.
+    /** @type {!{title: string, text: string}} */

[stevenjb, 2015/10/08 17:12:39]

This too

[fhorschig, 2015/10/09 11:57:31]

Done.

+    this.introduction = {
+      title: 'Managed account policies',
+      text:
+      'Your device and your user account are managed which means that ' +
+      'some of your settings are fixed by your administrator.\n' +
+      'The cards below explain how the administrator\'s choices may ' +
+      'impact your privacy or security.'
+    };
+
+    // Set this element as receiver of calls to the Page.
+    policy.Page = this;
+
+    // Notify the browser that the page has loaded, causing it to send the
+    // list of all known policies, the current policy values and the cloud
+    // policy status.
+    chrome.send('initialized');
+  },
+
+  /**
+   * Looks for the existing PolicyGroup matching the |tag| and triggers adding
+   * the policy to it.
+   * @private
+   * @param {string} name Name of the policy.
+   * @param {string} tag Name of the policy's tag.
+   */
+  addNameToTagGroup_: function(name, tag) {
+    var pos = 0;
+    while (pos < this.tagGroups.length &&
+           this.tagGroups[pos].name != tag) {
+      ++pos;
+    }
+    this.tagGroups[pos].element.addPolicy(name);
+  },
+
+  /**
+   * Removes DOM Elements and empties list of known tags.
+   * @private
+   */
+  clearGroups_: function() {
+    this.tagGroups = [];
+    while (this.$.groups.firstChild)
+      this.$.groups.removeChild(this.$.groups.firstChild);
+  },
+
+  /**
+   * Creates PolicyGroup and inserts it to list of known tags.
+   * @param {string} tag Name of the tag (included in i18n strings).
+   * @private
+   */
+  createTagGroup_: function(tag) {
+    var domNode = new PolicyGroup(loadTimeData.getString(tag));
+    this.tagGroups.push({
+      name: tag,
+      element: domNode
+    });
+    this.$.groups.appendChild(domNode);
+  },
+
+  /**
+   * Receives a list of known tags and creates an empty policy list for each.
+   * @param {!Array<string>} tags List of tags.
+   */
+  setPolicyGroups: function(tags) {
+    this.clearGroups_();
+    tags.forEach(this.createTagGroup_.bind(this));
+  },
+
+  /**
+   * Creates UI elements for tagged policies within the passed |names| object.
+   * @param {!{chromePolicyNames: !Object<!Array<string>>}} namesWithTags
+   */
+  setPolicyNames: function(namesWithTags) {
+    for (var name in namesWithTags.chromePolicyNames) {
+      namesWithTags.chromePolicyNames[name].forEach(
+          this.addNameToTagGroup_.bind(this, name));
+    }
+  },
+
+  /**
+   * Receives a list of current values that it hands down to children.
+   * @param {!{chromePolicies: !Object<string>}} values Current policies.
+   */
+  setPolicyValues: function(values) {
+    // TODO(fhorschig): Update or notify |this.tagGroups|.
+  },
+
+  /**
+   * Receives an object with meta data about the currently set policies.
+   * @param {!Object} status Dictionary containing meta data about set policies.
+   */
+  setStatus: function(status) {
+    // TODO(fhorschig): Update |this.$.introduction| with status information.
+    // text according to policy status.
+  }
+});