settings UI: change layout of security key fingerprint enrollment dialog

From the overview page of the fingerprint enrollment dialog for
chrome://settings/securityKeys, drop the table's header and top-most separator
line. Also align the page's subheader ("Fingerprints on this security key")
with the dialog title ("Manage fingerprints"), and align the right-hand sides
of the dialog body and button container (in order to align the secondary "Add"
button, table and "Done" button visually).

Also change the dialog title while enrolling a new fingerprint to "Add
fingerprint".

Demo: https://drive.google.com/open?id=1xmJj3XA9Vzz0Dx5G9a822HJdGDKC12WM

Bug: 974046
Change-Id: I77aa2d45a3d3a98a1472cd1865d2ac8a8488db48
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1907548
Commit-Queue: Martin Kreichgauer <martinkr@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714693}

chrome/app/settings_strings.grdp

@@ -5313,16 +5313,19 @@
   <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_DIALOG_TITLE" desc="The title of a dialog that lets users view, add, rename, and delete fingerprints on their security key (an authentication hardware device).">
     Manage fingerprints
   </message>
+  <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_ADD_TITLE" desc="The title of a dialog instructing a user to touch their security key (an authentication hardware device) to enroll a fingerprint on it.">
+    Add fingerprint
+  </message>
   <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_CHOOSE_NAME" desc="A label instructing the user to provide a descriptive name for a fingerprint enrolled to a security key.">
     Choose a name for this fingerprint
   </message>
   <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_NAME_LABEL" desc="A label for a text input field containing a descriptive name for a fingerprint enrolled to a security key.">
     Name
   </message>
-  <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_NO_ENROLLMENTS" desc="A label informing the user that there are no fingerprints stored on their security key (authentication hardware device).">
-    Your security key has no fingerprints stored.
+  <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_NO_ENROLLMENTS_LABEL" desc="A label informing the user that there are no fingerprints stored on their security key (authentication hardware device).">
+    Your security key has no fingerprints stored
   </message>
-  <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_LABEL" desc="A label describing a list of fingerprints enrolled with a security key (authentication hardware device).">
+  <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_ENROLLMENTS_LABEL" desc="A label describing a list of fingerprints enrolled with a security key (authentication hardware device).">
     Fingerprints on this security key
   </message>
   <message name="IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_ENROLLING_LABEL" desc="A label instructing the user to repeatedly touch the fingerprint sensor on their security key (authentication hardware device) to take samples for a new fingerprint.">

chrome/browser/resources/settings/privacy_page/security_keys_bio_enroll_dialog.html

@@ -20,10 +20,20 @@
 <dom-module id="settings-security-keys-bio-enroll-dialog">
   <template>
     <style include="settings-shared">
+      div[slot='body'] {
+        /* Make the secondary 'Add' button in the body to align with the
+           primary 'Done' button in the body-container. */
+        padding-inline-end: 16px;
+      }
+
       #header {
         display: flex;
       }
 
+      #header .header-label {
+        flex: auto;
+      }
+
       iron-icon {
         padding-inline-end: 12px;
       }
@@ -36,18 +46,14 @@
         flex: 3;
       }
 
-      .icon-placeholder {
-        width: var(--cr-icon-ripple-size);
-      }
-
-      #outer {
-        padding: 0 var(--cr-section-padding);
+      #container {
+        padding-inline-start: var(--cr-section-padding);
       }
     </style>
 
     <cr-dialog id="dialog" close-text="$i18n{cancel}" ignore-popstate
         on-close="onDialogClosed_">
-      <div slot="title">$i18n{securityKeysBioEnrollmentDialogTitle}</div>
+      <div slot="title">[[dialogTitle_(dialogPage_)]]</div>
 
       <div slot="body">
         <iron-pages attr-for-selected="id" selected="[[dialogPage_]]"
@@ -64,47 +70,33 @@
           </div>
 
           <div id="enrollments">
-            <div class="settings-box first">
-              <h2 class="start">$i18n{securityKeysBioEnrollmentLabel}</h2>
+            <div id="header" class="list-item column-header">
+              <h2 class="header-label">[[enrollmentsHeader_(enrollments_)]]</h2>
+
               <cr-button id="addButton" on-click="addButtonClick_"
                   class="secondary-button header-aligned-button">
                 $i18n{add}
               </cr-button>
             </div>
 
