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

static/js/index.js

 "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

+      .find(bowser.hasOwnProperty.bind(bowser));
 
     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.textContent = document
+      .getElementById("download-label-" + detectedPlatform)
+      .textContent;
     
     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.

+      if (typeof chrome == "undefined") return;
       event.preventDefault();
-      chrome.webstore.install();
+
+      try
+      {
+        chrome.webstore.install();
+      }
+      catch(error)
+      {
+        window.location = "/" + this.hreflang + "/download";
+      }
     });
   }
 
-  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.

+  if (typeof bowser != "undefined") setupHeroDownloadButton();
 
 }());