MD Settings: Certificate manager, populate UI.

 - Display all certificates.
 - Display menus for manipulating certificates.
 - Hook up a few of the menu actions.

Actions that require dialogs, will be hooked up in follow up CL.

BUG=547073

Review URL: https://codereview.chromium.org/1819563002

Cr-Commit-Position: refs/heads/master@{#383347}

14 files changed, 490 insertions, 102 deletions

diff --git a/chrome/app/settings_strings.grdp b/chrome/app/settings_strings.grdp
index f54eade..6810e9e9 100644
--- a/chrome/app/settings_strings.grdp
+++ b/chrome/app/settings_strings.grdp
@@ -217,21 +217,15 @@
     <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_SERVERS" desc="Label for the servers tab in certificate manager.">
       Servers
     </message>
-    <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_SERVERS_IDENTIFY" desc="Label for servers subtitle tab in certificate manager.">
-      You have certificates on file that identify these servers:
-    </message>
     <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_AUTHORITIES" desc="Label for the authorities tab in certificate manager.">
       Authorities
     </message>
-    <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_AUTHORITIES_YOU_HAVE_AUTHORITIES" desc="Label for authorities subtitle tab in certificate manager.">
-      You have certificates on file that identify these certificate authorities:
-    </message>
-    <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_OTHERS_YOU_HAVE_OTHERS" desc="Label for others subtitle tab in certificate manager.">
-      You have certificates on file that do not fit in any of the other categories:
-    </message>
     <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_VIEW" desc="Label for view button in certificate manager.">
       View
     </message>
+    <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_EDIT" desc="Label for the button in the certificate manager which allows you to edit certificate trust">
+      Edit
+    </message>
     <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_IMPORT" desc="Label for import button in certificate manager.">
       Import
     </message>
@@ -250,9 +244,6 @@
     <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_OTHERS" desc="Label for the others tab in certificate manager.">
       Others
     </message>
-    <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_YOU_HAVE_CERTIFICATES" desc="Label for your certificates subtitle tab in certificate manager.">
-      You have certificates from these organizations that identify you:
-    </message>
     <message name="IDS_SETTINGS_CERTIFICATE_MANAGER_USAGE_SSL_CLIENT" desc="The description of a certificate that is verified for use as an SSL client">
       SSL Client Certificate
     </message>
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html
new file mode 100644
index 0000000..23adb12
--- /dev/null
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.html
@@ -0,0 +1,35 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_subentry.html">
+
+<dom-module id="settings-certificate-entry">
+  <template>
+    <style include="settings-shared">
+      iron-collapse {
+        margin: 0 20px;
+      }
+    </style>
+
+    <div class="settings-box">
+      <div class="start">[[model.id]]</div>
+      <cr-expand-button expanded="{{expanded_}}"></cr-expand-button>
+    </div>
+    <iron-collapse opened="[[expanded_]]" no-animation>
+      <template is="dom-if" if="[[expanded_]]">
+        <template is="dom-repeat" items="[[model.subnodes]]">
+          <settings-certificate-subentry model="[[item]]"
+              certificate-type="[[certificateType]]">
+          </settings-certificate-subentry>
+        </template>
+      </template>
+    <iron-collapse>
+  </template>
+  <script src="certificate_entry.js"></script>
+</dom-module>
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.js
new file mode 100644
index 0000000..c2441ac
--- /dev/null
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_entry.js
@@ -0,0 +1,18 @@
+// Copyright 2016 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 An element that represents an SSL certificate entry.
+ */
+Polymer({
+  is: 'settings-certificate-entry',
+
+  properties: {
+    /** @type {!Certificate} */
+    model: Object,
+
+    /** @type {!settings.CertificateType} */
+    certificateType: String,
+  },
+});
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_list.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.html
new file mode 100644
index 0000000..39ce67b
--- /dev/null
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.html
@@ -0,0 +1,17 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_entry.html">
+
+<dom-module id="settings-certificate-list">
+  <template>
+    <template is="dom-repeat" items="[[certificates]]">
+      <settings-certificate-entry model="[[item]]"
+          certificate-type="[[certificateType]]">
+      </settings-certificate-entry>
+    </template>
+    <template is="dom-if" if="[[!certificates.length]]">
+      <!-- TODO(dpapad): Localize string -->
+      You have no certificates
+    </template>
+  </template>
+  <script src="certificate_list.js"></script>
+</dom-module>
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js
new file mode 100644
index 0000000..913ba18
--- /dev/null
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_list.js
@@ -0,0 +1,22 @@
+// Copyright 2016 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 'settings-certificate-list' is an element that displays a list
+ * of certificates.
+ */
+Polymer({
+  is: 'settings-certificate-list',
+
+  properties: {
+    /** @type {!Array<!Certificate>} */
+    certificates: {
+      type: Array,
+      value: function() { return []; },
+    },
+
+    /** @type {!settings.CertificateType} */
+    certificateType: String,
+  },
+});
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.css b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.css
deleted file mode 100644
index 24b0ceb..0000000
--- a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* 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. */
-
-.privacy-buttons {
-  margin-top: 25px;
-}
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html
index afc18a9..8fe34c4 100644
--- a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html
@@ -1,77 +1,58 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="chrome://md-settings/certificate_manager_page/ca_trust_edit_dialog.html">
 <link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_delete_confirmation_dialog.html">
-<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_password_encryption_dialog.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_list.html">
 <link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_password_decryption_dialog.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificate_password_encryption_dialog.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html">
 
 <dom-module id="settings-certificate-manager-page">
-  <link rel="import" type="css" href="certificate_manager_page.css">
   <template>
+    <style>
+      /* TODO(dpapad): Find exact color value to use. */
+      :host {
+        --paper-tabs-selection-bar-color: blue;
+      }
+    </style>
     <paper-tabs selected="{{selected}}">
-      <paper-tab i18n-content="certificateManagerYourCertificates"></paper-tab>
-      <paper-tab i18n-content="certificateManagerServers"></paper-tab>
-      <paper-tab i18n-content="certificateManagerAuthorities"></paper-tab>
-      <paper-tab i18n-content="certificateManagerOthers"></paper-tab>
+      <paper-tab>$i18n{certificateManagerYourCertificates}</paper-tab>
+      <paper-tab>$i18n{certificateManagerServers}</paper-tab>
+      <paper-tab>$i18n{certificateManagerAuthorities}</paper-tab>
+      <paper-tab>$i18n{certificateManagerOthers}</paper-tab>
     </paper-tabs>
-
-    <iron-pages selected="{{selected}}">
+    <iron-pages selected="[[selected]]">
       <div>
-        <div i18n-content="certificateManagerYourCertificatesSubtitle"></div>
-        <div class="privacy-buttons layout horizontal end-justified">
-          <paper-button i18n-content="certificateManagerView"></paper-button>
-          <paper-button i18n-content="certificateManagerImport"></paper-button>
-          <paper-button i18n-content="certificateManagerImportAndBind">
-          </paper-button>
-          <paper-button i18n-content="certificateManagerExport"></paper-button>
-          <paper-button i18n-content="certificateManagerDelete"></paper-button>
-          <span class="flex"></span>
-          <paper-button raised i18n-content="certificateManagerDone">
-          </paper-button>
-        </div>
+        <settings-certificate-list id="personalCerts"
+            certificates="[[personalCerts]]"
+            certificate-type="[[certificateTypeEnum_.PERSONAL]]">
+        </settings-certificate-list>
       </div>
       <div>
-        <div i18n-content="certificateManagerServersSubtitle"></div>
-        <div class="privacy-buttons layout horizontal end-justified">
-          <paper-button disabled i18n-content="certificateManagerView">
-          </paper-button>
-          <paper-button i18n-content="certificateManagerImport"></paper-button>
-          <paper-button disabled i18n-content="certificateManagerExport">
-          </paper-button>
-          <paper-button disabled i18n-content="certificateManagerDelete">
-          </paper-button>
-          <span class="flex"></span>
-          <paper-button raised  i18n-content="certificateManagerDone">
-          </paper-button>
-        </div>
+        <template is="dom-if" if="[[isTabSelected_(selected, 1)]]">
+          <settings-certificate-list id="serverCerts"
+              certificates="[[serverCerts]]"
+              certificate-type="[[certificateTypeEnum_.SERVER]]">
+          </settings-certificate-list>
+        </template>
       </div>
       <div>
-        <div i18n-content="certificateManagerAuthoritiesSubtitle"></div>
-        <div class="privacy-buttons layout horizontal end-justified">
-          <paper-button i18n-content="certificateManagerView"></paper-button>
-          <paper-button i18n-content="certificateManagerImport"></paper-button>
-          <paper-button i18n-content="certificateManagerExport"></paper-button>
-          <paper-button i18n-content="certificateManagerDelete"></paper-button>
-          <span class="flex"></span>
-          <paper-button raised i18n-content="certificateManagerDone">
-          </paper-button>
-        </div>
+        <template is="dom-if" if="[[isTabSelected_(selected, 2)]]">
+          <settings-certificate-list id="caCerts"
+              certificates="[[caCerts]]"
+              certificate-type="[[certificateTypeEnum_.CA]]">
+          </settings-certificate-list>
+        </template>
       </div>
       <div>
-        <div i18n-content="certificateManagerOthersSubtitle"></div>
-        <div class="privacy-buttons layout horizontal end-justified">
-          <paper-button disabled i18n-content="certificateManagerView">
-          </paper-button>
-          <paper-button disabled i18n-content="certificateManagerExport">
-          </paper-button>
-          <paper-button disabled i18n-content="certificateManagerDelete">
-          </paper-button>
-          <span class="flex"></span>
-          <paper-button raised i18n-content="certificateManagerDone">
-          </paper-button>
-        </div>
+        <template is="dom-if" if="[[isTabSelected_(selected, 3)]]">
+          <settings-certificate-list id="otherCerts"
+              certificates="[[otherCerts]]"
+              certificate-type="[[certificateTypeEnum_.OTHER]]">
+          </settings-certificate-list>
+        </template>
       </div>
     </iron-pages>
   </template>
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js
index 14979a3..14fb032f 100644
--- a/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.js
@@ -3,18 +3,66 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview
- * 'settings-certificate-manager-page' is the settings page containing SSL
- * certificate settings.
- *
- * Example:
- *
- *    <iron-animated-pages>
- *      <settings-certificate-manager-page prefs="{{prefs}}">
- *      </settings-certificate-manager-page>
- *      ... other pages ...
- *    </iron-animated-pages>
+ * @fileoverview 'settings-certificate-manager-page' is the settings page
+ * containing SSL certificate settings.
  */
 Polymer({
   is: 'settings-certificate-manager-page',
+
+  behaviors: [WebUIListenerBehavior],
+
+  properties: {
+    /** @type {number} */
+    selected: {
+      type: Number,
+      value: 0,
+    },
+
+    /** @type {!Array<!Certificate>} */
+    personalCerts: {
+      type: Array,
+      value: function() { return []; },
+    },
+
+    /** @type {!Array<!Certificate>} */
+    serverCerts: {
+      type: Array,
+      value: function() { return []; },
+    },
+
+    /** @type {!Array<!Certificate>} */
+    caCerts: {
+      type: Array,
+      value: function() { return []; },
+    },
+
+    /** @type {!Array<!Certificate>} */
+    otherCerts: {
+      type: Array,
+      value: function() { return []; },
+    },
+
+    /** @private */
+    certificateTypeEnum_: {
+      type: Object,
+      value: settings.CertificateType,
+      readonly: true,
+    },
+  },
+
+  /** @override */
+  attached: function() {
+    this.addWebUIListener('certificates-changed', this.set.bind(this));
+    settings.CertificatesBrowserProxyImpl.getInstance().refreshCertificates();
+  },
+
+  /**
+   * @param {number} selectedIndex
+   * @param {number} tabIndex
+   * @return {boolean} Whether to show tab at |tabIndex|.
+   * @private
+   */
+  isTabSelected_: function(selectedIndex, tabIndex) {
+    return selectedIndex == tabIndex;
+  },
 });
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html
new file mode 100644
index 0000000..94805c7
--- /dev/null
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.html
@@ -0,0 +1,68 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
+
+<dom-module id="settings-certificate-subentry">
+  <template>
+    <style include="settings-shared">
+      .dropdown-content {
+        background: white;
+        /* TODO(dpapad): Use a CSS variable for box-shadow and unify with other
+         *  such menus (like in search engines section) */
+        box-shadow: 0 2px 6px grey;
+      }
+
+      .container {
+        display: flex;
+        line-height: 30px;
+      }
+
+      .name {
+        flex: auto;
+        margin: auto;
+      }
+
+      paper-item:hover {
+        background-color: var(--google-grey-300);
+      }
+    </style>
+    <div class="container">
+      <paper-icon-button icon="image:brightness-1"></paper-icon-button>
+      <div class="name">[[model.name]]</div>
+      <paper-icon-button icon="more-vert" toggles active="{{menuOpened}}">
+      </paper-icon-button>
+      <!-- TODO(dpapad): Figure out RTL for this menu -->
+      <template is="dom-if" if="[[menuOpened]]">
+        <iron-dropdown vertical-align="top" horizontal-align="right"
+            opened="{{menuOpened}}">
+          <div class="dropdown-content">
+            <paper-item on-tap="onViewTap_">
+              $i18n{certificateManagerView}
+            </paper-item>
+            <paper-item hidden$="[[!canEdit_(certificateType)]]"
+                on-tap="onEditTap_">
+              $i18n{certificateManagerEdit}
+            </paper-item>
+            <paper-item on-tap="onExportTap_">
+              $i18n{certificateManagerExport}
+            </paper-item>
+            <paper-item hidden$="[[!canImport_(certificateType)]]"
+                on-tap="onImportTap_">
+              $i18n{certificateManagerImport}
+            </paper-item>
+            <paper-item hidden$="[[model.readonly]]"
+                on-tap="onDeleteTap_">
+              $i18n{certificateManagerDelete}
+            </paper-item>
+          </div>
+        </iron-dropdown>
+      </template>
+    <div>
+  </template>
+  <script src="certificate_subentry.js"></script>
+</dom-module>
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js
new file mode 100644
index 0000000..b750ebb
--- /dev/null
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_subentry.js
@@ -0,0 +1,111 @@
+// Copyright 2016 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 settings-certificate-subentry represents an SSL certificate
+ * sub-entry.
+ */
+Polymer({
+  is: 'settings-certificate-subentry',
+
+  properties: {
+    /** @type {!CertificateSubnode>} */
+    model: Object,
+
+    /** @type {!settings.CertificateType} */
+    certificateType: String,
+  },
+
+  /** @private {!settings.CertificatesManagerBrowserProxy} */
+  browserProxy_: null,
+
+  /** @override */
+  ready: function() {
+    this.browserProxy_ = settings.CertificatesBrowserProxyImpl.getInstance();
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onViewTap_: function(event) {
+    this.closePopupMenu_();
+    this.browserProxy_.viewCertificate(this.model.id);
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onEditTap_: function(event) {
+    this.closePopupMenu_();
+    // TODO(dpapad): Open edit dialog.
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onDeleteTap_: function(event) {
+    this.closePopupMenu_();
+    // TODO(dpapad): Open delete confirmation dialog.
+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  onExportTap_: function(event) {
+    this.closePopupMenu_();
+    if (this.certificateType == settings.CertificateType.PERSONAL) {
+      // TODO(dpapad): Open password encryption dialog.
+    } else {
+      this.browserProxy_.exportCertificate(this.model.id);
+    }
+  },
+
+  /** @private */
+  onImportTap_: function() {
+    this.closePopupMenu_();
+    if (this.certificateType == settings.CertificateType.PERSONAL) {
+      // TODO(dpapad): Figure out when to pass true (ChromeOS?).
+      this.browserProxy_.importPersonalCertificate(false).then(
+          function(showPasswordPrompt) {
+            if (showPasswordPrompt) {
+              // TODO(dpapad): Show password decryption dialog.
+            }
+          }.bind(this));
+    } else if (this.certificateType == settings.CertificateType.CA) {
+      this.browserProxy_.importCaCertificate().then(
+          function(certificateName) {
+            // TODO(dpapad): Show import dialog.
+          }.bind(this));
+    } else if (this.certificateType == settings.CertificateType.SERVER) {
+      this.browserProxy_.importServerCertificate();
+    }
+  },
+
+  /**
+   * @param {string} certificateType The type of this certificate.
+   * @return {boolean} Whether the certificate can be edited.
+   * @private
+   */
+  canEdit_: function(certificateType) {
+    return this.certificateType == settings.CertificateType.CA;
+  },
+
+  /**
+   * @param {string} certificateType The type of this certificate.
+   * @return {boolean} Whether a certificate can be imported.
+   * @private
+   */
+  canImport_: function(certificateType) {
+    return this.certificateType != settings.CertificateType.OTHER;
+  },
+
+  /** @private */
+  closePopupMenu_: function() {
+    this.$$('iron-dropdown').close();
+  },
+});
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js b/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js
index cf2cbe4..3554426 100644
--- a/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificates_browser_proxy.js
@@ -80,9 +80,9 @@ cr.define('settings', function() {
 
   CertificatesBrowserProxy.prototype = {
     /**
-     * Triggers two events in the following order
-     * 1) 'certificates-model-ready' event.
-     * 2) 'certificates-changed' event.
+     * Triggers 5 events in the following order
+     * 1x 'certificates-model-ready' event.
+     * 4x 'certificates-changed' event, one for each certificate category.
      */
     refreshCertificates: function() {},
 
diff --git a/chrome/browser/resources/settings/settings_resources.grd b/chrome/browser/resources/settings/settings_resources.grd
index 4cf76ed..262dfc3 100644
--- a/chrome/browser/resources/settings/settings_resources.grd
+++ b/chrome/browser/resources/settings/settings_resources.grd
@@ -163,15 +163,30 @@
                  file="settings_ui/settings_ui.js"
                  type="chrome_html" />
       <if expr="use_nss_certs">
-        <structure name="IDR_SETTINGS_CERTIFICATE_MANAGER_PAGE_CSS"
-                   file="certificate_manager_page/certificate_manager_page.css"
-                   type="chrome_html" />
         <structure name="IDR_SETTINGS_CERTIFICATE_MANAGER_PAGE_HTML"
                    file="certificate_manager_page/certificate_manager_page.html"
                    type="chrome_html" />
         <structure name="IDR_SETTINGS_CERTIFICATE_MANAGER_PAGE_JS"
                    file="certificate_manager_page/certificate_manager_page.js"
                    type="chrome_html" />
+        <structure name="IDR_SETTINGS_CERTIFICATE_LIST_HTML"
+                   file="certificate_manager_page/certificate_list.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CERTIFICATE_LIST_JS"
+                   file="certificate_manager_page/certificate_list.js"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CERTIFICATE_ENTRY_HTML"
+                   file="certificate_manager_page/certificate_entry.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CERTIFICATE_ENTRY_JS"
+                   file="certificate_manager_page/certificate_entry.js"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CERTIFICATE_SUBENTRY_HTML"
+                   file="certificate_manager_page/certificate_subentry.html"
+                   type="chrome_html" />
+        <structure name="IDR_SETTINGS_CERTIFICATE_SUBENTRY_JS"
+                   file="certificate_manager_page/certificate_subentry.js"
+                   type="chrome_html" />
         <structure name="IDR_SETTINGS_CERTIFICATES_BROWSER_PROXY_HTML"
                    file="certificate_manager_page/certificates_browser_proxy.html"
                    type="chrome_html" />
diff --git a/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc b/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
index 471ff36..99d1f61 100644
--- a/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
+++ b/chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc
@@ -203,19 +203,12 @@ void AddCertificateManagerStrings(content::WebUIDataSource* html_source) {
       {"certificateManagerPageTitle", IDS_SETTINGS_CERTIFICATE_MANAGER},
       {"certificateManagerYourCertificates",
        IDS_SETTINGS_CERTIFICATE_MANAGER_YOUR_CERTIFICATES},
-      {"certificateManagerYourCertificatesSubtitle",
-       IDS_SETTINGS_CERTIFICATE_MANAGER_YOU_HAVE_CERTIFICATES},
       {"certificateManagerServers", IDS_SETTINGS_CERTIFICATE_MANAGER_SERVERS},
-      {"certificateManagerServersSubtitle",
-       IDS_SETTINGS_CERTIFICATE_MANAGER_SERVERS_IDENTIFY},
       {"certificateManagerAuthorities",
        IDS_SETTINGS_CERTIFICATE_MANAGER_AUTHORITIES},
-      {"certificateManagerAuthoritiesSubtitle",
-       IDS_SETTINGS_CERTIFICATE_MANAGER_AUTHORITIES_YOU_HAVE_AUTHORITIES},
       {"certificateManagerOthers", IDS_SETTINGS_CERTIFICATE_MANAGER_OTHERS},
-      {"certificateManagerOthersSubtitle",
-       IDS_SETTINGS_CERTIFICATE_MANAGER_OTHERS_YOU_HAVE_OTHERS},
       {"certificateManagerView", IDS_SETTINGS_CERTIFICATE_MANAGER_VIEW},
+      {"certificateManagerEdit", IDS_SETTINGS_CERTIFICATE_MANAGER_EDIT},
       {"certificateManagerImport", IDS_SETTINGS_CERTIFICATE_MANAGER_IMPORT},
       {"certificateManagerImportAndBind",
        IDS_SETTINGS_CERTIFICATE_MANAGER_IMPORT_AND_BIND},
diff --git a/chrome/test/data/webui/settings/certificate_manager_page_test.js b/chrome/test/data/webui/settings/certificate_manager_page_test.js
index ed3c20f..b4644ec 100644
--- a/chrome/test/data/webui/settings/certificate_manager_page_test.js
+++ b/chrome/test/data/webui/settings/certificate_manager_page_test.js
@@ -19,6 +19,7 @@ cr.define('certificate_manager_page', function() {
       'exportPersonalCertificatePasswordSelected',
       'getCaCertificateTrust',
       'importPersonalCertificatePasswordSelected',
+      'refreshCertificates',
     ]);
 
     /** @private {!CaTrustInfo} */
@@ -68,14 +69,30 @@ cr.define('certificate_manager_page', function() {
           'importPersonalCertificatePasswordSelected').resolve(password);
       return Promise.resolve();
     },
+
+    /** @override */
+    refreshCertificates: function() {
+      this.methodCalled('refreshCertificates');
+    },
   };
 
+  /** @return {!Certificate} */
+  function createSampleCertificate() {
+    return {
+      id: 'dummyCertificateId',
+      name: 'dummyCertificateName',
+      subnodes: [
+        createSampleCertificateSubnode()
+      ],
+    };
+  }
+
   /** @return {!CertificateSubnode} */
   function createSampleCertificateSubnode() {
     return {
       extractable: false,
-      id: 'dummyId',
-      name: 'dummyName',
+      id: 'dummySubnodeId',
+      name: 'dummySubnodeName',
       policy: false,
       readonly: false,
       untrusted: false,
@@ -301,12 +318,91 @@ cr.define('certificate_manager_page', function() {
     });
   }
 
+  function registerPageTests() {
+    /** @type {?SettingsCertificateManagerPage} */
+    var page = null;
+
+    /** @type {?TestCertificatesBrowserProxy} */
+    var browserProxy = null;
+
+    /** @enum {number} */
+    var CertificateCategoryIndex = {
+      PERSONAL: 0,
+      SERVER: 1,
+      CA: 2,
+      OTHER: 3,
+    };
+
+    suite('CertificateManagerPageTests', function() {
+      setup(function() {
+        browserProxy = new TestCertificatesBrowserProxy();
+        settings.CertificatesBrowserProxyImpl.instance_ = browserProxy;
+        PolymerTest.clearBody();
+        page = document.createElement('settings-certificate-manager-page');
+        document.body.appendChild(page);
+      });
+
+      teardown(function() { page.remove(); });
+
+      /**
+       * Test that the page requests information from the browser on startup and
+       * that it gets populated accordingly.
+       */
+      test('Initialization', function() {
+        // Trigger all category tabs to be added to the DOM.
+        var paperTabsElement = page.shadowRoot.querySelector('paper-tabs');
+        paperTabsElement.selected = CertificateCategoryIndex.PERSONAL;
+        Polymer.dom.flush();
+        paperTabsElement.selected = CertificateCategoryIndex.SERVER;
+        Polymer.dom.flush();
+        paperTabsElement.selected = CertificateCategoryIndex.CA;
+        Polymer.dom.flush();
+        paperTabsElement.selected = CertificateCategoryIndex.OTHER;
+        Polymer.dom.flush();
+        var certificateLists = page.shadowRoot.querySelectorAll(
+            'settings-certificate-list');
+        assertEquals(4, certificateLists.length);
+
+        var assertCertificateListLength = function(
+            listIndex, expectedSize) {
+          var certificateEntries =
+              certificateLists[listIndex].shadowRoot.querySelectorAll(
+                  'settings-certificate-entry');
+          assertEquals(expectedSize, certificateEntries.length);
+        };
+
+        assertCertificateListLength(CertificateCategoryIndex.PERSONAL, 0);
+        assertCertificateListLength(CertificateCategoryIndex.SERVER, 0);
+        assertCertificateListLength(CertificateCategoryIndex.CA, 0);
+        assertCertificateListLength(CertificateCategoryIndex.OTHER, 0);
+
+        return browserProxy.whenCalled('refreshCertificates').then(
+            function() {
+              // Simulate response for personal and CA certificates.
+              cr.webUIListenerCallback(
+                  'certificates-changed', 'personalCerts',
+                  [createSampleCertificate()]);
+              cr.webUIListenerCallback(
+                  'certificates-changed', 'caCerts',
+                  [createSampleCertificate(), createSampleCertificate()]);
+              Polymer.dom.flush();
+
+              assertCertificateListLength(CertificateCategoryIndex.PERSONAL, 1);
+              assertCertificateListLength(CertificateCategoryIndex.SERVER, 0);
+              assertCertificateListLength(CertificateCategoryIndex.CA, 2);
+              assertCertificateListLength(CertificateCategoryIndex.OTHER, 0);
+            });
+      });
+    });
+  }
+
   return {
     registerTests: function() {
       registerCaTrustEditDialogTests();
       registerDeleteDialogTests();
       registerPasswordEncryptDialogTests();
       registerPasswordDecryptDialogTests();
+      registerPageTests();
     },
   };
 });