android.html (287 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Android Metrics</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script>
<link rel="stylesheet" href="assets/android-style.css">
<script src="assets/android-metrics.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const dataUrl = 'https://raw.githubusercontent.com/mozilla/performance-data/refs/heads/main/android-data.json.gz';
generateContent(dataUrl);
});
</script>
</head>
<body>
<div class="sidebar">
<div class="dropdown">
<label for="history-select">History (days):</label>
<select id="history-select" onchange="setHistory(this.value)">
<option value=14>14</option>
<option value=30>30</option>
<option value=60>60</option>
<option value=90>90</option>
</select>
</div>
<div class="dropdown">
<label for="platform-select">Platform:</label>
<select id="platform-select" onchange="setPlatform(this.value)">
<option value="Android">Android</option>
</select>
</div>
<div class="sections">
</div>
</div>
<div class="content">
<div class="row-title" id="summary-section">Summary</div>
<div class="table-container">
<div class="table-content">
<table id="summary-table">
<thead>
<tr>
<th></th>
<th style="border-left: 1px solid #ddd;" colspan=3>Latest (7 day avg)</th>
<th style="border-left: 1px solid #ddd;" colspan=3>4 weeks ago (7 day avg)</th>
<tr>
<th onclick="sortTable(0, 'summary-table')">Test</th>
<th style="border-left: 1px solid #ddd;">Firefox</th>
<th>Chrome</th>
<th onclick="sortTable(3, 'summary-table')">Difference (%)</th>
<th style="border-left: 1px solid #ddd;">Firefox</th>
<th>Chrome</th>
<th onclick="sortTable(6, 'summary-table')">Difference (%)</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="charts-content">
</div>
</div>
<script>
window.tests = [
{
name: "newssite-applink-startup (A55)",
metric: ["newssite-applink-startup-a55"],
unit: "ms"
},
{
name: "newssite-applink-startup (P6)",
metric: ["newssite-applink-startup-p6"],
unit: "ms"
},
{
name: "newssite-applink-startup (S24)",
metric: ["newssite-applink-startup-s24"],
unit: "ms"
},
{
name: "shopify-applink-startup",
metric: ["shopify-applink-startup"],
unit: "ms"
},
{
name: "cold_view_nav_start.mean",
metric: ["cold_view_nav_start.mean"],
unit: "ms"
},
{
name: "cold_main_first_frame.mean",
metric: ["cold_main_first_frame.mean"],
unit: "ms"
},
{
name: "sp3",
metric: ["score"],
unit: "score"
},
{
name: "sp3-cpuTime",
metric: ["cpuTime"],
unit: "ms"
},
{
name: "sp3-powerUsage",
metric: ["powerUsage"],
unit: "mWh"
},
{
name: "background-main-cpuTime",
metric: ["cpuTime-main-geomean"],
unit: "ms"
},
{
name: "background-gpu-cpuTime",
metric: ["cpuTime-gpu-geomean"],
unit: "ms"
},
{
name: "background-tab-cpuTime",
metric: ["cpuTime-tab-geomean"],
unit: "ms"
},
{
name: "background-main-rss",
metric: ["rss-main-geomean"],
unit: "kB"
},
{
name: "background-gpu-rss",
metric: ["rss-gpu-geomean"],
unit: "kB"
},
{
name: "background-tab-rss",
metric: ["rss-tab-geomean"],
unit: "kB"
},
{
name: "background-main-pss",
metric: ["pss-main-geomean"],
unit: "kB"
},
{
name: "background-gpu-pss",
metric: ["pss-gpu-geomean"],
unit: "kB"
},
{
name: "background-tab-pss",
metric: ["pss-tab-geomean"],
unit: "kB"
},
//{
// name: "allrecipes",
// metric: ["allrecipes-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "amazon-search",
// metric: ["amazon-search-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "espn",
// metric: ["espn-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "google",
// metric: ["google-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "microsoft-support",
// metric: ["microsoft-support-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "amazon",
// metric: ["amazon-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "bing",
// metric: ["bing-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "bing-search-restaurants",
// metric: ["bing-search-restaurants-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "booking",
// metric: ["booking-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "cnn",
// metric: ["cnn-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "cnn-ampstories",
// metric: ["cnn-ampstories-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "dailymail",
// metric: ["dailymail-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "ebay-kleinanzeigen",
// metric: ["ebay-kleinanzeigen-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "ebay-kleinanzeigen-search",
// metric: ["ebay-kleinanzeigen-search-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "facebook-cristiano",
// metric: ["facebook-cristiano-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "google-maps",
// metric: ["google-maps-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "google-search-restaurants",
// metric: ["google-search-restaurants-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "imdb",
// metric: ["imdb-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "instagram",
// metric: ["instagram-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "reddit",
// metric: ["reddit-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "sina",
// metric: ["sina-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "stackoverflow",
// metric: ["stackoverflow-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "wikipedia",
// metric: ["wikipedia-ContentfulSpeedIndex"],
// unit: "CSI"
//},
//{
// name: "youtube",
// metric: ["youtube-ContentfulSpeedIndex"],
// unit: "CSI"
//}
];
// Create sidebar sections
createSidebarSections(tests);
// Create charts content
createChartsContent(tests);
</script>
</body>
</html>