Settings WebUI: Use list for better information representation in management subpage

Bug: 879146
Change-Id: I68231705893ab32b2bc21764c3d074c2fd995d79
Reviewed-on: https://chromium-review.googlesource.com/c/1422737Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Cr-Commit-Position: refs/heads/master@{#627012}

chrome/browser/resources/settings/about_page/management_page.html

@@ -3,6 +3,7 @@
 <link rel="import" href="management_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="../icons.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 
 <dom-module id="settings-management-page">
@@ -19,6 +20,7 @@
 
       ul {
         list-style-type : none;
+        margin: 0;
         padding: 0;
         text-align: start;
       }
@@ -26,7 +28,6 @@
       #reportingInfoList div {
         align-items: center;
         display: flex;
-        margin-bottom: 2em;
       }
 
       #reportingInfoList div + div {
@@ -38,6 +39,11 @@
         width: 24px;
       }
 
+      #reportingInfoList,
+      #extensionsTable {
+        margin-bottom: 2em;
+      }
+
       .table-head {
         font-weight: 500;
       }
@@ -70,30 +76,52 @@
         </span>
       </div>
 
-      <div class="settings-box block single-column" id="policies" hidden>
-        <h2>$i18n{managementDeviceReporting}</h2>
-        <div class="content-indented subtitle" id="deviceConfiguration">
-            $i18n{managementDeviceConfiguration}
-        </div>
-        <div id="reportingInfoList">
-          <div class="content-indented" id="reportingDevice" hidden>
-            <iron-icon icon="settings:computer"></iron-icon>
-            <span id="reportingDeviceText"> </span>
-          </div>
-          <div class="content-indented" id="reportingSecurity" hidden>
-            <iron-icon icon="settings:security"></iron-icon>
-            <span id="reportingSecurityText"> </span>
+      <template is="dom-if" if="[[!shouldHidePolicies_(reportingDevice_,
+          reportingSecurity_, reportingUserActivity_, reportingWeb_)]]">
+        <div class="settings-box block single-column" id="policies">
+          <h2>$i18n{managementDeviceReporting}</h2>
+          <div class="content-indented subtitle" id="deviceConfiguration">
+              $i18n{managementDeviceConfiguration}
           </div>
-          <div class="content-indented" id="reportingUserActivity" hidden>
-            <iron-icon icon="settings:person"></iron-icon>
-            <span id="reportingUserActivityText"> </span>
-          </div>
-          <div class="content-indented" id="reportingWeb" hidden>
-            <iron-icon icon="settings:public"></iron-icon>
-            <span id="reportingWebText"> </span>
+          <div id="reportingInfoList">
+            <div class="content-indented"
+              hidden$="[[!reportingDevice_.length]]">
+              <iron-icon icon="settings:computer"></iron-icon>
+              <ul>
+                <template is="dom-repeat" items="[[reportingDevice_]]">
+                  <li>[[i18n(item)]]</li>
+                </template>
+              </ul>
+            </div>
+            <div class="content-indented"
+              hidden$="[[!reportingSecurity_.length]]">
+              <iron-icon icon="settings:security"></iron-icon>
+              <ul>
+                <template is="dom-repeat" items="[[reportingSecurity_]]">
+                  <li>[[i18n(item)]]</li>
+                </template>
+              </ul>
+            </div>
+            <div class="content-indented"
+              hidden$="[[!reportingUserActivity_.length]]">
+              <iron-icon icon="settings:person"></iron-icon>
+              <ul>
+                <template is="dom-repeat" items="[[reportingUserActivity_]]">
+                  <li>[[i18n(item)]]</li>
+                </template>
+              </ul>
+            </div>
+            <div class="content-indented" hidden$="[[!reportingWeb_.length]]">
+              <iron-icon icon="settings:public"></iron-icon>
+              <ul>
+                <template is="dom-repeat" items="[[reportingWeb_]]">
+                  <li>[[i18n(item)]]</li>
+                </template>
+              </ul>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
 
       <div class="settings-box two-line single-column" id="extensions" hidden>
         <h2>$i18n{managementExtensionReporting}</h2>

chrome/browser/resources/settings/about_page/management_page.js

