Fossil SCM
If the graph height is greater than 32767, omit the <canvas> object. Also, do not appendChild() the graphics <div> objects until after they have been set to "abolute" positioning, to work around a FF performance issue.
Commit
504dc92ceb3976871b97e9d1a9a22ac0e7691238
Parent
81751fa51b002fd…
1 file changed
+10
-6
+10
-6
| --- src/timeline.c | ||
| +++ src/timeline.c | ||
| @@ -407,18 +407,18 @@ | ||
| 407 | 407 | @ var n = document.createElement("div"); |
| 408 | 408 | @ if( x0>x1 ){ var t=x0; x0=x1; x1=t; } |
| 409 | 409 | @ if( y0>y1 ){ var t=y0; y0=y1; y1=t; } |
| 410 | 410 | @ var w = x1-x0+1; |
| 411 | 411 | @ var h = y1-y0+1; |
| 412 | - @ canvasDiv.appendChild(n); | |
| 413 | 412 | @ n.style.position = "absolute"; |
| 414 | 413 | @ n.style.overflow = "hidden"; |
| 415 | 414 | @ n.style.left = x0+"px"; |
| 416 | 415 | @ n.style.top = y0+"px"; |
| 417 | 416 | @ n.style.width = w+"px"; |
| 418 | 417 | @ n.style.height = h+"px"; |
| 419 | 418 | @ n.style.backgroundColor = color; |
| 419 | + @ canvasDiv.appendChild(n); | |
| 420 | 420 | @ } |
| 421 | 421 | @ function absoluteY(id){ |
| 422 | 422 | @ var obj = document.getElementById(id); |
| 423 | 423 | @ if( !obj ) return; |
| 424 | 424 | @ var top = 0; |
| @@ -512,16 +512,20 @@ | ||
| 512 | 512 | @ for(var i in rowinfo){ |
| 513 | 513 | @ rowinfo[i].y = absoluteY(rowinfo[i].id) + 10 - canvasY; |
| 514 | 514 | @ rowinfo[i].x = left + rowinfo[i].r*20; |
| 515 | 515 | @ } |
| 516 | 516 | @ var btm = rowinfo[rowinfo.length-1].y + 20; |
| 517 | - @ canvasDiv.innerHTML = '<canvas id="timeline-canvas" '+ | |
| 518 | - @ 'style="position:absolute;left:'+(left-5)+'px;"' + | |
| 519 | - @ ' width="'+width+'" height="'+btm+'"></canvas>'; | |
| 520 | - @ realCanvas = document.getElementById('timeline-canvas'); | |
| 517 | + @ if( btm<32768 ){ | |
| 518 | + @ canvasDiv.innerHTML = '<canvas id="timeline-canvas" '+ | |
| 519 | + @ 'style="position:absolute;left:'+(left-5)+'px;"' + | |
| 520 | + @ ' width="'+width+'" height="'+btm+'"></canvas>'; | |
| 521 | + @ realCanvas = document.getElementById('timeline-canvas'); | |
| 522 | + @ }else{ | |
| 523 | + @ realCanvas = 0; | |
| 524 | + @ } | |
| 521 | 525 | @ var context; |
| 522 | - @ if( realCanvas && realCanvas.getContext && btm<32768 | |
| 526 | + @ if( realCanvas && realCanvas.getContext | |
| 523 | 527 | @ && (context = realCanvas.getContext('2d'))) { |
| 524 | 528 | @ drawBox = function(color,x0,y0,x1,y1) { |
| 525 | 529 | @ if( y0>32767 || y1>32767 ) return; |
| 526 | 530 | @ var colors = { |
| 527 | 531 | @ 'white':'rgba(255,255,255,1)', |
| 528 | 532 |
| --- src/timeline.c | |
| +++ src/timeline.c | |
| @@ -407,18 +407,18 @@ | |
| 407 | @ var n = document.createElement("div"); |
| 408 | @ if( x0>x1 ){ var t=x0; x0=x1; x1=t; } |
| 409 | @ if( y0>y1 ){ var t=y0; y0=y1; y1=t; } |
| 410 | @ var w = x1-x0+1; |
| 411 | @ var h = y1-y0+1; |
| 412 | @ canvasDiv.appendChild(n); |
| 413 | @ n.style.position = "absolute"; |
| 414 | @ n.style.overflow = "hidden"; |
| 415 | @ n.style.left = x0+"px"; |
| 416 | @ n.style.top = y0+"px"; |
| 417 | @ n.style.width = w+"px"; |
| 418 | @ n.style.height = h+"px"; |
| 419 | @ n.style.backgroundColor = color; |
| 420 | @ } |
| 421 | @ function absoluteY(id){ |
| 422 | @ var obj = document.getElementById(id); |
| 423 | @ if( !obj ) return; |
| 424 | @ var top = 0; |
| @@ -512,16 +512,20 @@ | |
| 512 | @ for(var i in rowinfo){ |
| 513 | @ rowinfo[i].y = absoluteY(rowinfo[i].id) + 10 - canvasY; |
| 514 | @ rowinfo[i].x = left + rowinfo[i].r*20; |
| 515 | @ } |
| 516 | @ var btm = rowinfo[rowinfo.length-1].y + 20; |
| 517 | @ canvasDiv.innerHTML = '<canvas id="timeline-canvas" '+ |
| 518 | @ 'style="position:absolute;left:'+(left-5)+'px;"' + |
| 519 | @ ' width="'+width+'" height="'+btm+'"></canvas>'; |
| 520 | @ realCanvas = document.getElementById('timeline-canvas'); |
| 521 | @ var context; |
| 522 | @ if( realCanvas && realCanvas.getContext && btm<32768 |
| 523 | @ && (context = realCanvas.getContext('2d'))) { |
| 524 | @ drawBox = function(color,x0,y0,x1,y1) { |
| 525 | @ if( y0>32767 || y1>32767 ) return; |
| 526 | @ var colors = { |
| 527 | @ 'white':'rgba(255,255,255,1)', |
| 528 |
| --- src/timeline.c | |
| +++ src/timeline.c | |
| @@ -407,18 +407,18 @@ | |
| 407 | @ var n = document.createElement("div"); |
| 408 | @ if( x0>x1 ){ var t=x0; x0=x1; x1=t; } |
| 409 | @ if( y0>y1 ){ var t=y0; y0=y1; y1=t; } |
| 410 | @ var w = x1-x0+1; |
| 411 | @ var h = y1-y0+1; |
| 412 | @ n.style.position = "absolute"; |
| 413 | @ n.style.overflow = "hidden"; |
| 414 | @ n.style.left = x0+"px"; |
| 415 | @ n.style.top = y0+"px"; |
| 416 | @ n.style.width = w+"px"; |
| 417 | @ n.style.height = h+"px"; |
| 418 | @ n.style.backgroundColor = color; |
| 419 | @ canvasDiv.appendChild(n); |
| 420 | @ } |
| 421 | @ function absoluteY(id){ |
| 422 | @ var obj = document.getElementById(id); |
| 423 | @ if( !obj ) return; |
| 424 | @ var top = 0; |
| @@ -512,16 +512,20 @@ | |
| 512 | @ for(var i in rowinfo){ |
| 513 | @ rowinfo[i].y = absoluteY(rowinfo[i].id) + 10 - canvasY; |
| 514 | @ rowinfo[i].x = left + rowinfo[i].r*20; |
| 515 | @ } |
| 516 | @ var btm = rowinfo[rowinfo.length-1].y + 20; |
| 517 | @ if( btm<32768 ){ |
| 518 | @ canvasDiv.innerHTML = '<canvas id="timeline-canvas" '+ |
| 519 | @ 'style="position:absolute;left:'+(left-5)+'px;"' + |
| 520 | @ ' width="'+width+'" height="'+btm+'"></canvas>'; |
| 521 | @ realCanvas = document.getElementById('timeline-canvas'); |
| 522 | @ }else{ |
| 523 | @ realCanvas = 0; |
| 524 | @ } |
| 525 | @ var context; |
| 526 | @ if( realCanvas && realCanvas.getContext |
| 527 | @ && (context = realCanvas.getContext('2d'))) { |
| 528 | @ drawBox = function(color,x0,y0,x1,y1) { |
| 529 | @ if( y0>32767 || y1>32767 ) return; |
| 530 | @ var colors = { |
| 531 | @ 'white':'rgba(255,255,255,1)', |
| 532 |