MD Settings: Certificate manager, move "Import" button to the tab level.

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/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/certificates_browser_proxy.html">
 <link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_error_dialog.html">
 
 <dom-module id="settings-certificate-manager-page">
   <template>
     <style>
-      /* TODO(dpapad): Find exact color value to use. */
       :host {
-        --paper-tabs-selection-bar-color: blue;
+        --paper-tabs-selection-bar-color: var(--paper-blue-500);
+      }
+
+      paper-tabs {
+        height: 40px;
+        margin-bottom: 24px;
+      }
+
+      paper-tab {
+        text-transform: uppercase;

[Dan Beam, 2016/04/01 18:38:02]

hmmm, why are we differing from Polymer in this regard?  did bettes thing
paper-tabs have ripples as well?

any time i see ALL UPPER text I assume it's got a ripple

[dpapad, 2016/04/01 21:13:17]

We don't use paper-tabs anywhere else in settings, so there is no consistency
problem here. With regards to Polymer, I don't know why @bettes chose upper case
here, would have to ask him.

[Dan Beam, 2016/04/02 02:08:16]

it's because all the demos are IN ALL UPPER (but not through style, the text is
LITERALLY UPPERCASED, UGH)

       }
     </style>
 
     <template is="dom-if" if="[[showCaTrustEditDialog_]]" restamp>
       <settings-ca-trust-edit-dialog model="[[dialogModel_]]">
       </settings-ca-trust-edit-dialog>
     </template>
     <template is="dom-if" if="[[showDeleteConfirmationDialog_]]" restamp>
       <settings-certificate-delete-confirmation-dialog
           model="[[dialogModel_]]"
           certificate-type="[[dialogModelCertificateType_]]">
       </settings-certificate-delete-confirmation-dialog>
     </template>
     <template is="dom-if" if="[[showPasswordEncryptionDialog_]]" restamp>
       <settings-certificate-password-encryption-dialog
           model="[[dialogModel_]]">
       </settings-certificate-password-encryption-dialog>
     </template>
     <template is="dom-if" if="[[showPasswordDecryptionDialog_]]" restamp>
       <settings-certificate-password-decryption-dialog>
       </settings-certificate-password-decryption-dialog>
     </template>
     <template is="dom-if" if="[[showErrorDialog_]]" restamp>
       <settings-certificates-error-dialog model="[[errorDialogModel_]]">
       </settings-certificates-error-dialog>
     </template>
 
-    <paper-tabs selected="{{selected}}">
+    <paper-tabs noink selected="{{selected}}">

[Dan Beam, 2016/04/01 18:38:02]

why no ink?

[dpapad, 2016/04/01 21:13:17]

The mocks don't specify ink/noink on this one. I chose to remove it, because the
ripple effect has a yellow-ish color that just looked weird IMO). We can fine
tune this in a follow up CL, if it requires feedback from @bettes.

[Dan Beam, 2016/04/02 02:08:16]

because this is unspecified i don't care, but i'd advise against bundling UI
changes without justification or consensus from Alan

       <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]]">
       <div>
         <settings-certificate-list id="personalCerts"
             certificates="[[personalCerts]]"
             certificate-type="[[certificateTypeEnum_.PERSONAL]]">
@@ skipping 20 matching lines @@
           <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>