tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

index.html (8477B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3  <head>
      4    <meta charset="UTF-8" />
      5    <meta name="viewport" content="width=device-width, initial-scale=1" />
      6    <title>Web Media API Snapshot Test Suite</title>
      7    <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
      8    <link rel="stylesheet" href="css/fontawesome.min.css" />
      9    <script src="lib/keycodes.js"></script>
     10    <script src="lib/wave-service.js"></script>
     11    <script src="lib/davidshimjs/qrcode.js"></script>
     12  </head>
     13 
     14  <body>
     15    <section class="section">
     16      <div class="container">
     17        <img
     18          style="max-width: 300px; margin-bottom: 30px; margin-left: -15px;"
     19          src="res/wavelogo_2016.jpg"
     20          alt="WAVE (Web Application Video Ecosystem) Project Logo"
     21        />
     22 
     23        <h1 class="title is-spaced">
     24          WAVE WMAS Test Suite
     25        </h1>
     26        <p class="subtitle">
     27          <a href="https://github.com/w3c/webmediaapi/">GitHub</a> -
     28        </p>
     29      </div>
     30 
     31      <div class="container" style="margin-top: 2em;">
     32        <h2 class="title is-5">
     33          New test session
     34        </h2>
     35        <div class="columns is-vcentered" style="margin-top: 20px;">
     36          <div class="column is-narrow">
     37            <div
     38              id="qr-code"
     39              style="
     40                width: 256px;
     41                height: 256px;
     42                padding: 5px;
     43                border: 1px gray solid;
     44                border-radius: 3px;
     45              "
     46            ></div>
     47          </div>
     48          <div class="column">
     49            <table style="margin-bottom: 1.5em;">
     50              <tr>
     51                <td class="has-text-weight-bold" style="padding-right: 1rem;">
     52                  Token:
     53                </td>
     54                <td id="session-token" class="is-family-monospace"></td>
     55              </tr>
     56              <tr>
     57                <td class="has-text-weight-bold" style="padding-right: 1rem;">
     58                  Expires:
     59                </td>
     60                <td id="expiary-date"></td>
     61              </tr>
     62              <tr>
     63                <td></td>
     64                <td>
     65                  <p class="is-size-7">(Session start revokes expiration.)</p>
     66                </td>
     67              </tr>
     68            </table>
     69 
     70            <p style="max-width: 32rem; margin-bottom: 1rem;">
     71              Configure a new session on a second device by scanning the
     72              QR-Code, or click the button:
     73            </p>
     74            <div
     75              class="button"
     76              style="margin-bottom: 1rem;"
     77              id="configure-button"
     78            >
     79              <span class="icon"><i class="fas fa-sliders-h"></i></span>
     80              <span>Configure Session</span>
     81            </div>
     82            <p style="max-width: 32rem;">
     83              The tests will start running in this window, as soon as the
     84              session is started from the configuration view.
     85            </p>
     86          </div>
     87        </div>
     88      </div>
     89 
     90      <div class="container" style="margin-top: 2em;">
     91        <h2 class="title is-5">
     92          Resume running session
     93        </h2>
     94        <article
     95          id="unknown_token_error"
     96          style="max-width: 30em; display: none;"
     97          class="message is-danger"
     98        >
     99          <div class="message-body">
    100            Unknown token
    101          </div>
    102        </article>
    103        <div class="columns is-vcentered">
    104          <div id="resume_token" class="column is-narrow"></div>
    105          <div class="button-group column">
    106            <button
    107              id="resume-button"
    108              class="button is-success tabbable"
    109              type="submit"
    110              data-uid="100"
    111              autofocus
    112            >
    113              <span class="icon"><i class="fas fa-redo"></i></span>
    114              <span>Resume</span>
    115            </button>
    116          </div>
    117        </div>
    118      </div>
    119    </section>
    120 
    121    <script>
    122      var selectedTabbable = -1;
    123 
    124      function removeClass(element, className) {
    125        var elementClass = element.className;
    126        var index = elementClass.indexOf(className);
    127        if (index !== -1) {
    128          element.className = elementClass.replace(className, "");
    129        }
    130      }
    131 
    132      function addClass(element, className) {
    133        element.className += " " + className;
    134      }
    135 
    136      function skipFocus(steps) {
    137        var tabbables = document.getElementsByClassName("tabbable");
    138        if (selectedTabbable === -1) {
    139          selectedTabbable = 0;
    140        } else {
    141          removeClass(tabbables[selectedTabbable], "focused");
    142          selectedTabbable += steps;
    143        }
    144 
    145        if (selectedTabbable >= tabbables.length) {
    146          selectedTabbable = 0;
    147        }
    148 
    149        if (selectedTabbable < 0) {
    150          selectedTabbable = tabbables.length - 1;
    151        }
    152 
    153        tabbables[selectedTabbable].focus();
    154        addClass(tabbables[selectedTabbable], "focused");
    155      }
    156 
    157      function focusNext() {
    158        skipFocus(1);
    159      }
    160 
    161      function focusPrevious() {
    162        skipFocus(-1);
    163      }
    164 
    165      // Resume
    166      var resumeToken = "";
    167      var cookies = document.cookie.split(";");
    168      for (var i = 0; i < cookies.length; i++) {
    169        var cookie = cookies[i];
    170        if (cookie.split("=")[0].replace(/ /g, "") === "resume_token") {
    171          resumeToken = cookie.split("=")[1];
    172          break;
    173        }
    174      }
    175      if (!resumeToken) resumeToken = "";
    176 
    177      var resumeButton = document.getElementById("resume-button");
    178 
    179      var tokenText = document.getElementById("resume_token");
    180      if (resumeToken) {
    181        tokenText.innerText = "Last session: " + resumeToken;
    182      } else {
    183        tokenText.innerText = "No recent session.";
    184        resumeButton.setAttribute("disabled", "");
    185      }
    186      var unknownTokenError = document.getElementById("unknown_token_error");
    187      resumeButton.onclick = function (event) {
    188        location.href = WEB_ROOT + "next.html?token=" + resumeToken;
    189      };
    190 
    191      resumeButton.onkeydown = function (event) {
    192        var charCode =
    193          typeof event.which === "number" ? event.which : event.keyCode;
    194        if (ACTION_KEYS.indexOf(charCode) === -1) return;
    195        location.href = WEB_ROOT + "next.html?token=" + resumeToken;
    196      };
    197 
    198      document.onkeydown = function (event) {
    199        event = event || window.event;
    200        var charCode =
    201          typeof event.which === "number" ? event.which : event.keyCode;
    202 
    203        if (ACTION_KEYS.indexOf(charCode) !== -1) {
    204          event.preventDefault();
    205          var tabbables = document.getElementsByClassName("tabbable");
    206          var element = tabbables[selectedTabbable];
    207          if (!element) return;
    208          if (element.type === "checkbox") {
    209            element.checked = !element.checked;
    210          } else {
    211            element.click();
    212          }
    213        }
    214 
    215        if (PREV_KEYS.indexOf(charCode) !== -1) {
    216          focusPrevious();
    217        }
    218 
    219        if (NEXT_KEYS.indexOf(charCode) !== -1) {
    220          focusNext();
    221        }
    222      };
    223 
    224      var lifeTime = 30 * 60 * 1000; // 30min
    225      WaveService.createSession(
    226        { expirationDate: new Date().getTime() + lifeTime },
    227        function (token) {
    228          var sessionTokenElement = document.getElementById("session-token");
    229          sessionTokenElement.innerText = token;
    230 
    231          WaveService.readSessionStatus(token, function (config) {
    232            var expiaryDateElement = document.getElementById("expiary-date");
    233            expiaryDateElement.innerText = config.expirationDate.toLocaleString();
    234          });
    235 
    236          var configurationUrl =
    237            location.origin +
    238            WEB_ROOT +
    239            "configuration.html?token=" +
    240            token +
    241            "&resume=" +
    242            resumeToken;
    243          new QRCode(document.getElementById("qr-code"), configurationUrl);
    244          document.getElementById("configure-button").onclick = function () {
    245            window.open(configurationUrl, "_blank");
    246          };
    247 
    248          WaveService.addSessionEventListener(token, function (message) {
    249            if (message.type === "resume") {
    250              var resumeToken = message.data;
    251              location.href = WEB_ROOT + "next.html?token=" + resumeToken;
    252            }
    253 
    254            if (message.type !== "status") return;
    255            if (message.data === "pending") return;
    256            location.href = WEB_ROOT + "next.html?token=" + token;
    257          });
    258        }
    259      );
    260      document.getElementById("resume-button").focus();
    261    </script>
    262  </body>
    263 </html>