pause.html (7332B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Session Paused - Web Platform Test Runner</title> 6 <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" /> 7 <link rel="stylesheet" href="css/style.css" /> 8 <link rel="stylesheet" href="css/main.css" /> 9 <script src="lib/davidshimjs/qrcode.js"></script> 10 <script src="lib/keycodes.js"></script> 11 <script src="lib/wave-service.js"></script> 12 </head> 13 <body> 14 <section class="section"> 15 <div class="container site-header"> 16 <img src="res/wavelogo_2016.jpg" alt="WAVE Logo" class="site-logo" /> 17 <h1 class="title is-spaced">Session Paused</h1> 18 </div> 19 20 <div id="content"> 21 <div id="qr-code"></div> 22 <div id="button-wrapper"> 23 <button 24 id="start-button" 25 class="button is-large is-success tabbable" 26 > 27 Continue 28 </button> 29 <button 30 id="results-button" 31 class="button is-large is-light tabbable" 32 > 33 View Result Page 34 </button> 35 </div> 36 <div>(Alternatively to resume the test you can just press Return)</div> 37 <div id="details-wrapper"> 38 <h3 class="title is-5 is-spaced">Details</h3> 39 <div class="detail"> 40 <div>Token:</div> 41 <div id="token"></div> 42 </div> 43 <div class="detail"> 44 <div>User Agent:</div> 45 <div id="user-agent"></div> 46 </div> 47 <div class="detail"> 48 <div>Test Types:</div> 49 <div id="test-types"></div> 50 </div> 51 <div class="detail"> 52 <div>Total Test Files:</div> 53 <div id="total-tests"></div> 54 </div> 55 <div class="detail"> 56 <div>Reference Tokens:</div> 57 <div id="reference-tokens"></div> 58 </div> 59 <div class="detail"> 60 <div>Test Timeouts:</div> 61 <div id="test-timeout"></div> 62 </div> 63 <div class="detail"> 64 <div>Test Paths:</div> 65 <div id="test-path"></div> 66 </div> 67 </div> 68 </div> 69 </section> 70 71 <script> 72 var HOSTNAME = location.hostname; 73 var PORT = location.port; 74 var PROTOCOL = location.protocol.replace(/:/, ""); 75 var QUERY = location.search.replace(/\?/, ""); 76 var match = QUERY.match(/token=([^&]+)/); 77 var TOKEN = match ? match[1] : null; 78 if (TOKEN) 79 document.cookie = "resume_token=" + TOKEN + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"; 80 var selectedTabbable = -1; 81 82 function displaySessionConfiguration(configuration) { 83 var userAgent = document.getElementById("user-agent"); 84 userAgent.innerText = configuration.userAgent; 85 var testPath = document.getElementById("test-path"); 86 for (var i = 0; i < configuration.tests.include.length; i++) { 87 var path = configuration.tests.include[i]; 88 testPath.innerText += path + "\n"; 89 } 90 var testTypes = document.getElementById("test-types"); 91 testTypes.innerText = configuration.types.join(", "); 92 var testTimeout = document.getElementById("test-timeout"); 93 for (var timeout in configuration.timeouts) { 94 testTimeout.innerText += 95 timeout + ": " + configuration.timeouts[timeout] / 1000 + "s\n"; 96 } 97 var referenceTokens = document.getElementById("reference-tokens"); 98 if (configuration.referenceTokens.length === 0) { 99 referenceTokens.innerText = "none"; 100 } else { 101 for (var i = 0; i < configuration.referenceTokens.length; i++) { 102 var token = configuration.referenceTokens[i]; 103 referenceTokens.innerText += token + "\n"; 104 } 105 } 106 } 107 108 function displaySessionStatus(status) { 109 var testTypes = document.getElementById("total-tests"); 110 var count = 0; 111 for (var api in status.testFilesCount) { 112 count += status.testFilesCount[api]; 113 } 114 testTypes.innerText = count; 115 } 116 117 function continueTests() { 118 WaveService.startSession(TOKEN, function() { 119 WaveService.readNextTest(TOKEN, function(url) { 120 location.href = url; 121 }); 122 }); 123 } 124 125 WaveService.addSessionEventListener(TOKEN, function(message) { 126 if (message.type !== "status") return; 127 if (message.data !== "running") return; 128 WaveService.readNextTest(TOKEN, function(url) { 129 location.href = url; 130 }); 131 }); 132 133 var resultsUrl = 134 "http://" + location.host + WEB_ROOT + "overview.html" + location.search; 135 new QRCode(document.getElementById("qr-code"), resultsUrl); 136 137 var resultsButton = document.getElementById("results-button"); 138 resultsButton.onclick = function() { 139 window.open(resultsUrl, "_blank"); 140 }; 141 142 var continueButton = document.getElementById("start-button"); 143 continueButton.onclick = continueTests; 144 145 function removeClass(element, className) { 146 var elementClass = element.className; 147 var index = elementClass.indexOf(className); 148 if (index !== -1) { 149 element.className = elementClass.replace(className, ""); 150 } 151 } 152 153 function addClass(element, className) { 154 element.className += " " + className; 155 } 156 157 function skipFocus(steps) { 158 var tabbables = document.getElementsByClassName("tabbable"); 159 if (selectedTabbable === -1) { 160 selectedTabbable = 0; 161 } else { 162 removeClass(tabbables[selectedTabbable], "focused"); 163 selectedTabbable += steps; 164 } 165 166 if (selectedTabbable >= tabbables.length) { 167 selectedTabbable = 0; 168 } 169 170 if (selectedTabbable < 0) { 171 selectedTabbable = tabbables.length - 1; 172 } 173 174 tabbables[selectedTabbable].focus(); 175 addClass(tabbables[selectedTabbable], "focused"); 176 } 177 178 function focusNext() { 179 skipFocus(1); 180 } 181 182 function focusPrevious() { 183 skipFocus(-1); 184 } 185 186 document.onkeydown = function(event) { 187 event = event || window.event; 188 var charCode = 189 typeof event.which === "number" ? event.which : event.keyCode; 190 191 if (ACTION_KEYS.indexOf(charCode) !== -1) { 192 event.preventDefault(); 193 if (selectedTabbable === -1) { 194 continueTests(); 195 return; 196 } 197 var tabbables = document.getElementsByClassName("tabbable"); 198 var element = tabbables[selectedTabbable]; 199 if (element.type === "checkbox") { 200 element.checked = !element.checked; 201 } else { 202 element.click(); 203 } 204 } 205 206 if (PREV_KEYS.indexOf(charCode) !== -1) { 207 focusPrevious(); 208 } 209 210 if (NEXT_KEYS.indexOf(charCode) !== -1) { 211 focusNext(); 212 } 213 }; 214 215 var match = location.search.match(/token=(.+)/); 216 var token = match[1]; 217 var tokenView = document.getElementById("token"); 218 tokenView.innerText = token; 219 220 WaveService.readSession(token, displaySessionConfiguration); 221 WaveService.readSessionStatus(token, displaySessionStatus); 222 </script> 223 </body> 224 </html>