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>
-    <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>
+    <style>
+      :host {
+        --paper-tabs-selection-bar-color: blue;

[Dan Beam, 2016/03/22 02:08:28]

where did you get this color from?

[dpapad, 2016/03/22 18:07:02]

It is blue-ish on the mocks. Should probably be changed to a MD spec blue-ish
color. As said in the CL description, the focus of this CL is functionality, not
so much polish.

+      }
+    </style>
+    <paper-tabs selected="{{selected}}" no-slide>

[Dan Beam, 2016/03/22 02:08:28]

why no-slide?

[dpapad, 2016/03/22 18:07:02]

Removed. It looked funky IMO, and the mocks don't specify slide or no-slide.
Also we don't use paper-tabs anywhere else in Settings, so there is no other
example.

+      <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>
+        <!--
+          certificate-type value must match settings.CertificateType.PERSONAL
+        -->

[Dan Beam, 2016/03/22 02:08:28]

just mirror the enum somewhere on |this|, as in

  properties: {
    certType_: settings.CertificateType,
  },

then, from here:

  certificate-type="[[certType_.PERSONAL]]"
  if="[[isTabSelected_(selected, certType_.PERSONAL)]]"

or whatevers

[dpapad, 2016/03/22 18:07:02]

1/2 Done. I mirrored the enum, such that I don't need to replicate the string
literals.

The 2nd part of your suggestion (modifying the signature of isTabSelected)
requires keeping track of additional unnecessary state (certificate type to
numerical index, such that it can be compared to "selected"), so I don't see the
benefit.

+        <settings-certificate-list id="personalCerts"
+            certificates="[[personalCerts]]" certificate-type="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>
+        <!--
+          certificate-type value must match settings.CertificateType.SERVER
+        -->
+        <template is="dom-if" if="[[isTabSelected_(selected, 1)]]">
+          <settings-certificate-list id="serverCerts"
+              certificates="[[serverCerts]]" certificate-type="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>
+        <!--
+          certificate-type value must match settings.CertificateType.CA
+        -->
+        <template is="dom-if" if="[[isTabSelected_(selected, 2)]]">
+          <settings-certificate-list id="caCerts"
+              certificates="[[caCerts]]" certificate-type="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>
+        <!--
+          certificate-type value must match settings.CertificateType.OTHER
+        -->
+        <template is="dom-if" if="[[isTabSelected_(selected, 3)]]">
+          <settings-certificate-list id="otherCerts"
+              certificates="[[otherCerts]]"
+              certificate-type="other">
+          </settings-certificate-list>
+        </template>
       </div>
     </iron-pages>
   </template>
   <script src="certificate_manager_page.js"></script>
 </dom-module>