Remove button styling for other downloads links

docs/index.js

@@ -8,6 +8,7 @@ const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary
 const downloadExtBtn = document.querySelector(".download__ext");
 
 // App download buttons
+const appList = document.querySelector(".app-list");
 const appListWinBtn = document.querySelector(".app-list__win");
 const appListMacBtn = document.querySelector(".app-list__mac");
 const appListDebBtn = document.querySelector(".app-list__deb");
@@ -38,9 +39,22 @@ switch (navigator.platform) {
         downloadAppBtn.remove();
         downloadAppOther.open = true;
         downloadAppOtherSummary.hidden = true;
+
+        appList.classList.add("app-list--buttons");
+        appListWinBtn.classList.add("btn", "btn--puffy");
+        appListMacBtn.classList.add("btn", "btn--puffy");
+        appListDebBtn.classList.add("btn", "btn--puffy");
+        appListRpmBtn.classList.add("btn", "btn--puffy");
 }
 
 
+function populateAppListApp (element, fileUrl, fileName, fileSize) {
+    element.href = fileUrl;
+    element.title = `${fileName} (${fileSize})`;
+    element.dataset.appSize = fileSize;
+    element.removeAttribute("disabled");
+}
+
 
 const ENDPOINT_URL = "https://api.github.com/repos/hensm/fx_cast/releases/latest";
 
@@ -51,34 +65,38 @@ fetch(ENDPOINT_URL)
 
 function onResponse (res) {
     for (const asset of res.assets) {
-        const { browser_download_url } = asset;
+        const formattedSize = formatSize(asset.size);
 
         switch (asset.name.match(/.*\.(.*)$/).pop()) {
             case "xpi":
-                downloadExtBtn.href = browser_download_url;
+                downloadExtBtn.href = asset.browser_download_url;
                 downloadExtBtn.removeAttribute("disabled");
                 downloadExtBtn.removeAttribute("title");
                 break;
 
+
             case "exe":
-                appListWinBtn.href = browser_download_url;
-                appListWinBtn.removeAttribute("disabled");
-                appListWinBtn.removeAttribute("title");
+                populateAppListApp(
+                        appListWinBtn, asset.browser_download_url
+                      , asset.name, formattedSize);
                 break;
+
             case "pkg":
-                appListMacBtn.href = browser_download_url;
-                appListMacBtn.removeAttribute("disabled");
-                appListMacBtn.removeAttribute("title");
+                populateAppListApp(
+                        appListMacBtn, asset.browser_download_url
+                      , asset.name, formattedSize);
                 break;
+
             case "deb":
-                appListDebBtn.href = browser_download_url;
-                appListDebBtn.removeAttribute("disabled");
-                appListDebBtn.removeAttribute("title");
+                populateAppListApp(
+                        appListDebBtn, asset.browser_download_url
+                      , asset.name, formattedSize);
                 break;
+
             case "rpm":
-                appListRpmBtn.href = browser_download_url;
-                appListRpmBtn.removeAttribute("disabled");
-                appListRpmBtn.removeAttribute("title");
+                populateAppListApp(
+                        appListRpmBtn, asset.browser_download_url
+                      , asset.name, formattedSize);
                 break;
         }
     }
@@ -87,9 +105,11 @@ function onResponse (res) {
         switch (platform) {
             case "win":
                 downloadAppBtn.href = appListWinBtn.href;
+                downloadAppBtn.title = appListWinBtn.title;
                 break;
             case "mac":
                 downloadAppBtn.href = appListMacBtn.href;
+                downloadAppBtn.title = appListMacBtn.title;
                 break;
 
             default: {
@@ -98,10 +118,38 @@ function onResponse (res) {
         }
 
         downloadAppBtn.removeAttribute("disabled");
-        downloadAppBtn.removeAttribute("title");
     }
 }
 
 function onError (err) {
     console.error("Failed to fetch download links");
 }
+
+
+function formatSize (bytes, precision = 1) {
+    // Sizes in bytes
+    const kilobyte = 1024;
+    const megabyte = kilobyte * 1024;
+    const gigabyte = megabyte * 1024;
+    const terabyte = gigabyte * 1024;
+    const petabyte = terabyte * 1024;
+
+    if (bytes >= 0 && bytes < kilobyte) {
+        return `${bytes} B`;
+
+    } else if (bytes >= kilobyte && bytes < megabyte) {
+        return `${(bytes / kilobyte).toFixed(precision)} KB`;
+
+    } else if (bytes >= megabyte && bytes < gigabyte) {
+        return `${(bytes / megabyte).toFixed(precision)} MB`;
+
+    } else if (bytes >= gigabyte && bytes < terabyte) {
+        return `${(bytes / gigabyte).toFixed(precision)} GB`;
+
+    } else if (bytes >= terabyte && bytes < petabyte) {
+        return `${(bytes / terabyte).toFixed(precision)} TB`;
+
+    } else if (bytes >= petabyte) {
+        return `${(bytes / petabyte).toFixed(precision)} PB`;
+    }
+}