Fossil SCM

Several CSS tweaks to get the skins playing nicely. We still have some weird, as-yet unexplained quirks with Darkmode, Bootstrap, and Xekri (forced tables sizes are not being applied, or are inconsistent, despite styles being set).

stephan 2021-09-11 05:10 diff-js-refactoring
Commit 860f8f252c3132aef887fa5938216dd41acc48a1a908582106f326fd7f7c1aaa
Parent 5938083e4878dd7…
7 files changed +24 +14 -1 +10 -1 +7 -1 +11 -13 +32 -13
~ skins/bootstrap/css.txt ~ skins/darkmode/css.txt ~ skins/eagle/css.txt ~ skins/khaki/css.txt ~ skins/xekri/css.txt ~ src/default.css ~ src/fossil.diff.js
M skins/bootstrap/css.txt
+24
--- skins/bootstrap/css.txt
+++ skins/bootstrap/css.txt
@@ -4400,5 +4400,29 @@
44004400
 }
44014401
44024402
 body.branch .submenu > a.timeline-link {
44034403
 color: black;
44044404
 }
4405
+
4406
+tr.diffskip > td.chunkctrl .jcbutton {
4407
+ min-width: 3.5ex;
4408
+ max-width: revert;
4409
+}
4410
+
4411
+/* Bootstrap installs a 'table' class on tables which causes its
4412
+ styles to be more specific matches than our diff tables, so we have
4413
+ to fight that fire with more fire... */
4414
+table.diff.table>thead>tr>th, table.diff.table>tbody>tr>th,
4415
+table.diff.table>tfoot>tr>th, table.diff.table>thead>tr>td,
4416
+table.diff.table>tbody>tr>td, table.diff.table>tfoot>tr>td {
4417
+ padding: 0;
4418
+ line-height: revert;
4419
+ vertical-align: top;
4420
+ border-top: none;
4421
+}
4422
+table.diff tr.diffskip.jchunk > td {
4423
+ padding: 0.25em 0.5em;
4424
+}
4425
+table.diff pre {
4426
+ border: none;
4427
+ word-wrap: initial;
4428
+}
44054429
--- skins/bootstrap/css.txt
+++ skins/bootstrap/css.txt
@@ -4400,5 +4400,29 @@
4400 }
4401
4402 body.branch .submenu > a.timeline-link {
4403 color: black;
4404 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4405
--- skins/bootstrap/css.txt
+++ skins/bootstrap/css.txt
@@ -4400,5 +4400,29 @@
4400 }
4401
4402 body.branch .submenu > a.timeline-link {
4403 color: black;
4404 }
4405
4406 tr.diffskip > td.chunkctrl .jcbutton {
4407 min-width: 3.5ex;
4408 max-width: revert;
4409 }
4410
4411 /* Bootstrap installs a 'table' class on tables which causes its
4412 styles to be more specific matches than our diff tables, so we have
4413 to fight that fire with more fire... */
4414 table.diff.table>thead>tr>th, table.diff.table>tbody>tr>th,
4415 table.diff.table>tfoot>tr>th, table.diff.table>thead>tr>td,
4416 table.diff.table>tbody>tr>td, table.diff.table>tfoot>tr>td {
4417 padding: 0;
4418 line-height: revert;
4419 vertical-align: top;
4420 border-top: none;
4421 }
4422 table.diff tr.diffskip.jchunk > td {
4423 padding: 0.25em 0.5em;
4424 }
4425 table.diff pre {
4426 border: none;
4427 word-wrap: initial;
4428 }
4429
M skins/darkmode/css.txt
+14 -1
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -479,11 +479,24 @@
479479
 td.difftxt ins > ins {
480480
 background-color: #559855;
481481
 color: #000;
482482
 text-decoration: none;
483483
 }
484
-
484
+body.fossil-dark-style tr.diffskip.jchunk {
485
+ filter: revert;
486
+ background-color: black;
487
+}
488
+tr.diffskip > td.chunkctrl .jcbutton {
489
+ background-color: #303536;
490
+}
491
+table.diff {
492
+ /* For reasons beyond my ken, in THIS SKIN ONLY, table.diff
493
+ is wider than the body even when it is explicitly set
494
+ to a size less than the body UNLESS we reduce the font-size
495
+ to about 85%. */
496
+ /*font-size: 0.85em;*/
497
+}
485498
486499
 /************************************************************************
487500
 ************************************************************************/
