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..fe4f7b7a9961203ecbdffabfa07dee31468aa1df
--- /dev/null
+++ b/chrome/browser/resources/md_policy/policy_ui.js
@@ -0,0 +1,128 @@
+// 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 };

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

{Page: null}

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

Done.

+});
+
+/**
+ * @fileoverview
+ * 'policy-ui' is the main MD element, combining the UI and models.
+ *
+ * Example:
+ *
+ *    <policy-ui></policy-ui>

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

1 less space

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

Done.

+ *
+ * @group Chrome Policy Elements
+ * @element policy-ui
+ */
+PolicyUi = Polymer({
+  is: 'policy-ui',
+
+  properties: {
+    /**
+     * Object containing title and text of the introduction card.
+     * @type {!{ title: string, text: string }|undefined}

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

{title: string, text: string}

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

Done.

+     */
+    introduction: {
+      type: Object,
+      reflectToAttribute: false,
+      readOnly: true,
+      notify: false
+    }
+  },
+
+  /** @override */
+  ready: function() {
+    // TODO(fhorschig): i18n! Replace sample text with reviewed message.
+    this._setIntroduction({

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

don't call _ methods outside of your class

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

You can just use:

this.introduction = { title: ... }

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

Isn't this "inside" my class? Isn't this setter explicitly defined for this
class? My reasoning so far (apart from the earlier shared link) was: if you can
call it on a unmodified "this", it okay to do so. Also the compiler doesn't warn
me about a private function call.

Could you please show me the right way to do this for this as an example? :)

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

Apparently, setting the object like this doesn't trigger an update to the DOM. I
had to trigger a notification myself. Maybe the approach is different when the
attribute is complex (Array/Object instead of string/int)

[Dan Beam, 2015/10/13 16:56:09]

this.set('introduction', {...});

[stevenjb, 2015/10/13 17:30:15]

Polymer is a little funny regarding object notifications:
this.introduction = { ... };  // This *should* fire a notification
this.introduction.title = '...';  // This does *not* fire a notification
this.set('introduction', {...});  // This will fire a notification
this.set('introduction.title', '...');  // This will also fire a notification

[stevenjb, 2015/10/13 18:36:50]

I messed the 'readOnly' comment earlier. If you want to make |introduction|
readOnly, set it in |properties|:

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

(BTW, we don't usually specify reflectToAttribute, notify, or readOnly when they
have the default 'false' value).

Note: const / readOnly objects can be set this way, but if you want to
initialize other Objects inside |properties|, you need to use the pattern:

  value: function() { return {...} },

Otherwise every instance of the Polymer object would reference the same object
which (for non const objects) would be bad.

[fhorschig, 2015/10/14 18:23:41]

This works good for the introduction. The other properties are obviously not
readonly (the implications of this keyword are now clear) and are marked private
non-readonly now.

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

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

curlies around for () { }

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

Done.

+      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() {

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

this.$.groups.innerHTML = '';?

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

Nice!

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

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

can we use a dom-repeat or iron-list?

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

dom-repeat is awesome! Thanks for showing.
(iron-list doesn't load data synchronously and only renders elements that are
visible in the viewport --> no reliable access to groups when adding policy
names.)

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