tools/wave/www/pause.html

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