488501
 body.wikiedit #fossil-status-bar,
489502
 body.fileedit #fossil-status-bar{
490503
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -479,11 +479,24 @@
479 td.difftxt ins > ins {
480 background-color: #559855;
481 color: #000;
482 text-decoration: none;
483 }
484
 
 
 
 
 
 
 
 
 
 
 
 
 
485
486 /************************************************************************
487 ************************************************************************/
488 body.wikiedit #fossil-status-bar,
489 body.fileedit #fossil-status-bar{
490
--- skins/darkmode/css.txt
+++ skins/darkmode/css.txt
@@ -479,11 +479,24 @@
479 td.difftxt ins > ins {
480 background-color: #559855;
481 color: #000;
482 text-decoration: none;
483 }
484 body.fossil-dark-style tr.diffskip.jchunk {
485 filter: revert;
486 background-color: black;
487 }
488 tr.diffskip > td.chunkctrl .jcbutton {
489 background-color: #303536;
490 }
491 table.diff {
492 /* For reasons beyond my ken, in THIS SKIN ONLY, table.diff
493 is wider than the body even when it is explicitly set
494 to a size less than the body UNLESS we reduce the font-size
495 to about 85%. */
496 /*font-size: 0.85em;*/
497 }
498
499 /************************************************************************
500 ************************************************************************/
501 body.wikiedit #fossil-status-bar,
502 body.fileedit #fossil-status-bar{
503
M skins/eagle/css.txt
+10 -1
--- skins/eagle/css.txt
+++ skins/eagle/css.txt
@@ -263,11 +263,10 @@
263263
 background-color: #485D7B;
264264
 font-family: fixed, Dejavu Sans Mono, Monaco, Lucida Console, monospace;
265265
 font-size: 8pt;
266266
 border-collapse:collapse;
267267
 white-space: pre;
268
- width: 98%;
269268
 border: 1px #000 dashed;
270269
 margin-left: auto;
271270
 margin-right: auto;
272271
 }
273272
@@ -347,10 +346,20 @@
347346
 background-color: rgb(230, 110, 110);
348347
 }
349348
 td.difftxt del {
350349
 background-color: inherit;
351350
 }
351
+
352
+tr.diffskip > td.chunkctrl .button {
353
+ background-color: #485D7B;
354
+}
355
+tr.diffskip.jchunk {
356
+ background-color: #7EA2D9;
357
+}
358
+body.fossil-dark-style tr.diffskip.jchunk {
359
+ filter: revert;
360
+}
352361
353362
 .fileage tr:hover {
354363
 background-color: #7EA2D9;
355364
 }
356365
357366
--- skins/eagle/css.txt
+++ skins/eagle/css.txt
@@ -263,11 +263,10 @@
263 background-color: #485D7B;
264 font-family: fixed, Dejavu Sans Mono, Monaco, Lucida Console, monospace;
265 font-size: 8pt;
266 border-collapse:collapse;
267 white-space: pre;
268 width: 98%;
269 border: 1px #000 dashed;
270 margin-left: auto;
271 margin-right: auto;
272 }
273
@@ -347,10 +346,20 @@
347 background-color: rgb(230, 110, 110);
348 }
349 td.difftxt del {
350 background-color: inherit;
351 }
 
 
 
 
 
 
 
 
 
 
352
353 .fileage tr:hover {
354 background-color: #7EA2D9;
355 }
356
357
--- skins/eagle/css.txt
+++ skins/eagle/css.txt
@@ -263,11 +263,10 @@
263 background-color: #485D7B;
264 font-family: fixed, Dejavu Sans Mono, Monaco, Lucida Console, monospace;
265 font-size: 8pt;
266 border-collapse:collapse;
267 white-space: pre;
 
268 border: 1px #000 dashed;
269 margin-left: auto;
270 margin-right: auto;
271 }
272
@@ -347,10 +346,20 @@
346 background-color: rgb(230, 110, 110);
347 }
348 td.difftxt del {
349 background-color: inherit;
350 }
351
352 tr.diffskip > td.chunkctrl .button {
353 background-color: #485D7B;
354 }
355 tr.diffskip.jchunk {
356 background-color: #7EA2D9;
357 }
358 body.fossil-dark-style tr.diffskip.jchunk {
359 filter: revert;
360 }
361
362 .fileage tr:hover {
363 background-color: #7EA2D9;
364 }
365
366
M skins/khaki/css.txt
+7
--- skins/khaki/css.txt
+++ skins/khaki/css.txt
@@ -170,5 +170,12 @@
170170
 border-width: 1pt;
