Fix focus highlight on PWM settings page.

<cr-link-row> uses `:last-of-type` to trigger rounding its bottom
corners so a hidden <cr-link-row> at the end will break that. Thus the
passkey management row needs to be added & removed from the DOM using a
`dom-if` instead.

Fixed: 1433617
Change-Id: I0f99097e40c22da493b15c6e4dda31e663b62ce4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4435749
Reviewed-by: Viktor Semeniuk <vsemeniuk@google.com>
Commit-Queue: Viktor Semeniuk <vsemeniuk@google.com>
Auto-Submit: Adam Langley <agl@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1131811}

chrome/browser/resources/password_manager/settings_section.html

diff --git a/chrome/browser/resources/password_manager/settings_section.html b/chrome/browser/resources/password_manager/settings_section.html
index e7b1207..dc47e5f 100644
--- a/chrome/browser/resources/password_manager/settings_section.html
+++ b/chrome/browser/resources/password_manager/settings_section.html
@@ -102,10 +102,12 @@
       sub-label="$i18n{addShortcutDescription}" role-description="button">
   </cr-link-row>
   <if expr="is_win or is_macosx">
-    <cr-link-row id="managePasskeysRow" external
-        class="cr-row settings-cr-link-row" hidden$="[[!hasPasskeys_]]"
-        on-click="onManagePasskeysClick_" label="$i18n{managePasskeysLabel}">
-    </cr-link-row>
+    <template is="dom-if" if="[[hasPasskeys_]]" restamp>
+      <cr-link-row id="managePasskeysRow" external
+          class="cr-row settings-cr-link-row" on-click="onManagePasskeysClick_"
+          label="$i18n{managePasskeysLabel}">
+      </cr-link-row>
+    </template>
   </if>
 </div>
 <h3 id="blockedSitesTitle" class="page-title">$i18n{blockedSitesTitle}</h3>

chrome/browser/resources/password_manager/settings_section.ts

diff --git a/chrome/browser/resources/password_manager/settings_section.ts b/chrome/browser/resources/password_manager/settings_section.ts
index 8e5b11f..57966504 100644
--- a/chrome/browser/resources/password_manager/settings_section.ts
+++ b/chrome/browser/resources/password_manager/settings_section.ts
@@ -32,7 +32,6 @@
     blockedSitesList: HTMLElement,
     passwordToggle: PrefToggleButtonElement,
     trustedVaultBanner: CrLinkRowElement,
-    managePasskeysRow: CrLinkRowElement,
   };
 }
 

chrome/test/data/webui/password_manager/settings_section_test.ts

diff --git a/chrome/test/data/webui/password_manager/settings_section_test.ts b/chrome/test/data/webui/password_manager/settings_section_test.ts
index 73ad871..ecfd61cf 100644
--- a/chrome/test/data/webui/password_manager/settings_section_test.ts
+++ b/chrome/test/data/webui/password_manager/settings_section_test.ts
@@ -407,7 +407,7 @@
     document.body.appendChild(settings);
     await passkeysProxy.whenCalled('passkeysHasPasskeys');
     flush();
-    assertFalse(isVisible(settings.$.managePasskeysRow));
+    assertFalse(!!settings.shadowRoot!.querySelector('#managePasskeysRow'));
   });
 
   test('managePasskeysShownWhenNeeded', async function() {
@@ -416,10 +416,11 @@
     document.body.appendChild(settings);
     await passkeysProxy.whenCalled('passkeysHasPasskeys');
     flush();
-    const row = settings.$.managePasskeysRow;
-    assertTrue(isVisible(row));
+    const managePasskeysRow = settings.shadowRoot!.querySelector<HTMLElement>(
+                                  '#managePasskeysRow') as HTMLElement;
+    assertTrue(!!managePasskeysRow);
 
-    row.click();
+    managePasskeysRow.click();
     const url = await openWindowProxy.whenCalled('openUrl');
     assertEquals('chrome://settings/passkeys', url);
   });