Chromium Code Reviews| Index: tools/perf/page_sets/tough_scheduling_cases/second_batch_js.html | 
| diff --git a/tools/perf/page_sets/tough_scheduling_cases/second_batch_js.html b/tools/perf/page_sets/tough_scheduling_cases/second_batch_js.html | 
| new file mode 100644 | 
| index 0000000000000000000000000000000000000000..96edc121ae1af3d28e8c3725f123a8d09fce05af | 
| --- /dev/null | 
| +++ b/tools/perf/page_sets/tough_scheduling_cases/second_batch_js.html | 
| @@ -0,0 +1,105 @@ | 
| +<!doctype html> | 
| +<html> | 
| +<head> | 
| + <meta name="viewport" content="width=device-width, initial-scale=1"> | 
| + <title>Second batch JS</title> | 
| +</head> | 
| + | 
| +<style> | 
| +#spinner { | 
| + width: 600px; | 
| + height: 10px; | 
| + border-right: black; | 
| + position: relative; | 
| + background: repeating-linear-gradient( | 
| + -45deg, | 
| + orange, | 
| + orange 21px, | 
| + yellow 21px, | 
| + yellow 42px | 
| + ); | 
| +} | 
| +#spinner-container { | 
| + width: 300px; | 
| + height: 10px; | 
| + overflow: hidden; | 
| + border: solid thin darkorange; | 
| + border-radius: 4px; | 
| + margin-top: 50px; | 
| +} | 
| +.spinner-loaded #spinner { | 
| + background: repeating-linear-gradient( | 
| + -45deg, | 
| + steelblue, | 
| + steelblue 21px, | 
| + aqua 21px, | 
| + aqua 42px | 
| + ); | 
| +} | 
| +#spinner-container.spinner-loaded { | 
| + border: solid thin steelblue; | 
| +} | 
| +input { | 
| + font-size: 150%; | 
| + width: 302px; | 
| + margin-top: 30px; | 
| + margin-bottom: 30px; | 
| +} | 
| +#run { | 
| + display: none; | 
| 
 
rmcilroy
2015/03/17 13:59:36
nit - I'm not sure on 'html code style', but it wo
 
Sami
2015/03/18 14:05:31
Yeah, that's cleaner. Done.
 
 | 
| +} | 
| +</style> | 
| + | 
| +<center> | 
| + <div id="spinner-container"> | 
| + <div id="spinner"></div> | 
| + </div> | 
| + | 
| + <input id="load" type="button" value="Start loading" onclick="kickOffLoading()"></input> | 
| 
 
rmcilroy
2015/03/17 13:59:36
(for a future CL) - could we have a variation whic
 
Sami
2015/03/18 14:05:31
Good point. Actually there's a subtlety here in th
 
 | 
| + <input id="run" type="button" value="Click me!" onclick="onClick()"></input> | 
| + | 
| + <p id="results"></p> | 
| +</center> | 
| + | 
| +<script> | 
| +// Perform main thread animation during the benchmark to gauge main thread | 
| +// responsiveness. | 
| +window.__ready = false; | 
| +var results = document.getElementById('results'); | 
| +var spinner = document.getElementById('spinner'); | 
| +var spinnerContainer = document.getElementById('spinner-container'); | 
| +function animateSpinner(timestamp) { | 
| + var width = parseInt(window.getComputedStyle(spinnerContainer).width); | 
| + var x = -(timestamp / 8) % width; | 
| + spinner.style.left = x + 'px'; | 
| + window.requestAnimationFrame(animateSpinner); | 
| +} | 
| + | 
| +function kickOffLoading() { | 
| + var loadButton = document.getElementById('load'); | 
| + loadButton.style.display = 'none'; | 
| + | 
| + var variant = | 
| + location.search.length > 0 ? location.search.substr(1) : 'medium'; | 
| + var script = document.createElement('script'); | 
| + script.setAttribute('type', 'text/javascript') | 
| + script.setAttribute('src', 'second_batch_js_' + variant + '.min.js') | 
| + script.addEventListener('load', onLoadComplete); | 
| + document.body.appendChild(script); | 
| +} | 
| + | 
| +function onLoadComplete() { | 
| + var runButton = document.getElementById('run'); | 
| + runButton.style.display = 'block'; | 
| + spinnerContainer.classList.add('spinner-loaded'); | 
| + window.__ready = true; | 
| +} | 
| + | 
| +function onClick() { | 
| 
 
rmcilroy
2015/03/17 13:59:36
nit - onRunClick() ?
 
Sami
2015/03/18 14:05:31
Done.
 
 | 
| + results.innerText = 'Your lucky number is: ' + main(1); | 
| +} | 
| + | 
| +window.requestAnimationFrame(animateSpinner); | 
| 
 
rmcilroy
2015/03/17 13:59:36
nit - move this after you define the animateSpinne
 
Sami
2015/03/18 14:05:32
Done.
 
 | 
| +</script> | 
| + | 
| +</html> |