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

 <!doctype html>
 <html lang="en">
 <head>
   <title>Media History</title>
   <meta charset="utf-8">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
   <style>
     html,
     body {
       font-family: 'Roboto', 'Noto', sans-serif;
       font-size: 14px;
       height: 100%;
       margin: 0;
       padding: 0;
       width: 100%;
     }

     cr-tab-box {
       display: none;
       padding-top: 10px;
     }

     div[slot='tab'] {
       -webkit-user-select: none;
     }

     body div[slot='panel'] {
       box-shadow: none;
     }

     div[slot='panel'] {
       padding: 10px;
     }

     h1 {
       margin-top: 10px;
     }

     button {
       margin-bottom: 20px;
     }

     table {
       border-collapse: collapse;
       margin-bottom: 20px;
     }

     table td,
     table th {
       border: 1px solid #777;
       padding-inline-end: 4px;
       padding-inline-start: 4px;
     }

     table th {
       background: rgb(224, 236, 255);
       cursor: pointer;
       padding-bottom: 4px;
       padding-inline-end: 4px;
       padding-top: 4px;
       white-space: nowrap;
     }

     .name-cell {
       background-color: rgba(230, 230, 230, 0.5);
     }

     th.sort-column {
       padding-inline-end: 16px;
     }

     th.sort-column::after {
       content: '▲';
       position: absolute;
     }

     th[sort-reverse].sort-column::after {
       content: '▼';
       position: absolute;
     }
   </style>
 </head>
 <body>
   <cr-tab-box id="tabbox">
     <div slot="tab" id="stats">Stats</div>
     <div slot="tab" id="origins">Origins</div>
     <div slot="tab" id="playbacks">Playbacks</div>
     <div slot="tab" id="sessions">Sessions</div>
     <div slot="panel">
       <h1>Media History</h1>
       <button class="copy-all-to-clipboard">Copy all to clipboard</button>
       <table>
         <thead>
           <tr id="stats-table-header">
             <th>Table Name</th>
             <th>Row Count</th>
           </tr>
         </thead>
         <tbody id="stats-table-body">
         </tbody>
       </table>
     </div>
     <div slot="panel">
       <h1>Origins</h1>
       <button class="copy-all-to-clipboard">Copy all to clipboard</button>
       <table id="origins-table">
         <thead>
           <tr>
             <th sort-key="origin">Origin</th>
             <th sort-key="lastUpdatedTime">Last Updated</th>
             <th sort-key="cachedAudioVideoWatchtime" class="sort-column"
                 sort-reverse>
               Audio + Video Watchtime (secs, cached)
             </th>
             <th sort-key="actualAudioVideoWatchtime">
               Audio + Video Watchtime (secs, actual)
             </th>
           </tr>
         </thead>
         <tbody>
         </tbody>
       </table>
     </div>
     <div slot="panel">
       <h1>Playbacks</h1>
       <p>
         The playbacks table stores playbacks that happened on a page. These
         can be of any type and there is one playback stored for each player
         per page.
       </p>
       <button class="copy-all-to-clipboard">Copy all to clipboard</button>
       <table id="playbacks-table">
         <thead>
           <tr>
             <th sort-key="url">URL</th>
             <th sort-key="lastUpdatedTime" class="sort-column" sort-reverse>
               Last Updated
             </th>
             <th sort-key="hasAudio">Has Audio</th>
             <th sort-key="hasVideo">Has Video</th>
             <th sort-key="watchtime">Watchtime (secs)</th>
           </tr>
         </thead>
         <tbody>
         </tbody>
       </table>
     </div>
     <div slot="panel">
       <h1>Sessions</h1>
       <p>
         The sessions table stores media sessions that had media playback that
         had both an audio and video track. There is only one session recorded
         for the lifetime of the page.
       </p>
       <button class="copy-all-to-clipboard">Copy all to clipboard</button>
       <table id="sessions-table">
         <thead>
           <tr>
             <th sort-key="url">URL</th>
             <th sort-key="lastUpdatedTime" class="sort-column" sort-reverse>
               Last Updated
             </th>
             <th sort-key="position">Position (secs)</th>
             <th sort-key="duration">Duration (secs)</th>
             <th sort-key="metadata.title">Title</th>
             <th sort-key="metadata.artist">Artist</th>
             <th sort-key="metadata.album">Album</th>
             <th sort-key="metadata.sourceTitle">Source Title</th>
             <th data-key="artwork">Artwork</th>
           </tr>
         </thead>
         <tbody>
         </tbody>
       </table>
     </div>
   </cr-tab-box>

   <template id="data-row">
     <tr>
       <td class="origin-cell"></td>
       <td class="last-updated-cell"></td>
       <td class="cached-watchtime-cell"></td>
       <td class="actual-watchtime-cell"></td>
     </tr>
   </template>
   <template id="stats-row">
     <tr>
       <td class="name-cell"></td>
       <td></td>
     </tr>
   </template>
   <script type="module" src="media_history.js"></script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Media History</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
	<style>
	html,
	body {
	font-family: 'Roboto', 'Noto', sans-serif;
	font-size: 14px;
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
	}

	cr-tab-box {
	display: none;
	padding-top: 10px;
	}

	div[slot='tab'] {
	-webkit-user-select: none;
	}

	body div[slot='panel'] {
	box-shadow: none;
	}

	div[slot='panel'] {
	padding: 10px;
	}

	h1 {
	margin-top: 10px;
	}

	button {
	margin-bottom: 20px;
	}

	table {
	border-collapse: collapse;
	margin-bottom: 20px;
	}

	table td,
	table th {
	border: 1px solid #777;
	padding-inline-end: 4px;
	padding-inline-start: 4px;
	}

	table th {
	background: rgb(224, 236, 255);
	cursor: pointer;
	padding-bottom: 4px;
	padding-inline-end: 4px;
	padding-top: 4px;
	white-space: nowrap;
	}

	.name-cell {
	background-color: rgba(230, 230, 230, 0.5);
	}

	th.sort-column {
	padding-inline-end: 16px;
	}

	th.sort-column::after {
	content: '▲';
	position: absolute;
	}

	th[sort-reverse].sort-column::after {
	content: '▼';
	position: absolute;
	}
	</style>
	</head>
	<body>
	<cr-tab-box id="tabbox">
	<div slot="tab" id="stats">Stats</div>
	<div slot="tab" id="origins">Origins</div>
	<div slot="tab" id="playbacks">Playbacks</div>
	<div slot="tab" id="sessions">Sessions</div>
	<div slot="panel">
	<h1>Media History</h1>
	<button class="copy-all-to-clipboard">Copy all to clipboard</button>
	<table>
	<thead>
	<tr id="stats-table-header">
	<th>Table Name</th>
	<th>Row Count</th>
	</tr>
	</thead>
	<tbody id="stats-table-body">
	</tbody>
	</table>
	</div>
	<div slot="panel">
	<h1>Origins</h1>
	<button class="copy-all-to-clipboard">Copy all to clipboard</button>
	<table id="origins-table">
	<thead>
	<tr>
	<th sort-key="origin">Origin</th>
	<th sort-key="lastUpdatedTime">Last Updated</th>
	<th sort-key="cachedAudioVideoWatchtime" class="sort-column"
	sort-reverse>
	Audio + Video Watchtime (secs, cached)
	</th>
	<th sort-key="actualAudioVideoWatchtime">
	Audio + Video Watchtime (secs, actual)
	</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>
	<div slot="panel">
	<h1>Playbacks</h1>
	<p>
	The playbacks table stores playbacks that happened on a page. These
	can be of any type and there is one playback stored for each player
	per page.
	</p>
	<button class="copy-all-to-clipboard">Copy all to clipboard</button>
	<table id="playbacks-table">
	<thead>
	<tr>
	<th sort-key="url">URL</th>
	<th sort-key="lastUpdatedTime" class="sort-column" sort-reverse>
	Last Updated
	</th>
	<th sort-key="hasAudio">Has Audio</th>
	<th sort-key="hasVideo">Has Video</th>
	<th sort-key="watchtime">Watchtime (secs)</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>
	<div slot="panel">
	<h1>Sessions</h1>
	<p>
	The sessions table stores media sessions that had media playback that
	had both an audio and video track. There is only one session recorded
	for the lifetime of the page.
	</p>
	<button class="copy-all-to-clipboard">Copy all to clipboard</button>
	<table id="sessions-table">
	<thead>
	<tr>
	<th sort-key="url">URL</th>
	<th sort-key="lastUpdatedTime" class="sort-column" sort-reverse>
	Last Updated
	</th>
	<th sort-key="position">Position (secs)</th>
	<th sort-key="duration">Duration (secs)</th>
	<th sort-key="metadata.title">Title</th>
	<th sort-key="metadata.artist">Artist</th>
	<th sort-key="metadata.album">Album</th>
	<th sort-key="metadata.sourceTitle">Source Title</th>
	<th data-key="artwork">Artwork</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>
	</cr-tab-box>

	<template id="data-row">
	<tr>
	<td class="origin-cell"></td>
	<td class="last-updated-cell"></td>
	<td class="cached-watchtime-cell"></td>
	<td class="actual-watchtime-cell"></td>
	</tr>
	</template>
	<template id="stats-row">
	<tr>
	<td class="name-cell"></td>
	<td></td>
	</tr>
	</template>
	<script type="module" src="media_history.js"></script>
	</body>
	</html>