Add body to button links, add performance to diagnostic

public/src/css/main.css

@@ -209,7 +209,8 @@ kbd{
 #about-link-btns .taibtn{
 	margin-right: 0.4em;
 }
-#diag-txt{
+#diag-txt textarea,
+#diag-txt iframe{
 	width: 100%;
 	height: 5em;
 	font-size: inherit;

public/src/js/about.js

 class About{
 	constructor(touchEnabled){
+		this.issueTemplate = "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information."
+		
 		this.touchEnabled = touchEnabled
 		loader.changePage("about")
 		cancelTouch = false
@@ -14,8 +16,8 @@ class About{
 		this.linkGithub = document.getElementById("link-github")
 		this.linkEmail = document.getElementById("link-email")
 		
-		pageEvents.add(this.linkGithub, ["click", "touchend"], this.linkButton)
-		pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton)
+		pageEvents.add(this.linkGithub, ["click", "touchend"], this.linkButton.bind(this))
+		pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton.bind(this))
 		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
 		pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
 		
@@ -51,6 +53,8 @@ class About{
 		if(!fullScreenSupported){
 			diag.push("Full screen supported: false")
 		}
+		diag.push("Blur performance: " + perf.blur + "ms, all images: " + perf.allImg + "ms")
+		diag.push("Page load: " + (perf.load / 1000).toFixed(1) + "s")
 		if("getGamepads" in navigator){
 			var gamepads = navigator.getGamepads()
 			for(var i = 0; i < gamepads.length; i++){
@@ -78,32 +82,48 @@ class About{
 			}
 		}
 		diag.push("```")
+		var diag = diag.join("\n")
 		
-		var body = this.diagTxt.contentWindow.document.body
-		body.innerText = diag.join("\n")
-		
-		body.setAttribute("style", `
-			font-family: monospace;
-			margin: 2px 0 0 2px;
-			white-space: pre-wrap;
-			word-break: break-all;
-			cursor: text;
-		`)
-		body.setAttribute("onblur", `
-			getSelection().removeAllRanges()
-		`)
-		if(!this.touchEnabled){
-			body.setAttribute("onfocus", `
-				var selection = getSelection()
-				selection.removeAllRanges()
-				var range = document.createRange()
-				range.selectNodeContents(document.body)
-				selection.addRange(range)
+		if(navigator.userAgent.indexOf("Android") >= 0){
+			var iframe = document.createElement("iframe")
+			this.diagTxt.appendChild(iframe)
+			var body = iframe.contentWindow.document.body
+			body.innerText = diag
+			
+			body.setAttribute("style", `
+				font-family: monospace;
+				margin: 2px 0 0 2px;
+				white-space: pre-wrap;
+				word-break: break-all;
+				cursor: text;
 			`)
+			body.setAttribute("onblur", `
+				getSelection().removeAllRanges()
+			`)
+		}else{
+			this.textarea = document.createElement("textarea")
+			this.textarea.readOnly = true
+			this.textarea.value = diag
+			this.diagTxt.appendChild(this.textarea)
+			if(!this.touchEnabled){
+				pageEvents.add(this.textarea, "focus", () => {
+					this.textarea.select()
+				})
+				pageEvents.add(this.textarea, "blur", () => {
+					getSelection().removeAllRanges()
+				})
+			}
 		}
+		
+		var issueBody = this.issueTemplate + "\n\n\n\n" + diag
+		this.getLink(this.linkGithub).href += "?body=" + encodeURIComponent(issueBody)
+		this.getLink(this.linkEmail).href += "?body=" + encodeURIComponent(issueBody.replace(/\n/g, "\r\n"))
+	}
+	getLink(target){
+		return target.getElementsByTagName("a")[0]
 	}
 	linkButton(event){
-		event.currentTarget.getElementsByTagName("a")[0].click()
+		this.getLink(event.currentTarget).click()
 	}
 	clean(){
 		cancelTouch = true
@@ -111,6 +131,9 @@ class About{
 		pageEvents.remove(this.linkGithub, ["click", "touchend"])
 		pageEvents.remove(this.linkEmail, ["click", "touchend"])
 		pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
+		if(this.textarea){
+			pageEvents.remove(this.textarea, ["focus", "blur"])
+		}
 		pageEvents.keyRemove(this, 13)
 		delete this.endButton
 		delete this.diagTxt
@@ -118,5 +141,6 @@ class About{
 		delete this.tutorialOuter
 		delete this.linkGithub
 		delete this.linkEmail
+		delete this.textarea
 	}
 }

public/src/js/canvastest.js

@@ -91,6 +91,7 @@ class CanvasTest{
 	drawAllImages(){
 		return new Promise(resolve => {
 			requestAnimationFrame(() => {
+				var startTime = +new Date
 				var ctx = this.ctx
 				ctx.save()
 				ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
@@ -131,7 +132,7 @@ class CanvasTest{
 				}
 				
 				ctx.restore()
-				resolve()
+				resolve((+new Date) - startTime)
 			})
 		})
 	}

public/src/js/loader.js

@@ -5,6 +5,8 @@ class Loader{
 		this.assetsDiv = document.getElementById("assets")
 		this.canvasTest = new CanvasTest()
 		p2 = new P2Connection()
+		this.startTime = +new Date
+		
 		this.ajax("src/views/loader.html").then(this.run.bind(this))
 	}
 	run(page){
@@ -85,6 +87,7 @@ class Loader{
 			})
 			
 			this.promises.push(this.canvasTest.blurPerformance().then(result => {
+				perf.blur = result
 				if(result > 1000 / 50){
 					// Less than 50 fps with blur enabled
 					disableBlur = true
@@ -96,7 +99,9 @@ class Loader{
 			})
 			
 			Promise.all(this.promises).then(() => {
-				this.canvasTest.drawAllImages().then(() => {
+				this.canvasTest.drawAllImages().then(result => {
+					perf.allImg = result
+					perf.load = (+new Date) - this.startTime
 					this.canvasTest.clean()
 					this.clean()
 					this.callback()

public/src/js/main.js

@@ -49,6 +49,11 @@ var p2
 var disableBlur = false
 var cancelTouch = true
 var lastHeight
+var perf = {
+	blur: 0,
+	allImg: 0,
+	load: 0
+}
 
 pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
 	if(event.cancelable && cancelTouch){

public/src/views/about.html

@@ -13,7 +13,7 @@
 			<span class="text-warn">Be sure to include the following diagnostic data!</span>
 			
 		</div>
-		<iframe id="diag-txt"></iframe>
+		<div id="diag-txt"></div>
 		<div id="about-link-btns">
 			<div id="link-github" class="taibtn stroke-sub link-btn" alt="GitHub">
 				<a href="https://github.com/bui/taiko-web/issues/new" target="_blank">GitHub</a>