| <!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> |