-
-            <div id="outer">
-              <div id="header" class="list-item column-header"
-                   hidden="[[!hasSome_(enrollments_)]]">
-                <div class="name">
-                  $i18n{securityKeysBioEnrollmentNameLabel}
-                </div>
-                <div class="icon-placeholder"></div>
-              </div>
-
-              <div id="container" hidden="[[!hasSome_(enrollments_)]]">
-                <iron-list id="enrollmentList" items="[[enrollments_]]"
-                    class="cr-separators">
-                  <template>
-                    <div class="list-item">
-                      <iron-icon icon="cr-fingerprint-icon:enrollment-done">
-                      </iron-icon>
-                      <div class="name" aria-label="[[item.name]]">
-                        [[item.name]]
-                      </div>
-                      <cr-icon-button class="icon-clear"
-                          aria-label="i18n{securityKeysBioEnrollmentDelete}"
-                          on-click="deleteEnrollment_"
-                          disabled="[[deleteInProgress_]]">
-                      </cr-icon-button>
+            <div id="container">
+              <iron-list id="enrollmentList" items="[[enrollments_]]"
+                  class="cr-separators">
+                <template>
+                  <div class="list-item" first$="[[!index]]">
+                    <iron-icon icon="cr-fingerprint-icon:enrollment-done">
+                    </iron-icon>
+                    <div class="name" aria-label="[[item.name]]">
+                      [[item.name]]
                     </div>
-                  </template>
-                </iron-list>
-              </div>
-
-              <p hidden="[[hasSome_(enrollments_)]]">
-                $i18n{securityKeysBioEnrollmentNoEnrollments}
-              </p>
+                    <cr-icon-button class="icon-clear"
+                        aria-label="i18n{securityKeysBioEnrollmentDelete}"
+                        on-click="deleteEnrollment_"
+                        disabled="[[deleteInProgress_]]">
+                    </cr-icon-button>
+                  </div>
+                </template>
+              </iron-list>
             </div>
           </div>
 

chrome/browser/resources/settings/privacy_page/security_keys_bio_enroll_dialog.js

@@ -301,15 +301,6 @@ Polymer({
     e.stopPropagation();
   },
 
-  /**
-   * @private
-   * @param {?Array} list
-   * @return {boolean} true if the list exists and has items.
-   */
-  hasSome_: function(list) {
-    return !!(list && list.length);
-  },
-
   /**
    * @private
    * @param {!DomRepeatEvent} event
@@ -330,5 +321,29 @@ Polymer({
   onEnrollmentNameInput_: function() {
     this.confirmButtonDisabled_ = !this.recentEnrollmentName_.length;
   },
+
+  /**
+   * @private
+   * @param {string} dialogPage
+   * @return {string} The title string for the current dialog page.
+   */
+  dialogTitle_: function(dialogPage) {
+    if (dialogPage == 'enroll' || dialogPage == 'chooseName') {
+      return this.i18n('securityKeysBioEnrollmentAddTitle');
+    }
+    return this.i18n('securityKeysBioEnrollmentDialogTitle');
+  },
+
+  /**
+   * @private
+   * @param {?Array} enrollments
+   * @return {string} The header label for the enrollments page.
+   */
+  enrollmentsHeader_: function(enrollments) {
+    return this.i18n(
+        enrollments && enrollments.length ?
+            'securityKeysBioEnrollmentEnrollmentsLabel' :
+            'securityKeysBioEnrollmentNoEnrollmentsLabel');
+  },
 });
 })();

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -3277,16 +3277,18 @@ void AddExtensionsStrings(content::WebUIDataSource* html_source) {
 
 void AddSecurityKeysStrings(content::WebUIDataSource* html_source) {
   static constexpr LocalizedString kSecurityKeysStrings[] = {
+      {"securityKeysBioEnrollmentAddTitle",
+       IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_ADD_TITLE},
       {"securityKeysBioEnrollmentDialogTitle",
        IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_DIALOG_TITLE},
       {"securityKeysBioEnrollmentEnrollingCompleteLabel",
        IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_ENROLLING_COMPLETE_LABEL},
       {"securityKeysBioEnrollmentEnrollingLabel",
        IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_ENROLLING_LABEL},
-      {"securityKeysBioEnrollmentLabel",
-       IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_LABEL},
-      {"securityKeysBioEnrollmentNoEnrollments",
-       IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_NO_ENROLLMENTS},
+      {"securityKeysBioEnrollmentEnrollmentsLabel",
+       IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_ENROLLMENTS_LABEL},
+      {"securityKeysBioEnrollmentNoEnrollmentsLabel",
+       IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_NO_ENROLLMENTS_LABEL},
       {"securityKeysBioEnrollmentSubpageDescription",
        IDS_SETTINGS_SECURITY_KEYS_BIO_ENROLLMENT_SUBPAGE_DESCRIPTION},
       {"securityKeysBioEnrollmentSubpageLabel",