171171
 border-radius: 0.25em;
172172
 border-style: solid;
173173
 padding: 0 0.5em;
174174
 }
175
+
176
+tr.diffskip > td.chunkctrl .button {
177
+ background-color: #a09048;
178
+}
179
+tr.diffskip.jchunk {
180
+ background-color: #c0af58;
181
+}
175182
--- skins/khaki/css.txt
+++ skins/khaki/css.txt
@@ -170,5 +170,12 @@
170 border-width: 1pt;
171 border-radius: 0.25em;
172 border-style: solid;
173 padding: 0 0.5em;
174 }
 
 
 
 
 
 
 
175
--- skins/khaki/css.txt
+++ skins/khaki/css.txt
@@ -170,5 +170,12 @@
170 border-width: 1pt;
171 border-radius: 0.25em;
172 border-style: solid;
173 padding: 0 0.5em;
174 }
175
176 tr.diffskip > td.chunkctrl .button {
177 background-color: #a09048;
178 }
179 tr.diffskip.jchunk {
180 background-color: #c0af58;
181 }
182
M skins/xekri/css.txt
-1
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -293,11 +293,10 @@
293293
294294
 /* display (column-based) */
295295
 table.splitdiff {
296296
 border-spacing: 0;
297297
 font-size: 0.85rem;
298
- width: 90%;
299298
 }
