Fixes #35 - Progressively enhance install button with appropriate links and text

static/js/index.js

Index: static/js/index.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,49 @@
+"use strict";
+
+(function()
+{
+  var supportedPlatforms = {
+
+    // Desktop browsers
+    "chrome": "https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb",
+    "opera": "https://addons.opera.com/extensions/details/opera-adblock/?display=en-US",
+    "yandexbrowser": "https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb",
+    "msie": "https://update.adblockplus.org/latest/adblockplusie.exe",
+    "msedge": "https://www.microsoft.com/store/p/adblock-plus/9nblggh4r9nz",
+    "firefox": "https://update.adblockplus.org/latest/adblockplusfirefox.xpi",
+    "safari": "https://update.adblockplus.org/latest/adblockplussafari.safariextz",
+    "maxthon": "",
+
+    // Mobile platforms
+    "ios": "https://eyeo.to/adblockbrowser/ios/abp-website",
+    "android": "https://eyeo.to/adblockbrowser/android/abp-website"
+  };
+
+  function setupHeroDownloadButton()
+  {
+    var detectedPlatform = Object.keys(supportedPlatforms)
+      .find(hasOwnProperty.bind(bowser));

[juliandoucette, 2018/04/06 16:29:16]

Detail/TOL: I'm a little uncomfortable using `window.hasOwnProperty` (assuming
that this function refers to the `window` object's reference to `hasOwnProperty`
inherited from `Object.prototype`) because I'm not positive that it will exist
across platforms (although I'm fairly confident that it will) and/or not be
overwritten (although that is a problem with any object in JavaScript e.g. one
can overwrite `Object.prototype.hasOwnProperty` if they choose). I would be more
comfortable using `Object.prototype.hasOwnProperty.bind(bowser)` because I think
that it refers to the source function and not a more vulnerable reference.

I'm probably overthinking this `¯\_(ツ)_/¯`

NIT: (Just don't forget that bowser may not be defined :P)

[ire, 2018/04/09 09:24:01]

Done.
This function is only called if bowser is defined, so ew don't need to handle
those cases within the function

+
+    if (!detectedPlatform) return;
+
+    document.body.classList.add(detectedPlatform);
+
+    if (detectedPlatform == "maxthon") return;
+
+    var heroDownloadButton = document.getElementById("hero-download-button");
+    heroDownloadButton.href = supportedPlatforms[detectedPlatform];
+    heroDownloadButton.innerHTML = document
+      .getElementById("hero-download-button-template")
+      .innerHTML;
+    
+    heroDownloadButton.addEventListener("click", function(event)
+    {
+      if (!chrome || !chrome.webstore) return;

[juliandoucette, 2018/04/06 16:29:17]

This will cause a reference error if `chrome` is not defined (e.g. in Firefox).
See
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_...

Suggest: `!chrome instanceof Object || !chrome.webstore instanceof Object`

NIT/Suggest: Alternatively, you could test `!chrome instanceof Object` to ignore
not-chrome-based browsers and wrap `chrome.webstore.install` in a try/catch
block (to catch chrome based browsers without webstore and other obscure errors)
and manually redirect to the download page in the catch block. (Nuance: This
would catch JS error, not install error. We may handle install error separately
like I suggested before.)

[ire, 2018/04/09 09:24:02]

Done.

+      event.preventDefault();
+      chrome.webstore.install();
+    });
+  }
+
+  if (bowser) setupHeroDownloadButton();

[juliandoucette, 2018/04/06 16:29:17]

I think that this may also cause a reference error if `bowser` is not defined
e.g. because the network request for bowser.js failed.

[ire, 2018/04/09 09:24:02]

Done.

+
+}());