Commit 4f399418 authored by sajolida's avatar sajolida

Merge direct and BitTorrent download

BitTorrent represent 16% of downloads.

It made more sense to present direct and BitTorrent downloads
side-by-side when people had to install an extension to verify the
direct download.

It makes less sense now, so let's make the page simpler for the vast
majority:

- People downloading with BitTorrent might do the JavaScript
  verification anyway with little extra additional burden.
- We don't have to advertise BitTorrent so much to people who might not
  be able or willing to install the verification extension.
parent 5a543e13
......@@ -125,18 +125,11 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
function toggleContinueLink(method, state) {
if (method == "direct") {
hide(document.getElementById("skip-download-direct"));
hide(document.getElementById("skip-verification-direct"));
hide(document.getElementById("next-direct"));
show(document.getElementById(state));
}
if(method == "bittorrent") {
hide(document.getElementById("skip-download-bittorrent"));
hide(document.getElementById("next-bittorrent"));
show(document.getElementById(state));
}
function toggleContinueLink(state) {
hide(document.getElementById("skip-download"));
hide(document.getElementById("skip-verification"));
hide(document.getElementById("next"));
show(document.getElementById(state));
}
function hitCounter(status) {
......@@ -161,12 +154,17 @@ document.addEventListener("DOMContentLoaded", function() {
}
function resetVerificationResult(result) {
transparent(document.getElementById("step-verify"));
transparent(document.getElementById("step-continue"));
transparent(document.getElementById("continue-link"));
opaque(document.getElementById("step-verify"));
opaque(document.getElementById("continue-link"));
hide(document.getElementById("verifying-download"));
hide(document.getElementById("verification-successful"));
hide(document.getElementById("verification-failed"));
hide(document.getElementById("verification-failed-again"));
show(document.getElementById("verification"));
toggleContinueLink("direct", "skip-verification-direct");
toggleContinueLink("skip-verification");
}
function showVerifyingDownload(filename) {
......@@ -184,15 +182,14 @@ document.addEventListener("DOMContentLoaded", function() {
}
function showVerificationResult(result) {
toggleDirectBitTorrent("direct");
show(document.getElementById("verification"));
hide(document.getElementById("verify-download-wrapper"));
resetVerificationResult();
hitCounter(result);
if (result === "successful") {
show(document.getElementById("verification-successful"));
opaque(document.getElementById("step-continue-direct"));
toggleContinueLink("direct", "next-direct");
opaque(document.getElementById("step-continue"));
toggleContinueLink("next");
}
else if (result === "failed") {
show(document.getElementById("verification-failed"));
......@@ -206,36 +203,16 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
function toggleDirectBitTorrent(method) {
transparent(document.getElementById("step-verify-direct"));
transparent(document.getElementById("step-continue-direct"));
transparent(document.getElementById("continue-link-direct"));
transparent(document.getElementById("step-verify-bittorrent"));
transparent(document.getElementById("step-continue-bittorrent"));
transparent(document.getElementById("continue-link-bittorrent"));
if (method == "direct") {
opaque(document.getElementById("step-verify-direct"));
opaque(document.getElementById("continue-link-direct"));
show(document.getElementById("verify-download-wrapper"));
}
if (method == "bittorrent") {
opaque(document.getElementById("step-verify-bittorrent"));
opaque(document.getElementById("step-continue-bittorrent"));
opaque(document.getElementById("continue-link-bittorrent"));
toggleContinueLink("bittorrent", "next-bittorrent");
}
}
// Reset the page to its initial state:
// - Detect the browser version and display the relevant variant
detectBrowser();
// - Show the download steps of both direct and BitTorrent downloads
toggleDirectBitTorrent("none");
// - Show the download steps
transparent(document.getElementById("step-verify"));
transparent(document.getElementById("step-continue"));
transparent(document.getElementById("continue-link"));
// - Display 'Skip download' as continue link
toggleContinueLink("direct", "skip-download-direct");
toggleContinueLink("bittorrent", "skip-download-bittorrent");
opaque(document.getElementById("continue-link-direct"));
opaque(document.getElementById("continue-link-bittorrent"));
toggleContinueLink("skip-download");
opaque(document.getElementById("continue-link"));
// Display "Verify with your browser" when image is clicked
document.getElementById("download-img").onclick = function(e) { displayVerification(e, this); }
......@@ -245,7 +222,7 @@ document.addEventListener("DOMContentLoaded", function() {
try {
e.preventDefault();
hitCounter("download-image");
toggleDirectBitTorrent("direct");
show(document.getElementById("verify-download-wrapper"));
showAnotherMirror();
resetVerificationResult();
} finally {
......@@ -258,7 +235,7 @@ document.addEventListener("DOMContentLoaded", function() {
// Display "Verify with your browser" when "I already" is clicked
document.getElementById("already-downloaded").onclick = function() {
hitCounter("already-downloaded");
toggleDirectBitTorrent("direct");
show(document.getElementById("verify-download-wrapper"));
resetVerificationResult();
}
......@@ -270,7 +247,7 @@ document.addEventListener("DOMContentLoaded", function() {
try {
e.preventDefault();
hitCounter("download-image-again");
toggleDirectBitTorrent("direct");
show(document.getElementById("verify-download-wrapper"));
resetVerificationResult();
} finally {
// Setting window.location.href will abort AJAX requests resulting
......@@ -279,20 +256,6 @@ document.addEventListener("DOMContentLoaded", function() {
}
}
// Display "Verify with BitTorrent" when Torrent file is clicked
document.getElementById("download-img-torrent").onclick = function(e) { displayBitTorrentVerification(e, this); }
document.getElementById("download-iso-torrent").onclick = function(e) { displayBitTorrentVerification(e, this); }
function displayBitTorrentVerification(e, elm) {
try {
e.preventDefault();
hitCounter("download-torrent");
toggleDirectBitTorrent("bittorrent");
} finally {
window.location = elm.getAttribute("href");
}
}
// Trigger verification when file is chosen
document.getElementById("verify-download").onchange = function(e) { verifyFile(e, this); }
......
......@@ -14,13 +14,12 @@ were solved, and known issues that have already been identified.</p>
</div>
<div class="row">
<div class="dummy">
<div id="direct-download" class="col-md-6"> <!-- Direct download -->
<h2>Direct download</h2>
<div class="dummy">
<div class="supported-browser no-js">
<div id="step-download-direct">
<div id="step-download">
<h3><span class="step-number"><span class="usb upgrade">1.</span>1</span>Download Tails</h3>
<div class="usb upgrade download-only-img">
<a href="[[!inline pages="inc/stable_amd64_img_url" raw="yes" sort="age"]]" id="download-img" class="use-mirror-pool btn btn-primary inline-block indent">Download Tails [[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]] USB image (<span class="remove-extra-space">[[!inline pages="inc/stable_amd64_img_size" raw="yes" sort="age"]]</span>)</a>
......@@ -30,7 +29,7 @@ were solved, and known issues that have already been identified.</p>
<a href="[[!inline pages="inc/stable_amd64_iso_url" raw="yes" sort="age"]]" id="download-iso" class="use-mirror-pool btn btn-primary inline-block indent">Download Tails [[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]] ISO image (<span class="remove-extra-space">[[!inline pages="inc/stable_amd64_iso_size" raw="yes" sort="age"]]</span>)</a>
<a href="[[!inline pages="inc/stable_amd64_iso_url" raw="yes" sort="age"]]" id="download-iso" class="use-mirror-pool-on-retry btn btn-primary inline-block indent">Download Tails [[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]] ISO image (<span class="remove-extra-space">[[!inline pages="inc/stable_amd64_iso_size" raw="yes" sort="age"]]</span>)</a>
</div>
<div id="direct-download-minor">
<div id="download-minor">
<p id="already-downloaded" class="indent"><a>I already downloaded Tails&nbsp;<span class="remove-extra-space">[[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]]</span>.</a></p>
<p id="try-another-mirror" class="indent">If the download fails, try to
<a href="[[!inline pages="inc/stable_amd64_img_url" raw="yes" sort="age"]]" class="usb upgrade download-only-img">download from another mirror.</a>
......@@ -39,7 +38,7 @@ were solved, and known issues that have already been identified.</p>
</div>
</div>
<div id="step-verify-direct">
<div id="step-verify">
<h3><span class="step-number"><span class="usb upgrade">1.</span>2</span>Verify your download using your browser</h3>
<div class="caution indent">
<p><b>For your security,<br/>always verify your download!</b></p>
......@@ -123,14 +122,14 @@ were solved, and known issues that have already been identified.</p>
</div>
</div>
<div id="step-continue-direct">
<div id="step-continue">
<h3><span class="step-number"><span class="usb upgrade">1.</span>3</span>Continue
<span class="usb">installing</span>
<span class="upgrade">upgrading</span>
<span class="download-only-img download-only-iso">installing or upgrading</span></h3>
</div>
<div id="continue-link-direct" class="indent">
<div id="skip-download-direct">
<div id="continue-link" class="indent">
<div id="skip-download">
<span class="windows">[[Skip download|win/usb]]</span>
<span class="linux">[[Skip download|linux/usb]]</span>
<span class="mac">[[Skip download|mac/usb]]</span>
......@@ -142,7 +141,7 @@ were solved, and known issues that have already been identified.</p>
<span class="upgrade-linux">[[Skip download|upgrade/linux]]</span>
<span class="download-only-img download-only-iso">[[Skip download|doc#install]]</span>
</div>
<div id="skip-verification-direct" class="block">
<div id="skip-verification" class="block">
<div class="windows">[[Skip verification!|win/usb]]</div>
<div class="linux">[[Skip verification!|linux/usb]]</div>
<div class="mac">[[Skip verification!|mac/usb]]</div>
......@@ -154,7 +153,7 @@ were solved, and known issues that have already been identified.</p>
<div class="upgrade-linux">[[Skip verification!|upgrade/linux]]</div>
<div class="download-only-img download-only-iso">[[Skip verification|doc#install]]</div>
</div>
<div id="next-direct">
<div id="next">
<div class="windows">[[<div class="btn btn-primary inline-block">Next: Install Tails (<span class="next-counter"></span>)</div>|win/usb]]</div>
<div class="linux">[[<div class="btn btn-primary inline-block">Next: Install Tails (<span class="next-counter"></span>)</div>|linux/usb]]</div>
<div class="mac">[[<div class="btn btn-primary inline-block">Next: Install Tails (<span class="next-counter"></span>)</div>|mac/usb]]</div>
......@@ -232,100 +231,10 @@ were solved, and known issues that have already been identified.</p>
<p class="download-only-img"><code>https://tails.boum.org/install/download/</code></p>
<p class="download-only-iso"><code>https://tails.boum.org/install/download-iso/</code></p>
</div> <!-- Outdated browser -->
</div> <!-- Direct download -->
<div id="bittorrent-download" class="col-md-6">
<h2>BitTorrent download</h2>
<p class="floating-toggleable-link what-is-bittorrent-link">[[!toggle id="what-is-bittorrent" text="What is BitTorrent?"]]</p>
</div> <!-- dummy -->
<div id="what-is-bittorrent" class="floating-toggleable">
[[!toggleable id="what-is-bittorrent" text="""
[[!toggle id="what-is-bittorrent" text="X"]]
<p>BitTorrent is a peer-to-peer technology for file sharing that makes your
download faster and easier to resume.</p>
<p>You need to install BitTorrent software on your computer, like
<a href="https://transmissionbt.com/">Transmission</a> (for Windows, macOS, and Linux).</p>
<p>BitTorrent doesn't work over Tor or in Tails.</p>
"""]]
</div>
<div id="step-download-torrent">
<h3><span class="step-number"><span class="usb upgrade">1.</span>1</span>Download Tails (Torrent file)</h3>
<div class="usb upgrade download-only-img">
<a href="[[!inline pages="inc/stable_amd64_img_torrent_url" raw="yes" sort="age"]]" id="download-img-torrent" class="btn btn-primary inline-block indent">Download Tails [[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]] Torrent file for USB image</a>
</div>
<div class="dvd vm download-only-iso">
<a href="[[!inline pages="inc/stable_amd64_iso_torrent_url" raw="yes" sort="age"]]" id="download-iso-torrent" class="btn btn-primary inline-block indent">Download Tails [[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]] Torrent file for ISO image</a>
</div>
</div>
<div id="step-verify-bittorrent">
<h3><span class="step-number"><span class="usb upgrade">1.</span>2</span>Verify your download using BitTorrent</h3>
<p class="indent">Your BitTorrent client will automatically verify your download when it is complete.</p>
</div>
<div id="step-continue-bittorrent">
<h3><span class="step-number"><span class="usb upgrade">1.</span>3</span>Continue
<span class="usb">installing</span>
<span class="upgrade">upgrading</span>
<span class="download-only-img download-only-iso">installing or upgrading</span></h3>
<p class="indent">Open and download
the Torrent file with your BitTorrent client. It contains the
Tails [[!inline pages="inc/stable_amd64_version" raw="yes" sort="age"]]
<span class="usb upgrade download-only-img">USB</span>
<span class="dvd vm download-only-iso">ISO</span>
<span class="usb dvd vm upgrade">image that you will use in the next step.</span>
<span class="download-only-img download-only-iso">image.</span></p>
</div>
<div id="continue-link-bittorrent" class="indent">
<div id="skip-download-bittorrent">
<span class="windows">[[Skip download|win/usb]]</span>
<span class="linux">[[Skip download|linux/usb]]</span>
<span class="mac">[[Skip download|mac/usb]]</span>
<span class="dvd">[[Skip download|dvd]]</span>
<span class="vm">[[Skip download|doc/advanced_topics/virtualization]]</span>
<span class="upgrade-tails">[[Skip download|upgrade/tails]]</span>
<span class="upgrade-windows">[[Skip download|upgrade/win]]</span>
<span class="upgrade-mac">[[Skip download|upgrade/mac]]</span>
<span class="upgrade-linux">[[Skip download|upgrade/linux]]</span>
<span class="download-only-img download-only-iso">[[Skip download|doc#install]]</span>
</div>
<div id="next-bittorrent">
<div class="windows">[[<div class="btn btn-primary inline-block">Next: Install Tails (<span class="next-counter"></span>)</div>|win/usb]]</div>
<div class="linux">[[<div class="btn btn-primary inline-block">Next: Install Tails (<span class="next-counter"></span>)</div>|linux/usb]]</div>
<div class="mac">[[<div class="btn btn-primary inline-block">Next: Install Tails (<span class="next-counter"></span>)</div>|mac/usb]]</div>
<div class="upgrade-tails">[[<div class="btn btn-primary inline-block">Next: Install an intermediary Tails (<span class="next-counter"></span>)</div>|upgrade/tails]]</div>
<div class="upgrade-windows">[[<div class="btn btn-primary inline-block">Next: Install an intermediary Tails (<span class="next-counter"></span>)</div>|upgrade/win]]</div>
<div class="upgrade-mac">[[<div class="btn btn-primary inline-block">Next: Install an intermediary Tails (<span class="next-counter"></span>)</div>|upgrade/mac]]</div>
<div class="upgrade-linux">[[<div class="btn btn-primary inline-block">Next: Install an intermediary Tails (<span class="next-counter"></span>)</div>|upgrade/linux]]</div>
<div class="dvd">[[<div class="btn btn-primary inline-block">Next: Burning Tails on a DVD</div>|dvd]]</div>
<div class="vm">[[<div class="btn btn-primary inline-block">Next: Virtualization</div>|doc/advanced_topics/virtualization]]</div>
<div class="download-only-img">
<p>Upgrade your Tails USB stick and keep your Persistent Storage:</p>
<ul>
<li>[[Upgrade from your Tails|upgrade/tails]]</li>
<li>[[Upgrade from Windows|upgrade/win]]</li>
<li>[[Upgrade from macOS|upgrade/mac]]</li>
<li>[[Upgrade from Linux|upgrade/linux]]</li>
</ul>
<p>Install a new USB stick:</p>
<ul>
<li>[[Install from Windows|install/win/usb]]</li>
<li>[[Install from macOS|install/mac/usb]]</li>
<li>[[Install from Linux|install/linux/usb]]</li>
</ul>
</div>
<ul class="download-only-iso">
<li>[[Burn on a DVD|dvd]]</li>
<li>[[Run in a virtual machine|doc/advanced_topics/virtualization]]</li>
</ul>
</div>
</div>
</div> <!-- BitTorrent download -->
</div>
</div> <!-- dummy -->
<div id="openpgp">
......
......@@ -14,14 +14,13 @@ h1 {
display: initial;
}
#skip-verification-direct,
#skip-verification,
#update-extension,
#verifying-download,
#verification-successful,
#verification-failed,
#verification-failed-again,
#skip-download-direct,
#skip-download-bittorrent,
#skip-download,
#extension-version,
#tails-version,
.use-mirror-pool-on-retry {
......@@ -54,10 +53,6 @@ html[data-extension="up-to-date"] #verification {
padding-left: 0 !important;
}
#direct-download {
border-right: 1px solid #ccc;
}
.btn {
color: black !important;
background: #53b351 !important;
......@@ -74,18 +69,14 @@ span.step-number {
margin-left: 35px !important;
}
#step-download-direct, #step-download-torrent {
#step-download {
min-height: 7em;
}
#step-verify-direct, #step-verify-bittorrent, #step-continue-direct {
#step-verify, #step-continue {
margin-top: 4em;
}
#step-continue-bittorrent {
margin-top: 5em;
}
/* FLOATING TOGGLEABLE FOR 'WHY?' CONTEXTUAL HELP */
/* Hide toggleable by default so they don't appear when there is no JavaScript. */
......@@ -118,7 +109,7 @@ span.step-number {
top: 5px;
}
.caution, #bittorrent-download, #verification-failed, #verification-failed-again {
.caution, #verification-failed, #verification-failed-again {
position: relative;
}
......@@ -141,7 +132,7 @@ span.step-number {
}
html[dir="rtl"] .what-is-bittorrent-link { left: 1em; }
#direct-download-minor {
#download-minor {
margin-top: 0.5em;
}
......@@ -155,13 +146,13 @@ html[dir="rtl"] .what-is-bittorrent-link { left: 1em; }
/* Skip verification */
#skip-verification-direct div {
#skip-verification div {
background: url(../icons/dialog-warning-small.png) no-repeat;
height: 2em;
padding-left: 30px;
}
#skip-verification-direct a {
#skip-verification a {
color: #e8112d;
border-color: #e8112f;
border-size: 2px;
......@@ -189,7 +180,7 @@ html[dir="rtl"] .what-is-bittorrent-link { left: 1em; }
padding-left: 35px;
}
#continue-link-direct li, #continue-link-bittorrent li {
#continue-link li {
margin-left: 1em;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment