Passwords: Focus view page fields with an outline for inputs / textarea

Before: http://screen/75H5jqRNZRBc5NY
After: http://screen/5xUj3f3iA4r52zJ

Bug: 1363507
Change-Id: I581adf1caf23b242bab5405f645f764bf9410b6b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3895591
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Adem Derinel <derinel@google.com>
Cr-Commit-Position: refs/heads/main@{#1049993}

chrome/browser/resources/settings/autofill_page/password_view.html

@@ -34,14 +34,23 @@
     width: 100%;
   }
 
-  settings-textarea {
-    --cr-input-background-color: transparent;
-    --cr-input-padding-start: 0;
-    --cr-input-readonly-opacity: 1;
+
+  :host-context(.focus-outline-visible) #note:focus,
+  :host-context(.focus-outline-visible) input:focus {
+    outline: 5px auto var(--cr-focus-outline-color);
+  }
+
+  #note {
+    padding-bottom: var(--cr-input-padding-bottom, 6px);
+    padding-inline-start: 0;
+    padding-top: var(--cr-input-padding-top, 6px);
+    white-space: pre-wrap;
+    width: 100%;
+    word-wrap: break-word;
   }
 
-  settings-textarea.empty-note {
-    --cr-input-color: var(--cr-secondary-text-color);
+  #note.empty-note {
+    color: var(--cr-secondary-text-color);
   }
 
   #editButton {
@@ -83,10 +92,12 @@
     </div>
     <template is="dom-if"
         if="[[isNoteEnabled_(credential, isPasswordNotesEnabled_)]]" restamp>
-      <settings-textarea id="note" class$="[[getNoteClass_(credential.note)]]"
-          value="[[getNoteValue_(credential.note)]]" readonly autogrow
-          label="$i18n{passwordNoteLabel}">
-      </settings-textarea>
+      <div id="noteLabel" class="cr-form-field-label">
+        $i18n{passwordNoteLabel}
+      </div>
+      <div id="note" class$="[[getNoteClass_(credential.note)]]"
+          aria-labelledby="noteLabel" role="textbox" aria-readonly="true"
+          tabindex="0">[[getNoteValue_(credential.note)]]</div>
     </template>
   </div>
   <div class="button-container">

chrome/browser/resources/settings/autofill_page/password_view.ts

@@ -10,7 +10,6 @@
 import 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
 import 'chrome://resources/cr_elements/cr_toast/cr_toast.js';
-import '../controls/settings_textarea.js';
 import '../i18n_setup.js';
 // <if expr="is_chromeos">
 import '../controls/password_prompt_dialog.js';
@@ -21,8 +20,9 @@ import './password_remove_dialog.js';
 import './passwords_shared.css.js';
 
 import {CrToastElement} from 'chrome://resources/cr_elements/cr_toast/cr_toast.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
 import {I18nMixin, I18nMixinInterface} from 'chrome://resources/cr_elements/i18n_mixin.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
+import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {loadTimeData} from '../i18n_setup.js';
@@ -174,6 +174,8 @@ export class PasswordViewElement extends PasswordViewElementBase {
 
     PasswordManagerImpl.getInstance().addPasswordManagerAuthTimeoutListener(
         this.passwordManagerAuthTimeoutListener_);
+
+    FocusOutlineManager.forDocument(document);
   }
 
   override disconnectedCallback() {

chrome/test/data/webui/settings/password_view_test.ts

@@ -120,10 +120,10 @@ suite('PasswordViewTest', function() {
                   assertEquals(
                       NOTE,
                       page.shadowRoot!.querySelector(
-                                          'settings-textarea')!.value);
+                                          '#note')!.innerHTML.trim());
                 } else {
-                  assertFalse(isVisible(
-                      page.shadowRoot!.querySelector('settings-textarea')));
+                  assertFalse(
+                      isVisible(page.shadowRoot!.querySelector('#note')));
                 }
               }));
 
@@ -203,7 +203,7 @@ suite('PasswordViewTest', function() {
     const page = await loadViewPage(passwordEntry);
     assertEquals(
         'No note added',
-        page.shadowRoot!.querySelector('settings-textarea')!.value);
+        page.shadowRoot!.querySelector('#note')!.innerHTML.trim());
   });
 
   test('Federated credential layout', async function() {