chromium/components/autofill/core/browser/autofill_and_password_manager_internals/autofill_and_password_manager_internals.html

<!doctype html>
<html>
<head>
<!--
Copyright 2019 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<meta charset="utf-8">
<script type="module" src="autofill_and_password_manager_internals.js"></script>
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<!--
  The style sheets are inlined to get a prettier export if the user presses
  Ctrl/Cmd + S to save the site or presses the download button.
-->
<style>
html {
  scroll-behavior: smooth;
}

.sticky-bar {
  background-color: white;
  border-bottom: 1px solid black;
  color: black;
  overflow: auto;
  padding-bottom: 1.5ex;
  position: sticky;
  top: 0;
}

#control-panel {
  display: block;
  font-size: 120%;
  line-height: calc(120% + 2ex);
  padding: 1ex;
}

#control-panel label {
  padding-inline-end: 1em;
  white-space: nowrap;
}

.fake-button {
  background-color: lightgray;
  border: 1px solid black;
  cursor: pointer;
  margin-inline-end: 1em;
  padding: .5ex;
  white-space: nowrap;
}

#logging-note {
  font-style: italic;
}

#logging-note-incognito {
  font-style: italic;
}

/* Initially, nothing is visible, to avoid flicker. */
#log-entries,
#logging-note,
#logging-note-incognito {
  display: none;
}

/* Visibility settings for non-Incognito tabs. */
[data-incognito=false] #log-entries,
[data-incognito=false] #logging-note {
  display: block;
}

/* Visibility settings for Incognito tabs. */
[data-incognito=true] #logging-note-incognito {
  display: block;
}

#version-info {
  margin: 3px;
  padding: 3px;
}

.version {
  font-family: monospace;
  max-width: 430px;
  padding-inline-start: 5px;
  vertical-align: top;
  word-break: break-word;
}

.label {
  font-family: monospace;
  font-weight: 200;
  vertical-align: top;
}

.log-entry,
.marker {
  padding: 3px;
}

.marker {
  background-color: red;
  font-size: 200%;
  overflow-wrap: break-word;
  white-space: normal;
  word-wrap: break-word;
}

.marker::before {
  content: 'Position marked: ';
}

/*
 * Colors can be taken from
 * https://material.io/design/color/#tools-for-picking-colors
 * Pick the rows of entries labeled with 100
 * Unused colors:
 * - Purple #E1BEE7
 * - Light Green #DCEDC8
 * - Yellow #FFF9C4
 * - Orange #FFE0B2
 * - Blue Gray #CFD8DC
 */

.log-entry[scope='Context'] {
  background-color: #F5F5F5; /* Gray */
}

.log-entry[scope='Parsing'] {
  background-color: #FFECB3; /* Amber */
}

.log-entry[scope='AbortParsing'] {
  background-color: #FFCDD2; /* Red */
}

.log-entry[scope='Filling'] {
  background-color: #D1C4E9; /* Deep Purple */
}

.log-entry[scope='Submission'] {
  background-color: #BBDEFB; /* Blue */
}

.log-entry[scope='AutofillServer'] {
  background-color: #D7CCC8; /* Brown */
}

.log-entry[scope='Metrics'] {
  background-color: #B2EBF2; /* Cyan */
}

.log-entry[scope='AddressProfileFormImport'] {
  background-color: #C8E6C9; /* Green */
}

.log-entry[scope='CreditCardUploadStatus'] {
  background-color: #B2DFDB; /* Teal */
}

.log-entry[scope='CardUploadDecision'] {
  background-color: #B3E5FC; /* Light Blue */
}

.log-entry[scope='Rationalization'] {
  background-color: #F8BBD0; /* Pink */
}

.log-entry[scope='WebsiteModifiedFieldValue'] {
  background-color: #FFCCBC; /* Deep Orange */
}

.log-entry[scope='FastCheckout'] {
  background-color: #F0F4C3; /* Lime */
}

.log-entry[scope='TouchToFill'] {
  background-color: #C5CAE9; /* Indigo */
}

/*
 * Checkboxes add/remove hide-<Scope> classes to the #log-entries. Hiding of the
 * relevant <div>'s and adjacent <hr>'s is implemented by these classes.
 */

.hide-Context .log-entry[scope='Context'],
.hide-Context .log-entry[scope='Context'] + hr {
  display: none;
}

.hide-Parsing .log-entry[scope='Parsing'],
.hide-Parsing .log-entry[scope='Parsing'] + hr {
  display: none;
}

.hide-AbortParsing .log-entry[scope='AbortParsing'],
.hide-AbortParsing .log-entry[scope='AbortParsing'] + hr {
  display: none;
}

