[Passwords] Add barebones password view page

This CL introduces a blank page for password viewing page, which will
be replacing the PASSWORD_VIEW mode in password edit dialog. The future
CLs will fill the page contents, handle authorization, editing, etc.

Bug: 1298027
Change-Id: Id4affc6ad9b17eda3feb08aab035c8f690376215
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3560448
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Adem Derinel <derinel@google.com>
Cr-Commit-Position: refs/heads/main@{#988449}

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

@@ -57,6 +57,14 @@
           <settings-password-check prefs="{{prefs}}"></settings-password-check>
         </settings-subpage>
       </template>
+      <template is="dom-if" if="[[enablePasswordViewPage_]]">
+        <template is="dom-if" route-path="/passwords/view">
+          <settings-subpage page-title="[[credential.urls.shown]]">
+            <password-view credential="{{credential}}">
+            </password-view>
+            </settings-subpage>
+        </template>
+      </template>
       <template is="dom-if" route-path="/payments">
         <settings-subpage
             associated-control="[[$$('#paymentManagerButton')]]"

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

@@ -17,11 +17,13 @@ import '../settings_shared_css.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BaseMixin} from '../base_mixin.js';
+import {loadTimeData} from '../i18n_setup.js';
 import {PrefsMixin} from '../prefs/prefs_mixin.js';
 import {routes} from '../route.js';
 import {Router} from '../router.js';
 
 import {getTemplate} from './autofill_page.html.js';
+import {MultiStorePasswordUiEntry} from './multi_store_password_ui_entry.js';
 import {PasswordCheckMixin} from './password_check_mixin.js';
 import {PasswordManagerImpl} from './password_manager_proxy.js';
 
@@ -64,12 +66,28 @@ export class SettingsAutofillPageElement extends
         type: String,
         computed: 'computePasswordManagerSubLabel_(compromisedPasswordsCount)',
       },
+
+      enablePasswordViewPage_: {
+        type: Boolean,
+        value() {
+          return loadTimeData.getBoolean('enablePasswordNotes');
+        }
+      },
+
+      // The credential is only used to pass the credential from password-view
+      // to settings-subpage
+      credential: {
+        type: Object,
+        value: null,
+      },
     };
   }
 
   private passwordFilter_: string;
   private focusConfig_: Map<string, string>;
   private passwordManagerSubLabel_: string;
+  private enablePasswordViewPage_: string;
+  credential: MultiStorePasswordUiEntry|null;
 
   /**
    * Shows the manage addresses sub page.

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

@@ -0,0 +1,74 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview 'password-view' is the subpage containing details about the
+ * password such as the URL, the username, the password and the note.
+ */
+
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {routes} from '../route.js';
+import {Route, RouteObserverMixin, RouteObserverMixinInterface, Router} from '../router.js';
+import {MultiStorePasswordUiEntry} from './multi_store_password_ui_entry.js';
+import {getTemplate} from './password_view.html.js';
+
+const PasswordViewElementBase = RouteObserverMixin(PolymerElement) as {
+  new (): PolymerElement & RouteObserverMixinInterface,
+};
+
+export class PasswordViewElement extends PasswordViewElementBase {
+  static get is() {
+    return 'password-view';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      credential: {
+        type: Object,
+        value: null,
+        notify: true,
+      },
+    };
+  }
+
+  credential: MultiStorePasswordUiEntry|null;
+
+  override currentRouteChanged(route: Route) {
+    if (route !== routes.PASSWORD_VIEW) {
+      return;
+    }
+    const queryParameters = Router.getInstance().getQueryParameters();
+
+    const site = queryParameters.get('site');
+    if (!site) {
+      return;
+    }
+
+    const username = queryParameters.get('username');
+    if (!username) {
+      return;
+    }
+
+    // TODO(https://crbug.com/1298027): Update the credential here based on site
+    // and username. The credential below is temporary.
+    this.credential = {
+      urls: {
+        shown: site,
+      }
+    } as MultiStorePasswordUiEntry;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'password-view': PasswordViewElement;
+  }
+}
+
+customElements.define(PasswordViewElement.is, PasswordViewElement);

chrome/browser/resources/settings/lazy_load.ts

@@ -6,8 +6,9 @@
 import './appearance_page/appearance_fonts_page.js';
 import './autofill_page/autofill_section.js';
 import './autofill_page/password_check.js';
-import './autofill_page/passwords_section.js';
+import './autofill_page/password_view.js';
 import './autofill_page/passwords_device_section.js';
+import './autofill_page/passwords_section.js';
 import './autofill_page/payments_section.js';
 import './clear_browsing_data_dialog/clear_browsing_data_dialog.js';
 import './search_engines_page/search_engines_page.js';

chrome/browser/resources/settings/route.ts

@@ -139,6 +139,9 @@ function createBrowserSettingsRoutes(): SettingsRoutes {
   if (visibility.autofill !== false) {
     r.AUTOFILL = r.BASIC.createSection('/autofill', 'autofill');
     r.PASSWORDS = r.AUTOFILL.createChild('/passwords');
+    if (loadTimeData.getBoolean('enablePasswordNotes')) {
+      r.PASSWORD_VIEW = r.PASSWORDS.createChild('view');
+    }
     r.CHECK_PASSWORDS = r.PASSWORDS.createChild('check');
 
     r.DEVICE_PASSWORDS = r.PASSWORDS.createChild('device');

chrome/browser/resources/settings/settings.gni

@@ -40,6 +40,7 @@ web_component_files = [
   "autofill_page/password_move_to_account_dialog.ts",
   "autofill_page/password_remove_confirmation_dialog.ts",
   "autofill_page/password_remove_dialog.ts",
+  "autofill_page/password_view.ts",
   "autofill_page/passwords_device_section.ts",
   "autofill_page/passwords_export_dialog.ts",
   "autofill_page/passwords_list_handler.ts",

chrome/browser/resources/settings/settings_routes.ts

@@ -32,6 +32,7 @@ export type SettingsRoutes = {
   MANAGE_PROFILE: Route,
   ON_STARTUP: Route,
   PASSWORDS: Route,
+  PASSWORD_VIEW: Route,
   DEVICE_PASSWORDS: Route,
   PAYMENTS: Route,
   PEOPLE: Route,