@@ -9,9 +9,34 @@
 Polymer({
   is: 'settings-management-page',
 
+  behaviors: [I18nBehavior],
+
+  properties: {
+    /** @private {!Array<string>} */
+    reportingDevice_: Array,
+
+    /** @private {!Array<string>} */
+    reportingSecurity_: Array,
+
+    /** @private {!Array<string>} */
+    reportingUserActivity_: Array,
+
+    /** @private {!Array<string>} */
+    reportingWeb_: Array,
+  },
+
   /** @private {?settings.ManagementBrowserProxy} */
   browserProxy_: null,
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldHidePolicies_: function() {
+    return !this.reportingDevice_.length && !this.reportingSecurity_.length &&
+        !this.reportingUserActivity_.length && !this.reportingWeb_.length;
+  },
+
   /** @private */
   getDeviceManagementStatus_: function() {
     this.browserProxy_.getDeviceManagementStatus()
@@ -27,89 +52,6 @@ Polymer({
             () => {});
   },
 
-  /** @private */
-  getReportingDevice_: function() {
-    this.browserProxy_.getReportingDevice().then(reportingSources => {
-      if (reportingSources.length == 0) {
-        return;
-      }
-      let reportingInfoAdded = false;
-
-      for (const id of reportingSources) {
-        reportingInfoAdded = true;
-        this.$.reportingDeviceText.textContent +=
-            loadTimeData.getString(id) + ' ';
-      }
-
-      if (reportingInfoAdded) {
-        this.$.policies.hidden = false;
-        this.$.reportingDevice.hidden = false;
-      }
-    });
-  },
-
-  /** @private */
-  getReportingSecurity_: function() {
-    this.browserProxy_.getReportingSecurity().then(reportingSources => {
-      if (reportingSources.length == 0) {
-        return;
-      }
-      let reportingInfoAdded = false;
-
-      for (const id of reportingSources) {
-        reportingInfoAdded = true;
-        this.$.reportingSecurityText.textContent +=
-            loadTimeData.getString(id) + ' ';
-      }
-
-      if (reportingInfoAdded) {
-        this.$.policies.hidden = false;
-        this.$.reportingSecurity.hidden = false;
-      }
-    });
-  },
-
-  /** @private */
-  getReportingUserActivity_: function() {
-    this.browserProxy_.getReportingUserActivity().then(reportingSources => {
-      if (reportingSources.length == 0) {
-        return;
-      }
-      let reportingInfoAdded = false;
-
-      for (const id of reportingSources) {
-        reportingInfoAdded = true;
-        this.$.reportingUserActivityText.textContent +=
-            loadTimeData.getString(id) + ' ';
-      }
-
-      if (reportingInfoAdded) {
-        this.$.policies.hidden = false;
-        this.$.reportingUserActivity.hidden = false;
-      }
-    });
-  },
-
-  /** @private */
-  getReportingWeb_: function() {
-    this.browserProxy_.getReportingWeb().then(reportingSources => {
-      if (reportingSources.length == 0) {
-        return;
-      }
-      let reportingInfoAdded = false;
-
-      for (const id of reportingSources) {
-        reportingInfoAdded = true;
-        this.$.reportingWebText.textContent += loadTimeData.getString(id) + ' ';
-      }
-
-      if (reportingInfoAdded) {
-        this.$.policies.hidden = false;
-        this.$.reportingWeb.hidden = false;
-      }
-    });
-  },
-
   /** @private */
   getExtensions_: function() {
     // Show names and permissions of |extensions| in a table.
@@ -166,13 +108,21 @@ Polymer({
 
     this.getDeviceManagementStatus_();
 
-    this.getReportingDevice_();
+    this.browserProxy_.getReportingDevice().then(reportingSources => {
+      this.reportingDevice_ = reportingSources;
+    });
 
-    this.getReportingSecurity_();
+    this.browserProxy_.getReportingSecurity().then(reportingSources => {
+      this.reportingSecurity_ = reportingSources;
+    });
 
-    this.getReportingUserActivity_();
+    this.browserProxy_.getReportingUserActivity().then(reportingSources => {
+      this.reportingUserActivity_ = reportingSources;
+    });
 
-    this.getReportingWeb_();
+    this.browserProxy_.getReportingWeb().then(reportingSources => {
+      this.reportingWeb_ = reportingSources;
+    });
 
     this.getExtensions_();