blob: 3197c798185fda724ddc8afcfd628f9ccaf72321 [file] [log] [blame]
<!doctype html>
<html lang="en">
<head>
<title>Media Engagement</title>
<meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<script src="chrome://resources/js/mojo_bindings_lite.js"></script>
<script src="chrome://resources/js/promise_resolver.js"></script>
<script src="chrome://resources/js/url.mojom-lite.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="chrome/browser/media/media_engagement_score_details.mojom-lite.js">
</script>
<script src="chrome://media-engagement/media-engagement.js"></script>
<style>
body {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 14px;
}
button {
margin-bottom: 20px;
}
table {
border-collapse: collapse;
margin-bottom: 20px;
}
table td,
table th {
border: 1px solid #777;
padding-left: 4px;
padding-right: 4px;
}
table th {
background: rgb(224, 236, 255);
cursor: pointer;
padding-bottom: 4px;
padding-right: 4px;
padding-top: 4px;
white-space: nowrap;
}
.engagement-bar {
background-color: black;
height: 2px;
}
.engagement-bar-cell {
border: none;
}
.origin-cell {
background-color: rgba(230, 230, 230, 0.5);
}
.visits-count-cell,
.media-playbacks-count-cell,
.last-playback-time-cell,
.audible-playbacks-count-cell,
.significant-playbacks-count-cell {
background-color: rgba(230, 230, 230, 0.5);
text-align: right;
white-space: nowrap;
}
.base-score-input {
border: 1px solid #ccc;
border-radius: 2px;
text-align: right;
width: 70px;
}
.base-score-input:focus {
border: 1px solid rgb(143, 185, 252);
box-shadow: 0 0 2px rgb(113, 158, 206);
outline: none;
}
.name-cell {
background-color: rgba(230, 230, 230, 0.5);
}
table tr:hover {
background: rgb(255, 255, 187);
}
th.sort-column {
padding-right: 16px;
}
th.sort-column::after {
content: '▲';
position: absolute;
}
th[sort-reverse].sort-column::after {
content: '▼';
position: absolute;
}
</style>
</head>
<body>
<h1>Media Engagement</h1>
<button id="copy-all-to-clipboard">Copy all to clipboard</button>
<table>
<thead>
<tr id="config-table-header">
<th>
Setting Name
</th>
<th>
Setting Value
</th>
</tr>
</thead>
<tbody id="config-table-body">
</tbody>
</table>
<p>
<label>
<input id="show-no-playbacks" type="checkbox">
Show sessions with no playbacks
</label>
</p>
<table>
<thead>
<tr id="engagement-table-header">
<th sort-key="origin">
Origin
</th>
<th sort-key="visits" sort-reverse>
Sessions
</th>
<th sort-key="mediaPlaybacks" sort-reverse>
Sessions with playback
</th>
<th sort-key="audioContextPlaybacks" sort-reverse>
Sessions with playback<br>(audio context only)
</th>
<th sort-key="mediaElementPlaybacks" sort-reverse>
Sessions with playback<br>(media element only)
</th>
<th sort-key="audiblePlaybacks" sort-reverse>
Audible Playbacks*
</th>
<th sort-key="significantPlaybacks" sort-reverse>
Significant Playbacks*
</th>
<th sort-key="lastMediaPlaybackTime" sort-reverse>
Last Playback
</th>
<th sort-key="isHigh" sort-reverse>
Is High
</th>
<th sort-key="highScoreChanges" sort-reverse>
Is High Changes
</th>
<th sort-key="totalScore" class="sort-column" sort-reverse>
Score
</th>
</tr>
</thead>
<tbody id="engagement-table-body">
</tbody>
</table>
<p>
* These columns are experimental and do not currently affect the MEI score.
</p>
<template id="datarow">
<tr>
<td class="origin-cell"></td>
<td class="visits-count-cell"></td>
<td class="media-playbacks-count-cell"></td>
<td class="audio-context-playbacks-count-cell"></td>
<td class="media-element-playbacks-count-cell"></td>
<td class="audible-playbacks-count-cell"></td>
<td class="significant-playbacks-count-cell"></td>
<td class="last-playback-time-cell"></td>
<td class="is-high-cell"></td>
<td class="is-high-changes-cell"></td>
<td class="total-score-cell"></td>
<td class="engagement-bar-cell">
<div class="engagement-bar"></div>
</td>
</tr>
</template>
<template id="configrow">
<tr>
<td class="name-cell"></td>
<td></td>
</tr>
</template>
</body>
</html>