| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>Session Paused - Web Platform Test Runner</title> |
| <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" /> |
| <link rel="stylesheet" href="css/style.css" /> |
| <link rel="stylesheet" href="css/main.css" /> |
| <script src="lib/davidshimjs/qrcode.js"></script> |
| <script src="lib/keycodes.js"></script> |
| <script src="lib/wave-service.js"></script> |
| </head> |
| <body> |
| <section class="section"> |
| <div class="container site-header"> |
| <img src="res/wavelogo_2016.jpg" alt="WAVE Logo" class="site-logo" /> |
| <h1 class="title is-spaced">Session Paused</h1> |
| </div> |
| |
| <div id="content"> |
| <div id="qr-code"></div> |
| <div id="button-wrapper"> |
| <button |
| id="start-button" |
| class="button is-large is-success tabbable" |
| > |
| Continue |
| </button> |
| <button |
| id="results-button" |
| class="button is-large is-light tabbable" |
| > |
| View Result Page |
| </button> |
| </div> |
| <div>(Alternatively to resume the test you can just press Return)</div> |
| <div id="details-wrapper"> |
| <h3 class="title is-5 is-spaced">Details</h3> |
| <div class="detail"> |
| <div>Token:</div> |
| <div id="token"></div> |
| </div> |
| <div class="detail"> |
| <div>User Agent:</div> |
| <div id="user-agent"></div> |
| </div> |
| <div class="detail"> |
| <div>Test Types:</div> |
| <div id="test-types"></div> |
| </div> |
| <div class="detail"> |
| <div>Total Test Files:</div> |
| <div id="total-tests"></div> |
| </div> |
| <div class="detail"> |
| <div>Reference Tokens:</div> |
| <div id="reference-tokens"></div> |
| </div> |
| <div class="detail"> |
| <div>Test Timeouts:</div> |
| <div id="test-timeout"></div> |
| </div> |
| <div class="detail"> |
| <div>Test Paths:</div> |
| <div id="test-path"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <script> |
| var HOSTNAME = location.hostname; |
| var PORT = location.port; |
| var PROTOCOL = location.protocol.replace(/:/, ""); |
| var QUERY = location.search.replace(/\?/, ""); |
| var match = QUERY.match(/token=([^&]+)/); |
| var TOKEN = match ? match[1] : null; |
| if (TOKEN) |
| document.cookie = "resume_token=" + TOKEN + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"; |
| var selectedTabbable = -1; |
| |
| function displaySessionConfiguration(configuration) { |
| var userAgent = document.getElementById("user-agent"); |
| userAgent.innerText = configuration.userAgent; |
| var testPath = document.getElementById("test-path"); |
| for (var i = 0; i < configuration.tests.include.length; i++) { |
| var path = configuration.tests.include[i]; |
| testPath.innerText += path + "\n"; |
| } |
| var testTypes = document.getElementById("test-types"); |
| testTypes.innerText = configuration.types.join(", "); |
| var testTimeout = document.getElementById("test-timeout"); |
| for (var timeout in configuration.timeouts) { |
| testTimeout.innerText += |
| timeout + ": " + configuration.timeouts[timeout] / 1000 + "s\n"; |
| } |
| var referenceTokens = document.getElementById("reference-tokens"); |
| if (configuration.referenceTokens.length === 0) { |
| referenceTokens.innerText = "none"; |
| } else { |
| for (var i = 0; i < configuration.referenceTokens.length; i++) { |
| var token = configuration.referenceTokens[i]; |
| referenceTokens.innerText += token + "\n"; |
| } |
| } |
| } |
| |
| function displaySessionStatus(status) { |
| var testTypes = document.getElementById("total-tests"); |
| var count = 0; |
| for (var api in status.testFilesCount) { |
| count += status.testFilesCount[api]; |
| } |
| testTypes.innerText = count; |
| } |
| |
| function continueTests() { |
| WaveService.startSession(TOKEN, function() { |
| WaveService.readNextTest(TOKEN, function(url) { |
| location.href = url; |
| }); |
| }); |
| } |
| |
| WaveService.addSessionEventListener(TOKEN, function(message) { |
| if (message.type !== "status") return; |
| if (message.data !== "running") return; |
| WaveService.readNextTest(TOKEN, function(url) { |
| location.href = url; |
| }); |
| }); |
| |
| var resultsUrl = |
| "http://" + location.host + WEB_ROOT + "overview.html" + location.search; |
| new QRCode(document.getElementById("qr-code"), resultsUrl); |
| |
| var resultsButton = document.getElementById("results-button"); |
| resultsButton.onclick = function() { |
| window.open(resultsUrl, "_blank"); |
| }; |
| |
| var continueButton = document.getElementById("start-button"); |
| continueButton.onclick = continueTests; |
| |
| function removeClass(element, className) { |
| var elementClass = element.className; |
| var index = elementClass.indexOf(className); |
| if (index !== -1) { |
| element.className = elementClass.replace(className, ""); |
| } |
| } |
| |
| function addClass(element, className) { |
| element.className += " " + className; |
| } |
| |
| function skipFocus(steps) { |
| var tabbables = document.getElementsByClassName("tabbable"); |
| if (selectedTabbable === -1) { |
| selectedTabbable = 0; |
| } else { |
| removeClass(tabbables[selectedTabbable], "focused"); |
| selectedTabbable += steps; |
| } |
| |
| if (selectedTabbable >= tabbables.length) { |
| selectedTabbable = 0; |
| } |
| |
| if (selectedTabbable < 0) { |
| selectedTabbable = tabbables.length - 1; |
| } |
| |
| tabbables[selectedTabbable].focus(); |
| addClass(tabbables[selectedTabbable], "focused"); |
| } |
| |
| function focusNext() { |
| skipFocus(1); |
| } |
| |
| function focusPrevious() { |
| skipFocus(-1); |
| } |
| |
| document.onkeydown = function(event) { |
| event = event || window.event; |
| var charCode = |
| typeof event.which === "number" ? event.which : event.keyCode; |
| |
| if (ACTION_KEYS.indexOf(charCode) !== -1) { |
| event.preventDefault(); |
| if (selectedTabbable === -1) { |
| continueTests(); |
| return; |
| } |
| var tabbables = document.getElementsByClassName("tabbable"); |
| var element = tabbables[selectedTabbable]; |
| if (element.type === "checkbox") { |
| element.checked = !element.checked; |
| } else { |
| element.click(); |
| } |
| } |
| |
| if (PREV_KEYS.indexOf(charCode) !== -1) { |
| focusPrevious(); |
| } |
| |
| if (NEXT_KEYS.indexOf(charCode) !== -1) { |
| focusNext(); |
| } |
| }; |
| |
| var match = location.search.match(/token=(.+)/); |
| var token = match[1]; |
| var tokenView = document.getElementById("token"); |
| tokenView.innerText = token; |
| |
| WaveService.readSession(token, displaySessionConfiguration); |
| WaveService.readSessionStatus(token, displaySessionStatus); |
| </script> |
| </body> |
| </html> |