MD Settings: Certificate manager, password encryption dialog.

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

Index: chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html
diff --git a/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html b/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html
new file mode 100644
index 0000000000000000000000000000000000000000..323b4ef9fa3ca041bbc5f78122c2ff9489d49b3f
--- /dev/null
+++ b/chrome/browser/resources/settings/certificate_manager_page/certificate_password_encryption_dialog.html
@@ -0,0 +1,43 @@
+<link rel="import" href="chrome://resources/html/polymer_config.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="chrome://md-settings/i18n_setup.html">
+<link rel="import" href="chrome://md-settings/settings_dialog.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
+<link rel="import" href="chrome://md-settings/certificate_manager_page/certificates_browser_proxy.html">
+
+<dom-module id="settings-certificate-password-encryption-dialog">
+  <template>
+    <style include="settings-shared">
+      .password-buttons {
+        margin-bottom: 20px;
+      }
+    </style>
+    <settings-dialog id="dialog">
+      <div class="title">$i18n{certificateManagerEncryptPasswordTitle}</div>
+      <div class="body">
+        <div class="password-buttons">
+          <paper-input type="password" always-float-label
+              value="{{password_}}" id="password"
+              i18n-values="label:certificateManagerPasswordLabel"
+              on-input="validate_"></paper-input>
+          <paper-input type="password" always-float-label
+              value="{{confirmPassword_}}" id="confirmPassword"
+              i18n-values="label:certificateManagerConfirmPasswordLabel"
+              on-input="validate_"></paper-input>
+        </div>
+        <div>$i18n{certificateManagerEncryptPasswordDescription}</div>

[dschuyler, 2016/03/11 21:18:15]

Please try styling with with class="row" to make 
the min-height 40px and see if we can remove the
.password-buttons class above.
Maybe make the paper-inputs above class="row" as
well if that helps.  (We may need a two-line row
at 52px for the paper-inputs, maybe).

[dpapad, 2016/03/14 19:34:49]

I tried the suggestion about using CSS class "row".

Class row brings in 3 styles, align-items:center, display:flex, min-height:
40px. Out of these three, only min-height is relevant to the div here. The div
has no children so display flex makes little sense, and center align also does
not apply here (text should be left-aligned).

Similar for adding "row" in the paper-buttons. Is there a way to share only the
useful part of min-height without inheriting unwanted CSS rules (maybe using a
CSS var for min-height)?

Can we leave such polish for later CLs, since the focus for now is on landing
functionality?

[dschuyler, 2016/03/14 21:20:13]

Thank you for trying it.  Yeah, let's revisit this separately.
I'd like to have a common set of classes that we use and avoid
local styling where practical.

+      </div>
+      <div class="button-container">
+        <paper-button class="cancel-button" on-tap="onCancelTap_">
+          $i18n{cancel}
+        </paper-button>
+        <paper-button id="ok" class="action-button" on-tap="onOkTap_" disabled>
+          $i18n{ok}
+        </paper-button>
+      </div>
+    </settings-dialog>
+  </template>
+  <script src="certificate_password_encryption_dialog.js"></script>
+</dom-module>