300299
301300
 table.splitdiff pre {
302301
 border: 0;
303302
 margin: 0 0.5em;
304303
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -293,11 +293,10 @@
293
294 /* display (column-based) */
295 table.splitdiff {
296 border-spacing: 0;
297 font-size: 0.85rem;
298 width: 90%;
299 }
300
301 table.splitdiff pre {
302 border: 0;
303 margin: 0 0.5em;
304
--- skins/xekri/css.txt
+++ skins/xekri/css.txt
@@ -293,11 +293,10 @@
293
294 /* display (column-based) */
295 table.splitdiff {
296 border-spacing: 0;
297 font-size: 0.85rem;
 
298 }
299
300 table.splitdiff pre {
301 border: 0;
302 margin: 0 0.5em;
303
M src/default.css
+11 -13
--- src/default.css
+++ src/default.css
@@ -572,51 +572,49 @@
572572
 /* Exists solely for layout purposes. */
573573
 }
574574
 body.fossil-dark-style tr.diffskip > td.chunkctrl{
575575
 filter: inherit;
576576
 }
577
-tr.diffskip > td.chunkctrl .button {
578
- min-width: 2.5em;
579
- max-width: 2.5em;
577
+tr.diffskip > td.chunkctrl .jcbutton
578
+/* class name .button breaks w/ some skins! */ {
579
+ min-width: 3.5ex;
580
+ max-width: 3.5ex;
580581
 text-align: center;
581582
 display: inline-block;
582583
 padding: 0.1em 1em;
583584
 margin: 0 1em 0 0;
584585
 background-color: rgba(127,127,127,0.2);
585586
 border-style: outset;
586587
 border-width: 0;
587
- /*border-width: 1px;
588
- border-color: rgba(0,0,0,0);*/
589588
 border-radius: 0.5em;
590589
 opacity: 0.7;
591
- /*filter: drop-shadow(0.08em 0.08em 0.08em black);*/
592590
 }
593
-tr.diffskip > td.chunkctrl .button.up:not(.down){
591
+tr.diffskip > td.chunkctrl .jcbutton.up:not(.down){
594592
 /* Simulate an arrow pointing up */
595593
 border-radius: 3em 3em 0.25em 0.25em;
596594
 }
597
-tr.diffskip > td.chunkctrl .button.down:not(.up){
595
+tr.diffskip > td.chunkctrl .jcbutton.down:not(.up){
598596
 /* Simulate an arrow pointing down */
599597
 border-radius: 0.25em 0.25em 3em 3em;
600598
 }
601
-tr.diffskip > td.chunkctrl .button > span {
599
+tr.diffskip > td.chunkctrl .jcbutton > span {
602600
 /* In order to increase the glyph size w/o increasing the em-based
603601
 button size or border-radius, we need an extra layer of DOM
604602
 element for the glyph. */
605603
 font-size: 150%;
606604
 }
607
-tr.diffskip > td.chunkctrl .button.up:not(.down) > span::before {
605
+tr.diffskip > td.chunkctrl .jcbutton.up:not(.down) > span::before {
608606
 content: '⇡';
609607
 }
610
-tr.diffskip > td.chunkctrl .button.down:not(.up) > span::before {
608
+tr.diffskip > td.chunkctrl .jcbutton.down:not(.up) > span::before {
611609
 content: '⇣';
612610
 }
613
-tr.diffskip > td.chunkctrl .button.up.down > span::before {
611
+tr.diffskip > td.chunkctrl .jcbutton.up.down > span::before {
614612
 content: '⇡⇣';
615613
 }
616614
617
-tr.diffskip > td.chunkctrl .button:hover {
615
+tr.diffskip > td.chunkctrl .jcbutton:hover {
618616
 /*border-color: rgba(75,75,75,1);*/
619617
 cursor: pointer;
620618
 opacity: 1;
621619
 filter: contrast(3);
622620
 }
623621
--- src/default.css
+++ src/default.css
@@ -572,51 +572,49 @@
572 /* Exists solely for layout purposes. */
573 }
574 body.fossil-dark-style tr.diffskip > td.chunkctrl{
575 filter: inherit;
576 }
577 tr.diffskip > td.chunkctrl .button {
578 min-width: 2.5em;
579 max-width: 2.5em;
 
580 text-align: center;
581 display: inline-block;
582 padding: 0.1em 1em;
583 margin: 0 1em 0 0;
584 background-color: rgba(127,127,127,0.2);
585 border-style: outset;
586 border-width: 0;
587 /*border-width: 1px;
588 border-color: rgba(0,0,0,0);*/
589 border-radius: 0.5em;
590 opacity: 0.7;
591 /*filter: drop-shadow(0.08em 0.08em 0.08em black);*/
592 }
593 tr.diffskip > td.chunkctrl .button.up:not(.down){
594 /* Simulate an arrow pointing up */
595 border-radius: 3em 3em 0.25em 0.25em;
596 }
597 tr.diffskip > td.chunkctrl .button.down:not(.up){
598 /* Simulate an arrow pointing down */
599 border-radius: 0.25em 0.25em 3em 3em;
600 }
601 tr.diffskip > td.chunkctrl .button > span {
602 /* In order to increase the glyph size w/o increasing the em-based
603 button size or border-radius, we need an extra layer of DOM
604 element for the glyph. */
605 font-size: 150%;
606 }
607 tr.diffskip > td.chunkctrl .button.up:not(.down) > span::before {
608 content: '⇡';
609 }
610 tr.diffskip > td.chunkctrl .button.down:not(.up) > span::before {
611 content: '⇣';
612 }
613 tr.diffskip > td.chunkctrl .button.up.down > span::before {
614 content: '⇡⇣';
615 }
616
617 tr.diffskip > td.chunkctrl .button:hover {
618 /*border-color: rgba(75,75,75,1);*/
619 cursor: pointer;
620 opacity: 1;
621 filter: contrast(3);
622 }
623
--- src/default.css
+++ src/default.css
@@ -572,51 +572,49 @@
572 /* Exists solely for layout purposes. */
573 }
574 body.fossil-dark-style tr.diffskip > td.chunkctrl{
575 filter: inherit;
576 }
577 tr.diffskip > td.chunkctrl .jcbutton
578 /* class name .button breaks w/ some skins! */ {
579 min-width: 3.5ex;
580 max-width: 3.5ex;
581 text-align: center;
582 display: inline-block;
583 padding: 0.1em 1em;
584 margin: 0 1em 0 0;
585 background-color: rgba(127,127,127,0.2);
586 border-style: outset;
587 border-width: 0;
 
 
588 border-radius: 0.5em;
589 opacity: 0.7;
 
590 }
591 tr.diffskip > td.chunkctrl .jcbutton.up:not(.down){
592 /* Simulate an arrow pointing up */
593 border-radius: 3em 3em 0.25em 0.25em;
594 }
595 tr.diffskip > td.chunkctrl .jcbutton.down:not(.up){
596 /* Simulate an arrow pointing down */
597 border-radius: 0.25em 0.25em 3em 3em;
598 }
599 tr.diffskip > td.chunkctrl .jcbutton > span {
600 /* In order to increase the glyph size w/o increasing the em-based
601 button size or border-radius, we need an extra layer of DOM
602 element for the glyph. */
603 font-size: 150%;
604 }
605 tr.diffskip > td.chunkctrl .jcbutton.up:not(.down) > span::before {
606 content: '⇡';
607 }
608 tr.diffskip > td.chunkctrl .jcbutton.down:not(.up) > span::before {
609 content: '⇣';
610 }
611 tr.diffskip > td.chunkctrl .jcbutton.up.down > span::before {
612 content: '⇡⇣';
613 }
614
615 tr.diffskip > td.chunkctrl .jcbutton:hover {
616 /*border-color: rgba(75,75,75,1);*/
617 cursor: pointer;
618 opacity: 1;
619 filter: contrast(3);
620 }
621
M src/fossil.diff.js
+32 -13
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -326,29 +326,30 @@
326326
 createButton: function(fetchType){
327327
 let b;
328328
 switch(fetchType){
329329
 case this.FetchType.PrevDown:
330330
 b = D.append(
331
- D.addClass(D.span(), 'button', 'down'),
331
+ D.addClass(D.span(), 'down'),
332332
 D.span(/*glyph holder*/)
333333
 );
334334
 break;
335335
 case this.FetchType.FillGap:
336336
 b = D.append(
337
- D.addClass(D.span(), 'button', 'up', 'down'),
337
+ D.addClass(D.span(), 'up', 'down'),
338338
 D.span(/*glyph holder*/)
339339
 );
340340
 break;
341341
 case this.FetchType.NextUp:
342342
 b = D.append(
343
- D.addClass(D.span(), 'button', 'up'),
343
+ D.addClass(D.span(), 'up'),
344344
 D.span(/*glyph holder*/)
345345
 );
346346
 break;
347347
 default:
348348
 throw new Error("Internal API misuse: unexpected fetchType value "+fetchType);
349349
 }
350
+ D.addClass(b, 'jcbutton');
350351
 b.addEventListener('click', ()=>this.fetchChunk(fetchType),false);
351352
 return b;
352353
 },
353354
354355
 updatePosDebug: function(){
@@ -391,11 +392,12 @@
391392
 if(!lines.length){
392393
 /* No more data to load */
393394
 this.destroy();
394395
 return this;
395396
 }
396
- console.debug("Loaded line range ",urlParam.from,"-",urlParam.to, "fetchType ",fetchType);
397
+ //console.debug("Loaded line range ",
398
+ //urlParam.from,"-",urlParam.to, "fetchType ",fetchType);
397399
 const lineno = [],
398400
 trPrev = this.e.tr.previousElementSibling,
399401
 trNext = this.e.tr.nextElementSibling,
400402
 doAppend = (
401403
 !!trPrev && fetchType>=this.FetchType.FillGap
@@ -622,11 +624,11 @@
622624
 up.from = this.pos.prev.endLhs + 1;
623625
 fetchType = this.FetchType.FillGap;
624626
 }
625627
 }
626628
 this.$isFetching = true;
627
- console.debug("fetchChunk(",fetchType,")",up);
629
+ //console.debug("fetchChunk(",fetchType,")",up);
628630
 Diff.fetchArtifactChunk(fOpt);
629631
 return this;
630632
 }
631633
 };
632634
@@ -656,17 +658,27 @@
656658
 ** both sides scroll together. Left and right arrows also scroll.
657659
 */
658660
 window.fossil.onPageLoad(function(){
659661
 const SCROLL_LEN = 25;
660662
 const F = window.fossil, D = F.dom, Diff = F.diff;
663
+ var lastWidth;
661664
 Diff.checkTableWidth = function f(force){
662
- if(undefined === f.lastWidth){
663
- f.lastWidth = 0;
665
+ if(undefined === f.contentNode){
666
+ f.contentNode = document.querySelector('div.content');
664667
 }
665
- if( !force && document.body.clientWidth===f.lastWidth ) return this;
666
- f.lastWidth = document.body.clientWidth;
667
- let w = f.lastWidth*0.5 - 100;
668
+ force = true;
669
+ const parentCS = window.getComputedStyle(f.contentNode);
670
+ const parentWidth = (
671
+ //document.body.clientWidth;
672
+ //parentCS.width;
673
+ f.contentNode.clientWidth
674
+ - parseFloat(parentCS.marginLeft) - parseFloat(parentCS.marginRight)
675
+ );
676
+ if( !force && parentWidth===lastWidth ) return this;
677
+ lastWidth = parentWidth;
678
+ let w = lastWidth*0.5 - 100;
679
+ //console.debug( "w = ",w,", lastWidth =",lastWidth," body = ",document.body.clientWidth);
668680
 if(force || !f.colsL){
669681
 f.colsL = document.querySelectorAll('td.difftxtl pre');
670682
 }
671683
 f.colsL.forEach(function(e){
672684
 e.style.width = w + "px";
@@ -680,13 +692,20 @@
680692
 e.style.maxWidth = w + "px";
681693
 });
682694
 if(!f.allDiffs){
683695
 f.allDiffs = document.querySelectorAll('table.diff');
684696
 }
685
- w = f.lastWidth;
686
- f.allDiffs.forEach((e)=>e.style.maxWidth = w + "px");
687
- //console.debug("checkTableWidth(",force,") f.lastWidth =",f.lastWidth);
697
+ w = lastWidth;
698
+ f.allDiffs.forEach(function f(e){
699
+ if(!f.$){
700
+ f.$ = e.getClientRects()[0];
701
+ console.debug("diff table w =",w," f.$x",f.$);
702
+ w - 2*f.$.x /* left margin (assume right==left, for simplicity) */;
703
+ }
704
+ e.style.maxWidth = w + "px";
705
+ });
706
+ //console.debug("checkTableWidth(",force,") lastWidth =",lastWidth);
688707
 return this;
689708
 };
690709
691710
 const scrollLeft = function(event){
692711
 //console.debug("scrollLeft",this,event);
693712
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -326,29 +326,30 @@
326 createButton: function(fetchType){
327 let b;
328 switch(fetchType){
329 case this.FetchType.PrevDown:
330 b = D.append(
331 D.addClass(D.span(), 'button', 'down'),
332 D.span(/*glyph holder*/)
333 );
334 break;
335 case this.FetchType.FillGap:
336 b = D.append(
337 D.addClass(D.span(), 'button', 'up', 'down'),
338 D.span(/*glyph holder*/)
339 );
340 break;
341 case this.FetchType.NextUp:
342 b = D.append(
343 D.addClass(D.span(), 'button', 'up'),
344 D.span(/*glyph holder*/)
345 );
346 break;
347 default:
348 throw new Error("Internal API misuse: unexpected fetchType value "+fetchType);
349 }
 
350 b.addEventListener('click', ()=>this.fetchChunk(fetchType),false);
351 return b;
352 },
353
354 updatePosDebug: function(){
@@ -391,11 +392,12 @@
391 if(!lines.length){
392 /* No more data to load */
393 this.destroy();
394 return this;
395 }
396 console.debug("Loaded line range ",urlParam.from,"-",urlParam.to, "fetchType ",fetchType);
 
397 const lineno = [],
398 trPrev = this.e.tr.previousElementSibling,
399 trNext = this.e.tr.nextElementSibling,
400 doAppend = (
401 !!trPrev && fetchType>=this.FetchType.FillGap
@@ -622,11 +624,11 @@
622 up.from = this.pos.prev.endLhs + 1;
623 fetchType = this.FetchType.FillGap;
624 }
625 }
626 this.$isFetching = true;
627 console.debug("fetchChunk(",fetchType,")",up);
628 Diff.fetchArtifactChunk(fOpt);
629 return this;
630 }
631 };
632
@@ -656,17 +658,27 @@
656 ** both sides scroll together. Left and right arrows also scroll.
657 */
658 window.fossil.onPageLoad(function(){
659 const SCROLL_LEN = 25;
660 const F = window.fossil, D = F.dom, Diff = F.diff;
 
661 Diff.checkTableWidth = function f(force){
662 if(undefined === f.lastWidth){
663 f.lastWidth = 0;
664 }
665 if( !force && document.body.clientWidth===f.lastWidth ) return this;
666 f.lastWidth = document.body.clientWidth;
667 let w = f.lastWidth*0.5 - 100;
 
 
 
 
 
 
 
 
 
668 if(force || !f.colsL){
669 f.colsL = document.querySelectorAll('td.difftxtl pre');
670 }
671 f.colsL.forEach(function(e){
672 e.style.width = w + "px";
@@ -680,13 +692,20 @@
680 e.style.maxWidth = w + "px";
681 });
682 if(!f.allDiffs){
683 f.allDiffs = document.querySelectorAll('table.diff');
684 }
685 w = f.lastWidth;
686 f.allDiffs.forEach((e)=>e.style.maxWidth = w + "px");
687 //console.debug("checkTableWidth(",force,") f.lastWidth =",f.lastWidth);
 
 
 
 
 
 
 
688 return this;
689 };
690
691 const scrollLeft = function(event){
692 //console.debug("scrollLeft",this,event);
693
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -326,29 +326,30 @@
326 createButton: function(fetchType){
327 let b;
328 switch(fetchType){
329 case this.FetchType.PrevDown:
330 b = D.append(
331 D.addClass(D.span(), 'down'),
332 D.span(/*glyph holder*/)
333 );
334 break;
335 case this.FetchType.FillGap:
336 b = D.append(
337 D.addClass(D.span(), 'up', 'down'),
338 D.span(/*glyph holder*/)
339 );
340 break;
341 case this.FetchType.NextUp:
342 b = D.append(
343 D.addClass(D.span(), 'up'),
344 D.span(/*glyph holder*/)
345 );
346 break;
347 default:
348 throw new Error("Internal API misuse: unexpected fetchType value "+fetchType);
349 }
350 D.addClass(b, 'jcbutton');
351 b.addEventListener('click', ()=>this.fetchChunk(fetchType),false);
352 return b;
353 },
354
355 updatePosDebug: function(){
@@ -391,11 +392,12 @@
392 if(!lines.length){
393 /* No more data to load */
394 this.destroy();
395 return this;
396 }
397 //console.debug("Loaded line range ",
398 //urlParam.from,"-",urlParam.to, "fetchType ",fetchType);
399 const lineno = [],
400 trPrev = this.e.tr.previousElementSibling,
401 trNext = this.e.tr.nextElementSibling,
402 doAppend = (
403 !!trPrev && fetchType>=this.FetchType.FillGap
@@ -622,11 +624,11 @@
624 up.from = this.pos.prev.endLhs + 1;
625 fetchType = this.FetchType.FillGap;
626 }
627 }
628 this.$isFetching = true;
629 //console.debug("fetchChunk(",fetchType,")",up);
630 Diff.fetchArtifactChunk(fOpt);
631 return this;
632 }
633 };
634
@@ -656,17 +658,27 @@
658 ** both sides scroll together. Left and right arrows also scroll.
659 */
660 window.fossil.onPageLoad(function(){
661 const SCROLL_LEN = 25;
662 const F = window.fossil, D = F.dom, Diff = F.diff;
663 var lastWidth;
664 Diff.checkTableWidth = function f(force){
665 if(undefined === f.contentNode){
666 f.contentNode = document.querySelector('div.content');
667 }
668 force = true;
669 const parentCS = window.getComputedStyle(f.contentNode);
670 const parentWidth = (
671 //document.body.clientWidth;
672 //parentCS.width;
673 f.contentNode.clientWidth
674 - parseFloat(parentCS.marginLeft) - parseFloat(parentCS.marginRight)
675 );
676 if( !force && parentWidth===lastWidth ) return this;
677 lastWidth = parentWidth;
678 let w = lastWidth*0.5 - 100;
679 //console.debug( "w = ",w,", lastWidth =",lastWidth," body = ",document.body.clientWidth);
680 if(force || !f.colsL){
681 f.colsL = document.querySelectorAll('td.difftxtl pre');
682 }
683 f.colsL.forEach(function(e){
684 e.style.width = w + "px";
@@ -680,13 +692,20 @@
692 e.style.maxWidth = w + "px";
693 });
694 if(!f.allDiffs){
695 f.allDiffs = document.querySelectorAll('table.diff');
696 }
697 w = lastWidth;
698 f.allDiffs.forEach(function f(e){
699 if(!f.$){
700 f.$ = e.getClientRects()[0];
701 console.debug("diff table w =",w," f.$x",f.$);
702 w - 2*f.$.x /* left margin (assume right==left, for simplicity) */;
703 }
704 e.style.maxWidth = w + "px";
705 });
706 //console.debug("checkTableWidth(",force,") lastWidth =",lastWidth);
707 return this;
708 };
709
710 const scrollLeft = function(event){
711 //console.debug("scrollLeft",this,event);
712

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button