UI for "Image too large" errors

client/css/style.css

@@ -1328,6 +1328,10 @@ kbd {
 	overflow: hidden;
 }
 
+#chat .toggle-type-error {
+	background: transparent;
+}
+
 #chat .toggle-content img {
 	max-width: 100%;
 	max-height: 128px;

client/js/libs/handlebars/friendlysize.js

@@ -0,0 +1,10 @@
+"use strict";
+
+const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+module.exports = function(size) {
+	// Loosely inspired from https://stackoverflow.com/a/18650828/1935861
+	const i = size > 0 ? Math.floor(Math.log(size) / Math.log(1024)) : 0;
+	const fixedSize = parseFloat((size / Math.pow(1024, i)).toFixed(1));
+	return `${fixedSize} ${sizes[i]}`;
+};

client/views/msg_preview.tpl

@@ -29,10 +29,14 @@
 		</a>
 	{{/equal}}
 	{{#equal type "error"}}
-		<a class="toggle-text" href="{{link}}" target="_blank" rel="noopener">
-			<div class="head" title="{{head}}">{{head}}</div>
-			<div class="body" title="{{body}}">{{body}}</div>
-		</a>
+		{{#equal error "image-too-big"}}
+			<em>
+				This image is larger than {{friendlysize maxSize}} and cannot be
+				previewed.
+				<a href="{{link}}" target="_blank" rel="noopener">Click here</a>
+				to open it in a new window.
+			</em>
+		{{/equal}}
 	{{/equal}}
 </div>
 {{/preview}}

src/plugins/irc-events/link.js

@@ -100,8 +100,8 @@ function parse(msg, preview, res, client) {
 	case "image/webp":
 		if (res.size > (Helper.config.prefetchMaxImageSize * 1024)) {
 			preview.type = "error";
-			preview.head = "Large image";
-			preview.body = "Image is greater than your max image size. Click to view.";
+			preview.error = "image-too-big";
+			preview.maxSize = Helper.config.prefetchMaxImageSize * 1024;
 		} else {
 			preview.type = "image";
 			preview.thumb = preview.link;

test/client/js/libs/handlebars/friendlysizeTest.js

@@ -0,0 +1,18 @@
+"use strict";
+
+const expect = require("chai").expect;
+const friendlysize = require("../../../../../client/js/libs/handlebars/friendlysize");
+
+describe("friendlysize Handlebars helper", function() {
+	it("should render big values in human-readable version", function() {
+		expect(friendlysize(51200)).to.equal("50 KB");
+	});
+
+	it("should round with 1 digit", function() {
+		expect(friendlysize(1234567)).to.equal("1.2 MB");
+	});
+
+	it("should render special case 0 as 0 Bytes", function() {
+		expect(friendlysize(0)).to.equal("0 Bytes");
+	});
+});