Display material design policies grouped by tags.

chrome/browser/resources/md_policy/policy_ui.js

Index: chrome/browser/resources/md_policy/policy_ui.js
diff --git a/chrome/browser/resources/md_policy/policy_ui.js b/chrome/browser/resources/md_policy/policy_ui.js
new file mode 100644
index 0000000000000000000000000000000000000000..631e561540edba321cd8f756d13f32b8295adffa
--- /dev/null
+++ b/chrome/browser/resources/md_policy/policy_ui.js
@@ -0,0 +1,125 @@
+// 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',
+
+  properties: {
+    /** Object containing title and text of the introduction card. */

[stevenjb, 2015/10/09 16:10:14]

You can (and should) type Object properties:

/**
 * Object containing title and text of the introduction card.
 * @type { !{ title: string, text: string }|undefined }
 */

[fhorschig, 2015/10/09 16:30:39]

Nice to know, done for both classes.

+    introduction: {
+      type: Object,
+      reflectToAttribute: false,
+      readOnly: true,
+      notify: false
+    }
+  },
+
+  /** @override */
+  ready: function() {
+    // TODO(fhorschig): i18n! Replace sample text with reviewed message.
+    this._setIntroduction({
+      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) {
+    for (var pos = 0; pos < this.$.groups.children.length; ++pos)
+      if (this.$.groups.children[pos].riskTag == tag)
+        this.$.groups.children[pos].addPolicy(name);
+  },
+
+  /**
+   * Removes DOM Elements and empties list of known tags.
+   * @private
+   */
+  clearGroups_: function() {
+    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) {
+    this.$.groups.appendChild(new PolicyGroup(tag));
+  },
+
+  /**
+   * 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 tag groups.
+  },
+
+  /**
+   * 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.
+  }
+});