Display material design policies grouped by tags.

chrome/browser/resources/md_policy/policy_group.js

Index: chrome/browser/resources/md_policy/policy_group.js
diff --git a/chrome/browser/resources/md_policy/policy_group.js b/chrome/browser/resources/md_policy/policy_group.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec098a195c3890e79c1c5ba35d76140c5d03eedf
--- /dev/null
+++ b/chrome/browser/resources/md_policy/policy_group.js
@@ -0,0 +1,65 @@
+// 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-group' is an MD element, that contains a description of a group
+ * and all policies that are tagged with the groups name. Policies with multiple
+ * tags will appear in multiple groups.
+ *
+ * Example:
+ *
+ *    <policy-group></policy-group>
+ *
+ *   By inserting an element as created with
+ *
+ *   new PolicyGroup('Privacy and Security')
+ *
+ *   into a document's DOM  would render a paper card with the title 'Privacy
+ *   and Security'. New Policies are added with |addPolicy|.

[Dan Beam, 2015/10/10 01:04:18]

indent off, should be

* Example:
*
*   <policy-group></policy-group>
*
* By inserting

[fhorschig, 2015/10/13 16:29:11]

Done.

[fhorschig, 2015/10/13 16:29:11]

Done.

+ *
+ * @group Chrome Policy Elements
+ * @element policy-group
+ */
+PolicyGroup = Polymer({
+  is: 'policy-group',
+
+  properties: {
+    /** Tag name used as title for the group card. */
+    riskTag: {
+      type: String,
+      reflectToAttribute: true,
+      readOnly: true,
+      notify: false
+    }
+  },
+
+  /**
+   * @override
+   * @param {string} riskTag String ID used as title for the group card.
+   */
+  factoryImpl: function(riskTag) {
+    this._setRiskTag(riskTag);

[Dan Beam, 2015/10/10 01:04:18]

is this calling a private polymer method?

[stevenjb, 2015/10/12 17:02:46]

I don't actually see this documented anywhere, and it doesn't appear to be a
method on the Polymer objects I tested. Any reason why this shouldn't be just
'this.riskTag = riskTag' ?

[fhorschig, 2015/10/13 16:29:11]

Isn't this a private method from this very class?
I thought this way to go after reading:
https://www.polymer-project.org/1.0/docs/devguide/properties.html#read-only
Another reason is notification of change for readonly methods.

+  },
+
+  /**
+   * Used in HMTL file to translate displayed string.
+   * @param {string} key The key for the i18n.
+   * @return {string} i18n of |key|.
+   */
+  translate: function(key) {

[Dan Beam, 2015/10/10 01:04:18]

is this used outside of this function?

[Dan Beam, 2015/10/10 01:04:18]

can you use I18nBehavior for this (and maybe move it to shared location)?

[stevenjb, 2015/10/12 16:55:37]

Dan: I just noticed that we put i18n_behavior in
c/b/resources/settings/i18n_behavior/. Should we move it to
ui/webui/cr_resources ?

[Dan Beam, 2015/10/12 18:14:20]

yes, now that there's a need for it from other places

[fhorschig, 2015/10/13 16:29:11]

It is not used outside this function. As proposed, I moved the behavior to
resources and included it from there.

+    return loadTimeData.getString(key);
+  },
+
+  /**
+   * Creates a new DOM element for the given policy.
+   * @param {string} policy Name of the policy.
+   */
+  addPolicy: function(policy) {
+    // TODO(fhorschig): Create policy paper-items with possibility to (un)fold.
+    var node = document.createElement('p');
+    node.textContent = policy;
+    this.$.content.appendChild(node);
+  }
+});