.hide-Filling .log-entry[scope='Filling'],
.hide-Filling .log-entry[scope='Filling'] + hr {
  display: none;
}

.hide-Submission .log-entry[scope='Submission'],
.hide-Submission .log-entry[scope='Submission'] + hr {
  display: none;
}

.hide-AutofillServer .log-entry[scope='AutofillServer'],
.hide-AutofillServer .log-entry[scope='AutofillServer'] + hr {
  display: none;
}

.hide-Metrics .log-entry[scope='Metrics'],
.hide-Metrics .log-entry[scope='Metrics'] + hr {
  display: none;
}

.hide-AddressProfileFormImport .log-entry[scope='AddressProfileFormImport'],
.hide-AddressProfileFormImport .log-entry[scope='AddressProfileFormImport'] + hr {
  display: none;
}

.hide-CreditCardUploadStatus .log-entry[scope='CreditCardUploadStatus'],
.hide-CreditCardUploadStatus .log-entry[scope='CreditCardUploadStatus'] + hr {
  display: none;
}

.hide-CardUploadDecision .log-entry[scope='CardUploadDecision'],
.hide-CardUploadDecision .log-entry[scope='CardUploadDecision'] + hr {
  display: none;
}

.hide-WebsiteModifiedFieldValue .log-entry[scope=WebsiteModifiedFieldValue],
.hide-WebsiteModifiedFieldValue .log-entry[scope=WebsiteModifiedFieldValue] + hr {
  display: none;
}

.hide-FastCheckout .log-entry[scope=FastCheckout],
.hide-FastCheckout .log-entry[scope=FastCheckout] + hr {
  display: none;
}

.preserve-white-space {
  white-space: pre-wrap;
}

.form {
  border: 1px black solid;
  margin: 3px;
  padding: 3px;
}

.form td {
  vertical-align: text-top;
}

.profile_import_from_form_section {
  border: 1px black solid;
  margin: 3px;
  padding: 3px;
}

.profile_import_from_form_section td {
  vertical-align: text-top;
}

.country_data {
  border: 1px black solid;
  margin: 3px;
  padding: 3px;
}

.country_data td {
  vertical-align: text-top;
}

.modal-dialog {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(0, 0, 0);
  display: block;
  height: 100px;
  left: 10%;
  overflow: auto;
  position: fixed;
  right: 10%;
  top: 10%;
  width: 80%;
  z-index: 1;
}

.modal-dialog-content {
  padding: 20px;
}

.modal-dialog-close-button {
  bottom: 20px;
  position: absolute;
  right: 20px;
}
</style>
</head>
<body>
<div class="sticky-bar">
  <h1 id="h1-title"></h1>
  <div id="control-panel">
    <span id="marker-fake-button" class="fake-button">Add Marker</span>
    <label><input type="checkbox" id="enable-autoscroll" checked> Enable autoscroll</label>
    <span id="checkbox-placeholder"></span>
    <span id="reset-cache-fake-button" class="fake-button" style="display: none">Reset Cache</span>
    <span id="download-fake-button" class="fake-button">Download Log</span>
    <span id="download-submitted-forms-json-data-fake-button" class="fake-button" style="display: none">Download submitted forms JSON data</span>
    <label><input type="checkbox" id="currently-recording" checked> Record new events</label>
    <label><input type="checkbox" id="automatically-stop-recording" checked> Automatically stop recording in <span id="stop-recording-time">M:SS</span></label>
    <label><input type="checkbox" id="display-pii-on-submission"> Display PII on submission</label>
    <span id="reset-upm-eviction-fake-button" class="fake-button" style="display: none">Reset UPM eviction</span>
    <span id="reset-account-storage-notice-fake-button" class="fake-button" style="display: none">Reset account storage notice</span>
  </div>
</div>
<div id="logging-note"></div>
<div id="logging-note-incognito"></div>
<div id="version-info">
  <table>
    <tr>
      <td class="label">Version:</td>
      <td class="version"><span>$i18n{version}</span>
        (<span>$i18n{official}</span>)
        <span>$i18n{version_modifier}</span></td>
    </tr>
    <tr>
      <td class="label">Revision:</td>
      <td class="version"><span>$i18n{cl}</span></td>
    </tr>
    <tr>
      <td class="label">User Agent:</td>
      <td class="version"><span>$i18n{useragent}</span></td>
    </tr>
    <tr>
      <td class="label">App Locale:</td>
      <td class="version"><span>$i18n{app_locale}</span></td>
    </tr>
    <tr>
      <td class="label">Variations:</td>
      <td class="version" id="variations-list"></td>
    </tr>
  </table>
</div>
<div id="log-entries">
</div>
</body>
</html>