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..79945b4f6db1445bd29a917d015b3a1c4f4662e5
--- /dev/null
+++ b/chrome/browser/resources/md_policy/policy_ui.js
@@ -0,0 +1,124 @@
+// 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.
+
+/**
+ * @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
+ */
+Polymer({
+  is: 'policy-ui',
+
+  /** @override */
+  created: function() {
+    this.tagGroups = [];

[stevenjb, 2015/10/07 17:09:33]

declare tagGroups as a typed property or variable in the object.

[fhorschig, 2015/10/08 09:35:46]

Done.

+  },
+
+  /** @override */
+  ready: function() {
+    // TODO(fhorschig): i18n! Replace sample text with reviewed message.
+    this.introduction = {

[stevenjb, 2015/10/07 17:09:33]

Declare and type introduction

[fhorschig, 2015/10/08 09:35:46]

Done.

+      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');

[stevenjb, 2015/10/07 17:09:32]

Prefer a more specifically named identifier, e.g. policyUiInitialized.

[fhorschig, 2015/10/08 09:35:45]

We are using the same signal for capturing if chrome://policy or
chrome://md-policy is initialized. Chrome reacts the same way in both cases and
changing the signal name would introduce more complexity than necessary. Any
identifier named specifically for this element would conflict with the old code,
so I would like to keep the old identifier.

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

I see, OK.

+  },
+
+  /**
+   * 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;

[stevenjb, 2015/10/07 17:09:32]

Use {} when the condition or statement is more than 1 line.

[fhorschig, 2015/10/08 09:35:46]

Done. Thanks, didn't know this rule.

+    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);

[stevenjb, 2015/10/07 17:09:32]

2 spaces here, not 4.

[fhorschig, 2015/10/08 09:35:46]

Done.

+  },
+
+  /**
+   * Creates PolicyGroup and inserts it to list of known tags.
+   * @private

[stevenjb, 2015/10/07 17:09:32]

@private last

[fhorschig, 2015/10/08 09:35:46]

Done.

+   * @param {string} tag Name of the tag (included in i18n strings).
+   */
+  createTagGroup_: function(tag) {
+    var domNode = new PolicyGroup(loadTimeData.getString(tag));
+    this.tagGroups.push({
+      name: tag,
+      element: domNode
+    });
+    this.$.groups.appendChild(domNode);
+  },
+
+  /**
+   * Receives an list of known tags and creates an empty policy list for each.

[stevenjb, 2015/10/07 17:09:32]

a list

[fhorschig, 2015/10/08 09:35:46]

Done.

+   * @param {Array} tags List of tags.

[stevenjb, 2015/10/07 17:09:32]

{!Array<string>}  (Always use ! or ? before Object or object typedefs and Array)

[fhorschig, 2015/10/08 09:35:46]

Done.

+   */
+  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<string, Array<string>>}} namesWithTags

[stevenjb, 2015/10/07 17:09:32]

!Object<!Array<string>>  (keys are always strings so we omit the type)

[fhorschig, 2015/10/08 09:35:46]

Done.

+   */
+  setPolicyNames: function(namesWithTags) {
+    for (var name in namesWithTags.chromePolicyNames)
+      namesWithTags.chromePolicyNames[name].forEach(
+          this.addNameToTagGroup_.bind(this, name));

[stevenjb, 2015/10/07 17:09:33]

{}

[fhorschig, 2015/10/08 09:35:46]

Done.

+  },
+
+  /**
+   * Receives a list of current values that it hands down to children.
+   * @param {Object} values Dictionary containing the current policy values.

[stevenjb, 2015/10/07 17:09:33]

{!Object} or {?Object}

[fhorschig, 2015/10/08 09:35:46]

Done.

+   */
+  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.

[stevenjb, 2015/10/07 17:09:33]

! or ?

[fhorschig, 2015/10/08 09:35:46]

Done.

+   */
+  setStatus: function(status) {
+    // TODO(fhorschig): Update |this.$.introduction| with status information.
+    // text according to policy status.
+  }
+});
+
+// Define a global entry point that will be set when the page is initialized.
+cr.define('policy', function() {

[stevenjb, 2015/10/07 17:09:33]

Can we put this above the Polymer object so that it is visibly declared before
it is used? Also, type the return value.

[fhorschig, 2015/10/08 09:35:45]

Done.

+  return { Page: null };
+});