Password manager: Use different font for the password field.

Fonts that are applied on different platforms:
macOS - Menlo
Windows - Consolas
Chrome OS - DejaVu Sans Mono
Linux - DejaVu Sans Mono

This can help user distinguish some characters such as 'l' and 'I'.

Bug: 768825
Change-Id: I74416fe4fc327ff992d162a7c4ad427c18ee07b5
Reviewed-on: https://chromium-review.googlesource.com/1220373Reviewed-by: Scott Chen <scottchen@chromium.org>
Reviewed-by: Vasilii Sukhanov <vasilii@chromium.org>
Commit-Queue: Yue Cen <rsgingerrs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593775}

chrome/browser/resources/settings/passwords_and_forms_page/password_edit_dialog.html

@@ -34,6 +34,20 @@
         }
       }
 
+      #passwordInput {
+        --cr-input-input: {
+<if expr="chromeos or is_linux">
+          font-family: 'DejaVu Sans Mono', monospace;
+</if>
+<if expr="is_win">
+          font-family: 'Consolas', monospace;
+</if>
+<if expr="is_macosx">
+          font-family: 'Menlo', monospace;
+</if>
+        }
+      }
+
       paper-icon-button-light {
         background-size: 24px;  /* Other buttons are sized by --cr-icon-size. */
         margin-inline-start: 2px;

chrome/browser/resources/settings/passwords_and_forms_page/password_list_item.html

@@ -31,6 +31,18 @@
         line-height: inherit;
         text-overflow: ellipsis;
       }
+
+      #password {
+<if expr="chromeos or is_linux">
+        font-family: 'DejaVu Sans Mono', monospace;
+</if>
+<if expr="is_win">
+        font-family: 'Consolas', monospace;
+</if>
+<if expr="is_macosx">
+        font-family: 'Menlo', monospace;
+</if>
+      }
     </style>
     <div class="list-item" focus-row-container>
       <div class="website-column no-min-width"

chrome/browser/resources/settings/settings_resources.grd

@@ -740,7 +740,8 @@
                  type="chrome_html" />
       <structure name="IDR_SETTINGS_PASSWORD_LIST_ITEM_HTML"
                  file="passwords_and_forms_page/password_list_item.html"
-                 type="chrome_html" />
+                 type="chrome_html"
+                 preprocess="true" />
       <structure name="IDR_SETTINGS_PASSWORD_LIST_ITEM_JS"
                  file="passwords_and_forms_page/password_list_item.js"
                  type="chrome_html" />
@@ -759,7 +760,8 @@
                  preprocess="true" />
       <structure name="IDR_SETTINGS_PASSWORD_EDIT_DIALOG_HTML"
                  file="passwords_and_forms_page/password_edit_dialog.html"
-                 type="chrome_html" />
+                 type="chrome_html"
+                 preprocess="true" />
       <structure name="IDR_SETTINGS_PASSWORD_EDIT_DIALOG_JS"
                  file="passwords_and_forms_page/password_edit_dialog.js"
                  type="chrome_html" />