go from classes to prototypes

2020-01-27 16:56:16 +01:00
parent 9c862c48e1
commit cd69b63583
19 changed files with 1147 additions and 1114 deletions
--- a/res/include/img/icons/pixeldrain.svg
+++ b/res/include/img/icons/pixeldrain.svg
@@ -0,0 +1,3 @@
+<svg enable-background="new 0 0 283.46 283.46" version="1.1" viewBox="0 0 283 283" xmlns="http://www.w3.org/2000/svg">
+<path fill="#{{.Style.InputTextColor.RGB}}" d="m142 2.23c-77 0-139 62.5-139 140 0 77 62.5 139 139 139 77 0 139-62.5 139-139 1e-3 -77-62.5-140-139-140zm0 258c-65.7 0-119-53.2-119-119s53.2-119 119-119c65.7 0 119 53.2 119 119 0 65.7-53.2 119-119 119zm0-219c-55.1 0-99.8 44.7-99.8 99.8 0 55.1 44.7 99.8 99.8 99.8s99.8-44.7 99.8-99.8c0-55.1-44.7-99.8-99.8-99.8zm49.3 36c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-49.3-20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-48.7 20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c-1e-3 -8.69 7.04-15.7 15.7-15.7zm-35 63.8c0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7-8.69 0-15.7-7.04-15.7-15.7zm35 65.6c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm48.7 20.7c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7 8.69 0 15.7 7.04 15.7 15.7 1e-3 8.68-7.04 15.7-15.7 15.7zm2e-3 -47c-21.2 0-38.5-17.2-38.5-38.5 0-21.2 17.2-38.5 38.5-38.5 21.2 0 38.5 17.2 38.5 38.5 0 21.2-17.2 38.5-38.5 38.5zm49.3 26.3c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm18.6-49.9c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7z"/>
+</svg>
--- a/res/include/script/dependencies/UploadManager.js
+++ b/res/include/script/dependencies/UploadManager.js
@@ -1,5 +1,4 @@
-class UploadManager {
-	constructor(apiAddress, uploadsFinished) {let um = this;
+function UploadManager(apiAddress, uploadsFinished) {let um = this;

 	um.apiAddress = apiAddress;

@@ -36,14 +35,14 @@ class UploadManager {
 	um.jobCounter = 0;
 }

-	finishedUploads() {let um = this;
+UploadManager.prototype.finishedUploads = function() {let um = this;
 	um.uploadLog.sort(function(a, b) {
 		return a.jobID - b.jobID;
 	})
 	return um.uploadLog;
 }

-	addFile(
+UploadManager.prototype.addFile = function(
 	file, // Blob
 	name, // string
 	onProgress, // func (progress: number)
@@ -69,7 +68,7 @@ class UploadManager {
 	}
 }

-	startUpload() {let um = this;
+UploadManager.prototype.startUpload = function() {let um = this;
 	if (um.uploadQueue.length === 0) {
 		return; // Nothing to upload
 	}
@@ -80,7 +79,7 @@ class UploadManager {
 	}
 }

-	finishUpload() {let um = this;
+UploadManager.prototype.finishUpload = function() {let um = this;
 	um.activeWorkers--;

 	if (
@@ -96,7 +95,7 @@ class UploadManager {
 	um.startUpload();
 }

-	uploadThread() {let um = this;
+UploadManager.prototype.uploadThread = function() {let um = this;
 	let job = um.uploadQueue.shift(); // Get the first element of the array
 	console.debug("Starting upload of " + job.name);

@@ -167,4 +166,3 @@ class UploadManager {
 	};
 	xhr.send(form);
 }
-}
--- a/res/include/script/file_viewer/DetailsWindow.js
+++ b/res/include/script/file_viewer/DetailsWindow.js
@@ -1,5 +1,4 @@
-class DetailsWindow {
-	constructor(viewer) {let dw = this;
+function DetailsWindow(viewer) {let dw = this;
 	dw.viewer  = viewer;
 	dw.visible = false;
 	dw.fileID  = "";
@@ -14,7 +13,7 @@ class DetailsWindow {
 	dw.btnCloseDetails.addEventListener("click", () => { dw.toggle(); });
 }

-	toggle() {let dw = this;
+DetailsWindow.prototype.toggle = function() {let dw = this;
 	if (dw.visible) {
 		dw.divPopup.style.opacity = "0";
 		dw.divPopup.style.visibility = "hidden";
@@ -37,7 +36,7 @@ class DetailsWindow {
 	}
 }

-	setDetails(file) {let dw = this;
+DetailsWindow.prototype.setDetails = function(file) {let dw = this;
 	let desc = "";
 	if (dw.viewer.isList) {
 		desc = file.description;
@@ -59,7 +58,7 @@ class DetailsWindow {
 	}
 }

-	updateGraph(fileID) {let dw = this;
+DetailsWindow.prototype.updateGraph = function(fileID) {let dw = this;
 	console.log("updating graph "+fileID);
 	fetch(apiEndpoint+"/file/" + fileID + "/timeseries?interval=60?days=14").then(resp => {
 		if (!resp.ok) {return null;}
@@ -72,7 +71,7 @@ class DetailsWindow {
 	})
 }

-	renderGraph() {let dw = this;
+DetailsWindow.prototype.renderGraph = function() {let dw = this;
 	console.log("rendering graph");
 	Chart.defaults.global.defaultFontColor = "#b3b3b3";
 	Chart.defaults.global.defaultFontSize = 15;
@@ -151,4 +150,3 @@ class DetailsWindow {
 		}
 	);
 }
-}
--- a/res/include/script/file_viewer/ListNavigator.js
+++ b/res/include/script/file_viewer/ListNavigator.js
@@ -1,5 +1,4 @@
-class ListNavigator {
-	constructor(viewer, data){let ln = this;
+function ListNavigator(viewer, data) {let ln = this;
 	ln.viewer   = viewer;
 	ln.data     = data;
 	ln.length   = data.length;
@@ -44,7 +43,7 @@ class ListNavigator {
 	}
 }

-	nextItem(){let ln = this;
+ListNavigator.prototype.nextItem = function() {let ln = this;
 	if(ln.shuffle){
 		ln.randItem();
 		return;
@@ -59,7 +58,7 @@ class ListNavigator {
 	ln.setItem(ln.position);
 }

-	previousItem(){let ln = this;
+ListNavigator.prototype.previousItem = function() {let ln = this;
 	if(ln.position === 0){
 		ln.position = ln.length - 1;
 	}else{
@@ -69,7 +68,7 @@ class ListNavigator {
 	ln.setItem(ln.position);
 }

-	randItem(){let ln = this;
+ListNavigator.prototype.randItem = function() {let ln = this;
 	// Avoid viewing the same file multiple times
 	let rand;
 	do {
@@ -80,7 +79,7 @@ class ListNavigator {
 	ln.setItem(rand);
 }

-	setItem(index){let ln = this;
+ListNavigator.prototype.setItem = function(index) {let ln = this;
 	if(index >= ln.length){
 		ln.position = 0;
 	}else{
@@ -121,11 +120,11 @@ class ListNavigator {
 	animateScroll(start, 0);
 }

-	downloadList(){let ln = this;
+ListNavigator.prototype.downloadList = function() {let ln = this;
 	document.getElementById("download_frame").src = "/api/list/" + ln.viewer.listId + "/zip";
 }

-	addToHistory(index){let ln = this;
+ListNavigator.prototype.addToHistory = function(index) {let ln = this;
 	if(ln.history.length >= (ln.length - 6)){
 		ln.history.shift();
 	}
@@ -133,7 +132,7 @@ class ListNavigator {
 	ln.history.push(index);
 }

-	toggleShuffle(){let ln = this;
+ListNavigator.prototype.toggleShuffle = function() {let ln = this;
 	ln.shuffle = !ln.shuffle; // :P

 	if(ln.shuffle){
@@ -145,7 +144,7 @@ class ListNavigator {
 	}
 }

-	loadThumbnails(index){let ln = this;
+ListNavigator.prototype.loadThumbnails = function(index) {let ln = this;
 	let startPos = +index - 50;
 	let endPos   = +index + 50;
 	// fyi, the + is to let javascript know it's actually a number instead of a string
@@ -175,7 +174,7 @@ class ListNavigator {
 		navigatorItems[i].innerHTML = itemHtml;
 	}
 }
-};
+


 // Misc function, don't really know where else to put it
--- a/res/include/script/file_viewer/Toolbar.js
+++ b/res/include/script/file_viewer/Toolbar.js
@@ -1,5 +1,4 @@
-class Toolbar {
-	constructor(viewer) {let t = this;
+function Toolbar(viewer) {let t = this;
 	t.viewer = viewer;
 	t.visible = false;
 	t.sharebarVisible = false;
@@ -24,7 +23,7 @@ class Toolbar {
 	t.btnShare.addEventListener("click",         () => { t.toggleSharebar(); });
 }

-	toggle() {let t = this;
+Toolbar.prototype.toggle = function() {let t = this;
 	if (t.visible) {
 		if (t.sharebarVisible) { t.toggleSharebar(); }

@@ -40,7 +39,7 @@ class Toolbar {
 	}
 }

-	toggleSharebar(){let t = this;
+Toolbar.prototype.toggleSharebar = function() {let t = this;
 	if (navigator.share) {
 		navigator.share({
 			title: t.viewer.title,
@@ -61,7 +60,7 @@ class Toolbar {
 	}
 }

-	download() {let t = this;
+Toolbar.prototype.download = function() {let t = this;
 	let triggerDL = (captchaResp = "") => {
 		if (captchaResp === "") {
 			t.downloadFrame.src = apiEndpoint+"/file/"+
@@ -131,7 +130,7 @@ class Toolbar {
 	});
 }

-	copyUrl() {let t = this;
+Toolbar.prototype.copyUrl = function() {let t = this;
 	if(copyText(window.location.href)) {
 		console.log('Text copied');
 		t.spanCopyLink.innerText = "Copied!";
@@ -149,12 +148,12 @@ class Toolbar {
 	}, 60000);
 }

-	setStats(file) {let t = this;
+Toolbar.prototype.setStats = function(file) {let t = this;
 	t.spanViews.innerText = file.views
 	t.spanDownloads.innerText = Math.round((file.bandwidth_used/file.size)*10)/10;
 	t.spanSize.innerText = formatDataVolume(file.size, 3);
 }
-}
+

 // Called by the google recaptcha script
 let recaptchaResponse = "";
--- a/res/include/script/file_viewer/Viewer.js
+++ b/res/include/script/file_viewer/Viewer.js
@@ -1,5 +1,4 @@
-class Viewer {
-	constructor(type, viewToken, data) {let v = this;
+function Viewer(type, viewToken, data) {let v = this;
 	// Set defaults
 	v.toolbar       = null;
 	v.listNavigator = null;
@@ -52,7 +51,7 @@ class Viewer {
 	v.initialized = true;
 }

-	setFile(file) {let v = this;
+Viewer.prototype.setFile = function(file) {let v = this;
 	v.currentFile = file.id;
 	if (v.isList) {
 		document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em";
@@ -118,7 +117,7 @@ class Viewer {
 	}
 }

-	renderSponsors() {
+Viewer.prototype.renderSponsors = function() {
 	let scale       = 1;
 	let scaleWidth  = 1;
 	let scaleHeight = 1;
@@ -153,12 +152,12 @@ class Viewer {
 	}
 }

-	keyboardEvent(evt) {let v = this;
+Viewer.prototype.keyboardEvent = function(evt) {let v = this;
 	if (evt.ctrlKey || evt.altKey) {
 		return // prevent custom shortcuts from interfering with system shortcuts
 	}

-		switch (evt.which) {
+	switch (evt.keyCode) {
 	case 65: // A or left arrow key go to previous file
 	case 37:
 		if (v.listNavigator != null) {
@@ -194,7 +193,7 @@ class Viewer {
 		break;
 	}
 }
-};
+

 // Against XSS attacks
 function escapeHTML(str) {
--- a/res/include/script/file_viewer/viewer_scripts/AudioViewer.js
+++ b/res/include/script/file_viewer/viewer_scripts/AudioViewer.js
@@ -1,5 +1,4 @@
-class AudioViewer {
-	constructor(viewer, file, next) {let v = this;
+function AudioViewer(viewer, file, next) {let v = this;
 	v.viewer = viewer;
 	v.file   = file;
 	v.next   = next;
@@ -29,7 +28,6 @@ class AudioViewer {
 	v.container.appendChild(v.element);
 }

-	render(parent) {let v = this;
+AudioViewer.prototype.render = function(parent) {let v = this;
 	parent.appendChild(v.container);
 }
-}
--- a/res/include/script/file_viewer/viewer_scripts/FileViewer.js
+++ b/res/include/script/file_viewer/viewer_scripts/FileViewer.js
@@ -1,5 +1,4 @@
-class FileViewer {
-	constructor(viewer, file, next) {let v = this;
+function FileViewer(viewer, file, next) {let v = this;
 	v.viewer = viewer;
 	v.file   = file;
 	v.next   = next;
@@ -23,7 +22,6 @@ class FileViewer {
 	));
 }

-	render(parent) {let v = this;
+FileViewer.prototype.render = function(parent) {let v = this;
 	parent.appendChild(v.container);
 }
-}
--- a/res/include/script/file_viewer/viewer_scripts/ImageViewer.js
+++ b/res/include/script/file_viewer/viewer_scripts/ImageViewer.js
@@ -1,5 +1,4 @@
-class ImageViewer {
-	constructor(viewer, file) {let v = this;
+function ImageViewer(viewer, file) {let v = this;
 	v.viewer   = viewer;
 	v.file     = file;
 	v.zoomed   = false;
@@ -23,11 +22,11 @@ class ImageViewer {
 	v.container.appendChild(v.element);
 }

-	render(parent) {let v = this;
+ImageViewer.prototype.render = function(parent) {let v = this;
 	parent.appendChild(v.container);
 }

-	doubleclick(e) {let v = this;
+ImageViewer.prototype.doubleclick = function(e) {let v = this;
 	if (v.zoomed) {
 		v.element.style.maxWidth = "100%";
 		v.element.style.maxHeight = "100%";
@@ -51,7 +50,7 @@ class ImageViewer {
 	return false;
 }

-	mousedown(e) {let v = this;
+ImageViewer.prototype.mousedown = function(e) {let v = this;
 	if (!v.dragging && e.which === 1 && v.zoomed) {
 		v.x = e.pageX;
 		v.y = e.pageY;
@@ -63,7 +62,7 @@ class ImageViewer {
 	}
 }

-	mousemove(e) {let v = this;
+ImageViewer.prototype.mousemove = function(e) {let v = this;
 	if (v.dragging) {
 		v.container.scrollLeft = v.container.scrollLeft - (e.pageX - v.x);
 		v.container.scrollTop  = v.container.scrollTop  - (e.pageY - v.y);
@@ -78,7 +77,7 @@ class ImageViewer {

 }

-	mouseup(e) {let v = this;
+ImageViewer.prototype.mouseup = function(e) {let v = this;
 	if (v.dragging) {
 		v.dragging = false;

@@ -87,4 +86,3 @@ class ImageViewer {
 		return false;
 	}
 }
-}
--- a/res/include/script/file_viewer/viewer_scripts/PDFViewer.js
+++ b/res/include/script/file_viewer/viewer_scripts/PDFViewer.js
@@ -1,5 +1,4 @@
-class PDFViewer {
-	constructor(viewer, file) {let v = this;
+function PDFViewer(viewer, file) {let v = this;
 	v.viewer = viewer;
 	v.file   = file;

@@ -9,7 +8,6 @@ class PDFViewer {
 	v.container.src = "/res/misc/pdf-viewer/web/viewer.html?file="+apiEndpoint+"/file/"+file.id;
 }

-	render(parent) {let v = this;
+PDFViewer.prototype.render = function(parent) {let v = this;
 	parent.appendChild(v.container);
 }
-}
--- a/res/include/script/file_viewer/viewer_scripts/TextViewer.js
+++ b/res/include/script/file_viewer/viewer_scripts/TextViewer.js
@@ -1,5 +1,4 @@
-class TextViewer {
-	constructor(viewer, file) {let v = this;
+function TextViewer(viewer, file) {let v = this;
 	v.viewer      = viewer;
 	v.file        = file;
 	v.pre         = null;
@@ -15,7 +14,7 @@ class TextViewer {
 	}
 }

-	getText() {let v = this;
+TextViewer.prototype.getText = function() {let v = this;
 	v.pre = document.createElement("pre");
 	v.pre.classList = "pre-container prettyprint linenums";
 	v.pre.innerText = "Loading...";
@@ -41,7 +40,7 @@ class TextViewer {
 	});
 }

-	getMarkdown() {let v = this;
+TextViewer.prototype.getMarkdown = function() {let v = this;
 	fetch("/u/"+v.file.id+"/preview").then(resp => {
 		if (!resp.ok) { return Promise.reject(resp.status); }
 		return resp.text();
@@ -52,7 +51,6 @@ class TextViewer {
 	});
 }

-	render(parent) {let v = this;
+TextViewer.prototype.render = function(parent) {let v = this;
 	parent.appendChild(v.container);
 }
-}
--- a/res/include/script/file_viewer/viewer_scripts/VideoViewer.js
+++ b/res/include/script/file_viewer/viewer_scripts/VideoViewer.js
@@ -1,5 +1,4 @@
-class VideoViewer {
-	constructor(viewer, file, next) {let v = this;
+function VideoViewer(viewer, file, next) {let v = this;
 	v.viewer = viewer;
 	v.file   = file;
 	v.next   = next;
@@ -20,7 +19,6 @@ class VideoViewer {
 	v.vidContainer.appendChild(v.vidElement);
 }

-	render(parent) {let v = this;
+VideoViewer.prototype.render = function(parent) {let v = this;
 	parent.appendChild(v.vidContainer);
 }
-}
--- a/res/include/script/homepage.js
+++ b/res/include/script/homepage.js
@@ -1,23 +1,21 @@
-class UploadProgressBar {
-	constructor(uploadManager, queueDiv, file){
-		this.uploadManager = uploadManager;
-		this.file = file;
-		this.name = file.name;
+function UploadProgressBar(uploadManager, queueDiv, file){let upb = this;
+	upb.uploadManager = uploadManager;
+	upb.file = file;
+	upb.name = file.name;

-		this.uploadDiv = document.createElement("a");
-		this.uploadDiv.classList.add("file_button");
-		this.uploadDiv.style.opacity = "0";
-		this.uploadDiv.innerText = "Queued\n" + this.file.name;
-		queueDiv.appendChild(this.uploadDiv);
+	upb.uploadDiv = document.createElement("a");
+	upb.uploadDiv.classList.add("file_button");
+	upb.uploadDiv.style.opacity = "0";
+	upb.uploadDiv.innerText = "Queued\n" + upb.file.name;
+	queueDiv.appendChild(upb.uploadDiv);

 	// Start uploading the file
-		let that = this;
-		this.uploadManager.addFile(
-			this.file,
-			this.name,
-			function(progress) { that.onProgress(progress); },
-			function(id)       { that.onFinished(id); },
-			function(val, msg) { that.onFailure(val, msg); }
+	upb.uploadManager.addFile(
+		upb.file,
+		upb.name,
+		function(progress) { upb.onProgress(progress); },
+		function(id)       { upb.onFinished(id); },
+		function(val, msg) { upb.onFailure(val, msg); }
 	);

 	// Browsers don't render the transition if the opacity is set and
@@ -27,7 +25,7 @@ class UploadProgressBar {
 	window.setTimeout(function(){d.style.opacity = "1";}, 100)
 }

-	onProgress(progress){
+UploadProgressBar.prototype.onProgress = function(progress){
 	this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.name
 	this.uploadDiv.style.background = 'linear-gradient('
 		+'to right, '
@@ -35,7 +33,7 @@ class UploadProgressBar {
 		+'var(--highlight_color) '+ ((progress*100)) +'%, '
 		+'var(--file_background_color) '+ ((progress*100)+1) +'%)'
 }
-	onFinished(id){
+UploadProgressBar.prototype.onFinished = function(id){
 	console.log("Upload finished: "+this.file.name+" "+id);

 	this.uploadDiv.style.background = 'var(--file_background_color)'
@@ -56,7 +54,7 @@ class UploadProgressBar {
 	this.uploadDiv.appendChild(document.createElement("br"))
 	this.uploadDiv.appendChild(linkSpan)
 }
-	onFailure(error) {
+UploadProgressBar.prototype.onFailure = function(error) {
 	this.uploadDiv.innerHTML = "" // Remove uploading progress
 	this.uploadDiv.style.background = 'var(--danger_color)'
 	this.uploadDiv.appendChild(document.createTextNode(this.file.name))
@@ -65,7 +63,7 @@ class UploadProgressBar {
 	this.uploadDiv.appendChild(document.createElement("br"))
 	this.uploadDiv.appendChild(document.createTextNode(error))
 }
-}
+

 let uploader   = null;
 let shareTitle = "";
@@ -76,6 +74,10 @@ function handleUploads(files) {
 		uploader = new UploadManager(apiEndpoint, uploadsFinished);
 	}

+	if (files.length === 0) {
+		return;
+	}
+
 	for (let i = 0; i < files.length; i++) {
 		new UploadProgressBar(
 			uploader,
@@ -143,13 +145,10 @@ function createList(title, anonymous) {
 }

 function hideShareButtons() {
-	document.getElementById("instruction_2").style.display = "";
-	document.getElementById("instruction_3").style.display = "none";
 	document.getElementById("instruction_3_after").style.display = "none";
 }

 function showShareButtons() {
-	document.getElementById("instruction_3").style.display = "";
 	document.getElementById("instruction_3_after").style.display = "";

 	if (window.navigator && window.navigator.share) {
@@ -350,20 +349,19 @@ btnCopyMarkdown.addEventListener("click", function(){
 /*
 * Keyboard shortcuts
 */
-
 document.addEventListener("keydown", function(event){
 	if (event.ctrlKey || event.altKey) {
 		return // prevent custom shortcuts from interfering with system shortcuts
 	}
-	if (event.which === 67 && !uploader.uploading()) { // c
+	if (event.keyCode === 67) { // c
 		// Copy links to clipboard
-		copyLink();
-	} else if (event.which === 85) { // u
+		document.getElementById("btn_copy_link").click();
+	} else if (event.keyCode === 85) { // u
 		// Click the upload button
 		document.getElementById("file_input_field").click();
-	} else if (event.which === 84) { // t
+	} else if (event.keyCode === 84) { // t
 		// Click the text button
 		document.getElementById("upload_text_button").click();
 	}
-	console.log(event.which)
+	console.log(event.keyCode)
 });
--- a/res/include/script/textupload.js
+++ b/res/include/script/textupload.js
@@ -23,7 +23,7 @@ function uploadText() {

 // Upload the file when ctrl + s is pressed
 document.addEventListener("keydown", function(event) {
-	if (event.ctrlKey && (event.which === 83)) {
+	if (event.ctrlKey && (event.keyCode === 83)) {
 		event.preventDefault();
 		uploadText();
 		return false;
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -245,23 +245,6 @@ hr{
 	margin: 16px 16px 16px 16px;
 }

-::-webkit-scrollbar{
-	width: 1em;  /* for vertical scrollbars */
-	height: 1em; /* for horizontal scrollbars */
-}
-::-webkit-scrollbar-track {
-	background: var(--scrollbar_background_color);
-}
-::-webkit-scrollbar-thumb {
-	background-color: var(--scrollbar_foreground_color);
-	border-radius: 0.5em;
-	border: 0.22em solid var(--scrollbar_background_color);
-}
-::-webkit-scrollbar-thumb:hover {
-	background-color: var(--scrollbar_hover_color);
-}
-::-webkit-scrollbar-corner{background: var(--scrollbar_background_color);}
-
 a       {color: var(--highlight_color); text-decoration: none;}
 a:hover {color: var(--highlight_color); text-decoration: underline;}

@@ -477,3 +460,66 @@ input[type=file]{
 	width: 0;
 	height: 0;
 }
+
+/* Webkit Scrollbars */
+
+::-webkit-scrollbar{
+	width: 18px;  /* for vertical scrollbars */
+	height: 18px; /* for horizontal scrollbars */
+}
+::-webkit-scrollbar-track {
+	background: var(--scrollbar_background_color);
+}
+::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar_foreground_color);
+	border-radius: 10px;
+	border: 5px solid var(--scrollbar_background_color);
+}
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scrollbar_hover_color);
+}
+::-webkit-scrollbar-corner{
+	background-color: var(--scrollbar_background_color);
+}
+::-webkit-scrollbar-button:single-button {
+	background-color: var(--scrollbar_background_color);
+	display: block;
+	border-style: solid;
+	height: 10px;
+	width: 10px;
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement {
+	border-width: 0 8px 8px 8px;
+	border-color: transparent transparent var(--scrollbar_foreground_color) transparent;
+}
+::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+	border-color: transparent transparent var(--scrollbar_hover_color) transparent;
+}
+::-webkit-scrollbar-button:single-button:vertical:increment {
+	border-width: 8px 8px 0 8px;
+	border-color: var(--scrollbar_foreground_color) transparent transparent transparent;
+}
+::-webkit-scrollbar-button:vertical:single-button:increment:hover {
+	border-color: var(--scrollbar_hover_color) transparent transparent transparent;
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement {
+	border-width: 8px 8px 8px 0px;
+	border-color: transparent var(--scrollbar_foreground_color) transparent transparent;
+}
+::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
+	border-color: transparent var(--scrollbar_hover_color) transparent transparent;
+}
+::-webkit-scrollbar-button:single-button:horizontal:increment {
+	border-width: 8px 0px 8px 8px;
+	border-color: transparent transparent transparent var(--scrollbar_foreground_color);
+}
+::-webkit-scrollbar-button:horizontal:single-button:increment:hover {
+    border-color: transparent transparent transparent var(--scrollbar_hover_color);
+}
+
+/* Firefox Scrollbar */
+
+* {
+	/* scrollbar-color: var(--scrollbar_foreground_color) var(--scrollbar_background_color); */
+	scrollbar-color: dark;
+}
--- a/res/include/style/viewer.css
+++ b/res/include/style/viewer.css
@@ -48,6 +48,12 @@
 .file_viewer > .file_viewer_headerbar > .button_home::after {
 	content: "pixeldrain";
 }
+.file_viewer > .file_viewer_headerbar > .button_home > svg {
+	height: 1.7em;
+	width: 1.7em;
+	margin: -0.25em;
+	margin-right: 0.2em;
+}
@media (max-width: 500px) {
 	.file_viewer > .file_viewer_headerbar > .button_home::after {
 		content: "pd";
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -24,9 +24,7 @@
 			<div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar">
 				<button id="btn_toggle_toolbar" class="button_toggle_toolbar">☰</button>
 				<a href="/" id="button_home" class="button button_home">
-					<img src="{{template `pixeldrain_icon.png`}}"
-						alt="Back to the Home page"
-						style="height: 1.5em; margin: -0.2em; margin-right: 0.2em;"/>
+					{{template `pixeldrain.svg` .}}
 				</a>
 				<div id="file_viewer_headerbar_title" class="file_viewer_headerbar_title">
 					<div id="file_viewer_list_title"></div>
@@ -153,8 +151,9 @@

 		<script src="/res/script/Chart.min.js"></script>
 		<script>
-			var apiEndpoint = '{{.APIEndpoint}}';
-			var captchaKey = '{{.Other.CaptchaKey}}';
+			'use strict';
+			let apiEndpoint = '{{.APIEndpoint}}';
+			let captchaKey = '{{.Other.CaptchaKey}}';

 			{{template `util.js`}}
 			{{template `Toolbar.js`}}
--- a/res/template/home.html
+++ b/res/template/home.html
@@ -64,14 +64,14 @@
 				be placed in your web browser. More information on the
 				<a href="/about">about</a> page
 			<p>
-			<div id="instruction_2" class="instruction_highlight" style="display: none">
+			<div id="instruction_2" class="instruction_highlight">
 				<div class="limit_width">
 					<span class="big_number">2</span><span class="instruction_text">Wait for the files to finish uploading</span>
 				</div>
 			</div>
 			<div id="uploads_queue"></div>

-			<div id="instruction_3" class="instruction_highlight" style="display: none">
+			<div id="instruction_3" class="instruction_highlight">
 				<div class="limit_width"><span class="big_number">3</span><span class="instruction_text">Share the files</span></div>
 			</div>
 			<div id="instruction_3_after" style="display: none">
@@ -150,6 +150,7 @@
 		{{template "page_bottom"}}

 		<script>
+			'use strict';
 			let apiEndpoint = '{{.APIEndpoint}}';
 			{{template "util.js"}}
 			{{template "UploadManager.js"}}
--- a/webcontroller/file_viewer.go
+++ b/webcontroller/file_viewer.go
@@ -35,7 +35,6 @@ func (wc *WebController) serveFileViewer(w http.ResponseWriter, r *http.Request,

 	var list = strings.Contains(p.ByName("id"), ",")
 	var ids []string
-
 	if list {
 		ids = strings.Split(p.ByName("id"), ",")
 	} else {