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{
margin-right: 0.4em;
}
#diag-txt{
#diag-txt textarea,
#diag-txt iframe{
width: 100%;
height: 5em;
font-size: inherit;

View File

@ -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
}
}

View File

@ -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)
})
})
}

View File

@ -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()

View File

@ -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){

View File

@ -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>