MD Settings: Certificate manager, populate UI.

chrome/browser/resources/settings/certificate_manager_page/certificate_manager_page.html

 <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_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/certificate_password_decryption_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>
   <script src="certificate_manager_page.js"></script>
 </dom-module>