From a0635812bb3cb1497407d72ea6fb33287db075db Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 14 Oct 2018 13:37:27 +0300 Subject: [PATCH] Add body to button links, add performance to diagnostic --- public/src/css/main.css | 3 +- public/src/js/about.js | 70 +++++++++++++++++++++++++------------ public/src/js/canvastest.js | 3 +- public/src/js/loader.js | 7 +++- public/src/js/main.js | 5 +++ public/src/views/about.html | 2 +- 6 files changed, 63 insertions(+), 27 deletions(-) diff --git a/public/src/css/main.css b/public/src/css/main.css index b814f6a..225619d 100644 --- a/public/src/css/main.css +++ b/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; diff --git a/public/src/js/about.js b/public/src/js/about.js index 29eeb1b..c6cb501 100644 --- a/public/src/js/about.js +++ b/public/src/js/about.js @@ -1,5 +1,7 @@ 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 } } diff --git a/public/src/js/canvastest.js b/public/src/js/canvastest.js index b952981..dea0bf6 100644 --- a/public/src/js/canvastest.js +++ b/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) }) }) } diff --git a/public/src/js/loader.js b/public/src/js/loader.js index 9d1f188..59954b6 100644 --- a/public/src/js/loader.js +++ b/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() diff --git a/public/src/js/main.js b/public/src/js/main.js index a22b310..9e29573 100644 --- a/public/src/js/main.js +++ b/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){ diff --git a/public/src/views/about.html b/public/src/views/about.html index f2581b2..5777ea2 100644 --- a/public/src/views/about.html +++ b/public/src/views/about.html @@ -13,7 +13,7 @@ Be sure to include the following diagnostic data! - +