Perf improvements

src/webpage/file.ts

@@ -27,7 +27,7 @@ class File {
 		this.content_type = fileJSON.content_type;
 		this.size = fileJSON.size;
 	}
-	getHTML(temp: boolean = false, fullScreen = false, OSpoiler = false): HTMLElement {
+	getHTML(temp: boolean = false, fullScreen = false, OSpoiler = false, max = 96 * 3): HTMLElement {
 		function makeSpoilerHTML(): HTMLElement {
 			const spoil = document.createElement("div");
 			spoil.classList.add("fSpoil");
@@ -44,11 +44,12 @@ class File {
 
 		if (this.width && this.height) {
 			let scale = 1;
-			const max = 96 * 3;
 			scale = Math.max(scale, this.width / max);
 			scale = Math.max(scale, this.height / max);
 			this.width /= scale;
 			this.height /= scale;
+			this.width ^= 0;
+			this.height ^= 0;
 		}
 		if (this.height === null) {
 			this.height = 96 * 3;
@@ -57,6 +58,10 @@ class File {
 		if (this.content_type.startsWith("image/")) {
 			const div = document.createElement("div");
 			const img = createImg(src, undefined, div);
+			if (this.width && this.height) {
+				img.width = this.width;
+				img.height = this.height;
+			}
 			if (!fullScreen) {
 				img.classList.add("messageimg");
 				div.classList.add("messageimgdiv");
@@ -85,11 +90,11 @@ class File {
 				});
 			div.append(img);
 			if (this.width && !fullScreen) {
-				div.style.width = this.width + "px";
-				div.style.height = this.height + "px";
+				img.style.width = div.style.width = this.width + "px";
+				img.style.height = div.style.height = this.height + "px";
 			} else if (!fullScreen) {
-				div.style.maxWidth = 96 * 3 + "px";
-				div.style.maxHeight = 96 * 3 + "px";
+				img.style.maxWidth = div.style.maxWidth = 96 * 3 + "px";
+				img.style.maxHeight = div.style.maxHeight = 96 * 3 + "px";
 			}
 			img.isAnimated().then((animated) => {
 				if (!animated || !this.owner || fullScreen) return;

src/webpage/infiniteScroller.ts

@@ -39,6 +39,7 @@ function fragAppend(div: HTMLElement, pre = false) {
 		new Promise<void>((res) => {
 			count++;
 			frag[pre ? "prepend" : "append"](elm);
+			elm.classList.add("noFlex");
 			if (!qued) {
 				let lcount = count;
 				function wait(t = 0) {

src/webpage/interactions/compontents.ts

@@ -115,21 +115,23 @@ class MediaGallery extends compObj {
 		const div = document.createElement("div");
 		div.classList.add("flexttb", "mediaDisp");
 		const items = this.items.map((elm) => {
-			return elm.media.getHTML();
+			const img = elm.media.getHTML(undefined, undefined, undefined, 150);
+			img.classList.add("mediaDispImg");
+			return img;
 		});
 		const row = document.createElement("div");
-		row.classList.add("flexltr");
+		row.classList.add("flexltr", "imgRow");
 		row.append(...items.slice(0, 2));
 		div.append(row);
 		if (items.length > 2) {
 			const row = document.createElement("div");
-			row.classList.add("flexltr");
+			row.classList.add("flexltr", "imgRow");
 			row.append(...items.slice(2, 5));
 			div.append(row);
 		}
 		if (items.length > 5) {
 			const row = document.createElement("div");
-			row.classList.add("flexltr");
+			row.classList.add("flexltr", "imgRow");
 			row.append(...items.slice(5, 10));
 			div.append(row);
 		}

src/webpage/reporting/report.ts

@@ -236,7 +236,7 @@ class ReportNode {
 		}
 		this.owner.node = this;
 		const div = document.createElement("div");
-		div.classList.add("flexttb");
+		div.classList.add("flexttb", "reportElm");
 		this.div = div;
 		const title = document.createElement("h2");
 		title.textContent = this.header;

src/webpage/style.css

@@ -343,20 +343,16 @@ body {
 		align-items: center;
 	}
 }
-.mediaDisp {
-	> * {
-		height: 150px;
-		margin-bottom: 4px;
-		> * {
-			height: 150px !important;
-			margin-right: 4px;
-			border-radius: 6px;
-			img {
-				height: 150px;
-				object-fit: cover;
-			}
-		}
-	}
+.imgRow {
+	height: 150px !important;
+	margin-right: 4px;
+	border-radius: 6px;
+	max-height: 150px;
+	min-height: 150px;
+}
+.mediaDispImg {
+	height: 150px !important;
+	object-fit: cover;
 }
 .messageComps {
 	> .flexltr {
@@ -2442,9 +2438,9 @@ span.instanceStatus {
 	flex-direction: column;
 	flex-shrink: 1;
 	max-height: fit-content;
-	> * {
-		flex: 0;
-	}
+}
+.noFlex {
+	flex: 0;
 }
 #pasteimage {
 	height: 30%;
@@ -4080,12 +4076,12 @@ fieldset input[type="radio"] {
 	height: 70%;
 	overflow-y: auto;
 	> div {
-		> * {
-			margin-bottom: 4px;
-		}
 		min-height: 100%;
 	}
 }
+.reportElm {
+	margin-bottom: 4px;
+}
 .removeElm {
 	> .reportMenu {
 		animation-duration: 0.2s;