Add body to button links, add performance to diagnostic

This commit is contained in:
LoveEevee 2018-10-14 13:37:27 +03:00
parent 68d69d4a0a
commit a0635812bb
6 changed files with 63 additions and 27 deletions

View File

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

View File

@ -1,5 +1,7 @@
class About{ class About{
constructor(touchEnabled){ constructor(touchEnabled){
this.issueTemplate = "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information."
this.touchEnabled = touchEnabled this.touchEnabled = touchEnabled
loader.changePage("about") loader.changePage("about")
cancelTouch = false cancelTouch = false
@ -14,8 +16,8 @@ class About{
this.linkGithub = document.getElementById("link-github") this.linkGithub = document.getElementById("link-github")
this.linkEmail = document.getElementById("link-email") this.linkEmail = document.getElementById("link-email")
pageEvents.add(this.linkGithub, ["click", "touchend"], this.linkButton) pageEvents.add(this.linkGithub, ["click", "touchend"], this.linkButton.bind(this))
pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton) pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton.bind(this))
pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this)) pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this)) pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
@ -51,6 +53,8 @@ class About{
if(!fullScreenSupported){ if(!fullScreenSupported){
diag.push("Full screen supported: false") 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){ if("getGamepads" in navigator){
var gamepads = navigator.getGamepads() var gamepads = navigator.getGamepads()
for(var i = 0; i < gamepads.length; i++){ for(var i = 0; i < gamepads.length; i++){
@ -78,9 +82,13 @@ class About{
} }
} }
diag.push("```") diag.push("```")
var diag = diag.join("\n")
var body = this.diagTxt.contentWindow.document.body if(navigator.userAgent.indexOf("Android") >= 0){
body.innerText = diag.join("\n") var iframe = document.createElement("iframe")
this.diagTxt.appendChild(iframe)
var body = iframe.contentWindow.document.body
body.innerText = diag
body.setAttribute("style", ` body.setAttribute("style", `
font-family: monospace; font-family: monospace;
@ -92,18 +100,30 @@ class About{
body.setAttribute("onblur", ` body.setAttribute("onblur", `
getSelection().removeAllRanges() getSelection().removeAllRanges()
`) `)
}else{
this.textarea = document.createElement("textarea")
this.textarea.readOnly = true
this.textarea.value = diag
this.diagTxt.appendChild(this.textarea)
if(!this.touchEnabled){ if(!this.touchEnabled){
body.setAttribute("onfocus", ` pageEvents.add(this.textarea, "focus", () => {
var selection = getSelection() this.textarea.select()
selection.removeAllRanges() })
var range = document.createRange() pageEvents.add(this.textarea, "blur", () => {
range.selectNodeContents(document.body) getSelection().removeAllRanges()
selection.addRange(range) })
`)
} }
} }
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){ linkButton(event){
event.currentTarget.getElementsByTagName("a")[0].click() this.getLink(event.currentTarget).click()
} }
clean(){ clean(){
cancelTouch = true cancelTouch = true
@ -111,6 +131,9 @@ class About{
pageEvents.remove(this.linkGithub, ["click", "touchend"]) pageEvents.remove(this.linkGithub, ["click", "touchend"])
pageEvents.remove(this.linkEmail, ["click", "touchend"]) pageEvents.remove(this.linkEmail, ["click", "touchend"])
pageEvents.remove(this.endButton, ["mousedown", "touchstart"]) pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
if(this.textarea){
pageEvents.remove(this.textarea, ["focus", "blur"])
}
pageEvents.keyRemove(this, 13) pageEvents.keyRemove(this, 13)
delete this.endButton delete this.endButton
delete this.diagTxt delete this.diagTxt
@ -118,5 +141,6 @@ class About{
delete this.tutorialOuter delete this.tutorialOuter
delete this.linkGithub delete this.linkGithub
delete this.linkEmail delete this.linkEmail
delete this.textarea
} }
} }

View File

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

View File

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

View File

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

View File

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