Streamlined getComputedStyle(document.body)

getComputedStyle(document.body) can now be accessed from this.style within a Page() instance.

Added basic content insertion to ChangeAvatar.mjs.

Page() body font-size for extension popup.

client/extension/_locales/en/messages.json

@@ -8,7 +8,7 @@
 		"description": "List of different options to set a users's avatar"
 	},
 	"avatar_set_url_support": {
-		"message": "All image formats supported by Chrome except SVG can be added",
+		"message": "Image should be at least 100x100px for best clarity across Stadia. URL must link directly to an image resource of type WebP, AVIF, PNG, APNG, GIF or JPG/JPEG.",
 		"description": "Disclaimer about supported image formats"
 	},
 	"page_return": {

client/extension/assets/css/popup.css

@@ -160,4 +160,5 @@ ol li img {
 	top: var(--height);
 	box-sizing: border-box;
     padding: 20px;
+	font-size: 16px;
 }

client/extension/assets/js/popup_modules/ChangeAvatar.mjs

@@ -9,4 +9,12 @@ export class AvatarURL extends Page {
 		this.open();
 	}
 
+	content() {
+		const input = document.createElement("input");
+		const submit = document.createElement("button");
+
+		this.body.appendChild(input);
+		this.body.appendChild(submit);
+	}
+
 }

client/extension/assets/js/popup_modules/Page.mjs

@@ -2,9 +2,10 @@ export class Page {
 
 	constructor(title = "") {
 		this.body = null;
+		this.style = getComputedStyle(document.body);
 
 		this.pageDepth = () => {
-			return parseInt(getComputedStyle(document.body).getPropertyValue("--page-depth"));
+			return parseInt(this.style.getPropertyValue("--page-depth"));
 		}
 
 		this.create(title);
@@ -55,7 +56,7 @@ export class Page {
 	// ----
 
 	close() {
-		const delay = parseInt(getComputedStyle(document.body).getPropertyValue("--animation-speed"));
+		const delay = parseInt(this.style.getPropertyValue("--animation-speed"));
 		document.body.style.setProperty("--page-depth",this.pageDepth() - 1);
 
 		setTimeout(() => {