naiveproxy/tools/binary_size/libsupersize/static/milestones.html
2018-12-09 21:59:24 -05:00

151 lines
5.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<!--
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.
-->
<head>
<title>Super Size Tiger View</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4285f4">
<link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="options.css">
<style>
body {
grid-template-columns: auto;
grid-template-areas: "appbar" "select";
}
form {
grid-area: 'select';
margin: auto;
}
</style>
<link rel="icon" href="favicon.ico" sizes="16x16 32x32 256x256" type="image/x-icon">
<script>
const DESIRED_CPUS = ['arm', 'arm_64']
const DESIRED_APKS = ['Monochrome.apk', 'ChromeModern.apk']
const DESIRED_VERSION = [
'60.0.3112.116',
'61.0.3163.98',
'62.0.3202.84',
'63.0.3239.111',
'64.0.3282.137',
'65.0.3325.85',
'66.0.3359.158',
'67.0.3396.87',
'68.0.3440.70',
]
/**
* @param {string[]} options
*/
function buildOptions(options) {
const fragment = document.createDocumentFragment();
for (const option of options) {
const optionEl = document.createElement('option');
optionEl.value = option;
optionEl.textContent = option;
fragment.appendChild(optionEl);
}
return fragment;
}
/**
* Is `v1` a larger version than `v2`?
* @param {string} v1
* @param {string} v2
*/
function isGreaterOrEqual(v1, v2) {
const [version1] = v1.split('.', 1).map(n => parseInt(n, 10));
const [version2] = v2.split('.', 1).map(n => parseInt(n, 10));
return version1 >= version2;
}
(async () => {
const response = await fetch('milestones/milestones.json');
const {pushed} = await response.json();
if (document.readyState === 'loading') {
await new Promise(resolve => {
document.onreadystatechange = () => {
if (document.readyState !== 'loading') {
resolve();
document.onreadystatechange = null;
}
}
});
}
/** @type {HTMLFormElement} */
const form = document.getElementById('select-form');
const cpu = form.elements.namedItem('cpu');
const apk = form.elements.namedItem('apk');
const version1 = form.elements.namedItem('version1');
const version2 = form.elements.namedItem('version2');
cpu.appendChild(buildOptions(pushed.cpu));
apk.appendChild(buildOptions(pushed.apk));
const versionOptions = buildOptions(pushed.version);
version1.appendChild(versionOptions.cloneNode(true));
version2.appendChild(versionOptions);
const version2Options = version2.querySelectorAll('option');
if (version2Options.length > 1) {
version2Options[1].selected = true;
}
function disableSmallerAfterVersions() {
const newVersion = version1.value;
for (const opt of version2Options) {
opt.disabled = isGreaterOrEqual(newVersion, opt.value);
}
}
disableSmallerAfterVersions();
version1.addEventListener('change', disableSmallerAfterVersions);
form.addEventListener('submit', event => {
event.preventDefault();
const dataUrl = `${cpu.value}/${apk.value}/` +
`report_${version1.value}_${version2.value}.ndjson`;
location.href = `index.html?data_url=milestones/${dataUrl}`;
});
})()
</script>
</head>
<body>
<div class="scrim toggle-options" hidden></div>
<header class="appbar">
<div class="appbar-inner">
<h1 class="headline">Super Size Tiger View</h1>
</div>
</header>
<form id="select-form">
<h2 class="subhead">Select milestones to compare</h2>
<p class="select-wrapper">
<select id="cpu" name="cpu"></select>
<label class="select-label" for="cpu">Architecture</label>
</p>
<p class="select-wrapper">
<select id="apk" name="apk"></select>
<label class="select-label" for="apk">APK</label>
</p>
<p class="select-wrapper">
<select id="version1" name="version1"></select>
<label class="select-label" for="version1">Version 1</label>
</p>
<p class="select-wrapper">
<select id="version2" name="version2"></select>
<label class="select-label" for="version2">Version 2</label>
</p>
<button type="submit" class="text-button filled-button">
Open report
</button>
</form>
</body>
</html>