blob: 18416057f07b6a20543331b729e3812b62cab0b6 [file] [log] [blame]
<!--
Copyright 2018 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.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EOC Internals</title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="eoc_internals.css">
<script src="chrome://resources/js/mojo_bindings.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="eoc_internals.mojom.js"></script>
<script src="eoc_internals.js"></script>
</head>
<body>
<div id="properties">
<h3>Properties</h3>
<div>
<table class="details">
<tr>
<td>Fetch endpoint url</td>
<td id="fetch-endpoint-url"></td>
</tr>
<tr>
<td>Time to Trigger</td>
<td id="time-to-trigger"></td>
</tr>
<tr>
<td>Chrome flags setup correctly</td>
<td id="chrome-flags-setup"></td>
</tr>
</table>
</div>
</div>
<div id="metrics">
<h3>Metrics</h3>
<button id="clear-metrics">Clear metrics</button>
<div id="metric-events">
<!-- Templates populate here. -->
</div>
<template id="metric-event-template"> <!-- Use to populate metric events -->
<div id="metric-event">
<h4 id="url"></h4>
<table class="details">
<tr>
<td>Was sheet peeked</td>
<td id="sheet-peeked"></td>
</tr>
<tr>
<td>Was button shown</td>
<td id="button-shown"></td>
</tr>
<tr>
<td>Was sheet opened</td>
<td id="sheet-opened"></td>
</tr>
<tr>
<td>Was sheet closed</td>
<td id="sheet-closed"></td>
</tr>
<tr>
<td>Any suggestion taken</td>
<td id="any-suggestion-taken"></td>
</tr>
<tr>
<td>Any suggestion downloaded</td>
<td id="any-suggestion-downloaded"></td>
</tr>
</table>
</div>
</template>
</div>
<div>
<h3>Cached Suggestion Results</h3>
<button id="clear-suggestion-results">Clear suggestions</button>
<div id="suggestion-results">
<!-- Suggestion results go here. -->
</div>
<!-- Populate these to $("cached-suggestions") -->
<template id="suggestion-template">
<div> <!-- Holder element used for parent queries. -->
<div id="suggestion-title"></div>
<table id="suggestion-details" class="details" hidden>
<tr>
<td>Url</td>
<td id="suggestion-url"></td>
</tr>
<tr>
<td>Snippet</td>
<td id="suggestion-snippet"></td>
</tr>
<tr>
<td>Publisher name</td>
<td id="suggestions-publisher-name"></td>
</tr>
</table>
</div>
</template>
<template id="suggestion-result-template">
<div id="suggestion-result">
<h4 id="suggestion-result-url"></h4>
<table class="details">
<tr>
<td>Peek confidence</td>
<td id="peek-confidence"></td>
</tr>
<tr>
<td>Page scroll percentage</td>
<td id="peek-page-scroll-percentage"></td>
</tr>
<tr>
<td>Minimum seconds on page</td>
<td id="peek-min-seconds-on-page"></td>
</tr>
<tr>
<td>Maximum number of peeks</td>
<td id="peek-max-peeks"></td>
</tr>
</table>
<h4>Suggestions</h4>
<div id="cached-suggestions">
</div>
</div>
</template>
</div>
</body>
</html>