chrome/browser/resources/media/media_engagement.html - chromium/src - Git at Google

 <!doctype html>
 <html>
 <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.js"></script>
   <script src="chrome://resources/js/promise_resolver.js"></script>
   <script src="chrome://resources/js/util.js"></script>

   <script src="chrome/browser/media/media_engagement_score_details.mojom.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: 16px;
       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::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="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="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>
	<!doctype html>
	<html>
	<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.js"></script>
	<script src="chrome://resources/js/promise_resolver.js"></script>
	<script src="chrome://resources/js/util.js"></script>

	<script src="chrome/browser/media/media_engagement_score_details.mojom.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: 16px;
	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::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="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="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>