Fossil SCM

Enable horizontal scrolling for individual text blocks in unified diffs. [forum:91c3e7854c | Forum Post 91c3e7854c] and the following.

florian 2023-01-11 18:07 trunk merge
Commit 603816d2210d79171114601a8ad0dc6d76d3b9d34fe149c0a29237ed469285d5
Parent 8f9f2cb7cd2e11b…
2 files changed -4 +33 -18
~ src/default.css ~ src/fossil.diff.js
M src/default.css
-4
--- src/default.css
+++ src/default.css
@@ -575,14 +575,10 @@
575575
 padding: inherit;
576576
 }
577577
 table.diff td.diffln > pre {
578578
 padding: 0 0.35em 0 0.5em;
579579
 }
580
-table.diff td.difftxt > pre {
581
- min-width: 100%;
582
- max-width: 100%;
583
-}
584580
 table.diff td > pre {
585581
 box-sizing: border-box;
586582
 /* Workaround for "slight wiggle" when using mouse-wheel in some FF
587583
 versions, apparently caused by the increased line-height forcing
588584
 these elements to be a *tick* larger than they should be but not
589585
--- src/default.css
+++ src/default.css
@@ -575,14 +575,10 @@
575 padding: inherit;
576 }
577 table.diff td.diffln > pre {
578 padding: 0 0.35em 0 0.5em;
579 }
580 table.diff td.difftxt > pre {
581 min-width: 100%;
582 max-width: 100%;
583 }
584 table.diff td > pre {
585 box-sizing: border-box;
586 /* Workaround for "slight wiggle" when using mouse-wheel in some FF
587 versions, apparently caused by the increased line-height forcing
588 these elements to be a *tick* larger than they should be but not
589
--- src/default.css
+++ src/default.css
@@ -575,14 +575,10 @@
575 padding: inherit;
576 }
577 table.diff td.diffln > pre {
578 padding: 0 0.35em 0 0.5em;
579 }
 
 
 
 
580 table.diff td > pre {
581 box-sizing: border-box;
582 /* Workaround for "slight wiggle" when using mouse-wheel in some FF
583 versions, apparently caused by the increased line-height forcing
584 these elements to be a *tick* larger than they should be but not
585
M src/fossil.diff.js
+33 -18
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -666,10 +666,18 @@
666666
 }
667667
 f.colsR.forEach(function(e){
668668
 e.style.width = w + "px";
669669
 e.style.maxWidth = w + "px";
670670
 });
671
+ if(force || !f.colsU){
672
+ f.colsU = document.querySelectorAll('td.difftxtu pre');
673
+ }
674
+ w = lastWidth - 100;
675
+ f.colsU.forEach(function(e){
676
+ e.style.width = w + "px";
677
+ e.style.maxWidth = w + "px";
678
+ });
671679
 if(0){ // seems to be unnecessary
672680
 if(!f.allDiffs){
673681
 f.allDiffs = document.querySelectorAll('table.diff');
674682
 }
675683
 w = lastWidth;
@@ -691,15 +699,20 @@
691699
 const table = this.parentElement/*TD*/.parentElement/*TR*/.
692700
 parentElement/*TBODY*/.parentElement/*TABLE*/;
693701
 table.$txtPres.forEach((e)=>(e===this) ? 1 : (e.scrollLeft = this.scrollLeft));
694702
 return false;
695703
 };
696
- Diff.initTableDiff = function f(diff){
704
+ Diff.initTableDiff = function f(diff, unifiedDiffs){
697705
 if(!diff){
698
- let i, diffs = document.querySelectorAll('table.splitdiff');
706
+ let i, diffs;
707
+ diffs = document.querySelectorAll('table.splitdiff');
708
+ for(i=0; i<diffs.length; ++i){
709
+ f.call(this, diffs[i], false);
710
+ }
711
+ diffs = document.querySelectorAll('table.udiff');
699712
 for(i=0; i<diffs.length; ++i){
700
- f.call(this, diffs[i]);
713
+ f.call(this, diffs[i], true);
701714
 }
702715
 return this;
703716
 }
704717
 diff.$txtCols = diff.querySelectorAll('td.difftxt');
705718
 diff.$txtPres = diff.querySelectorAll('td.difftxt pre');
@@ -710,29 +723,31 @@
710723
 //console.debug("diff.$txtPres =",diff.$txtPres);
711724
 diff.$txtCols.forEach((e)=>e.style.width = width + 'px');
712725
 diff.$txtPres.forEach(function(e){
713726
 e.style.maxWidth = width + 'px';
714727
 e.style.width = width + 'px';
715
- if(!e.classList.contains('scroller')){
728
+ if(!unifiedDiffs && !e.classList.contains('scroller')){
716729
 D.addClass(e, 'scroller');
717730
 e.addEventListener('scroll', scrollLeft, false);
718731
 }
719732
 });
720
- diff.tabIndex = 0;
721
- if(!diff.classList.contains('scroller')){
722
- D.addClass(diff, 'scroller');
723
- diff.addEventListener('keydown', function(e){
724
- e = e || event;
725
- const len = {37: -SCROLL_LEN, 39: SCROLL_LEN}[e.keyCode];
726
- if( !len ) return;
727
- this.$txtPres[0].scrollLeft += len;
728
- /* ^^^ bug: if there is a 2nd column and it has a scrollbar
729
- but txtPres[0] does not, no scrolling happens here. We need
730
- to find the widest of txtPres and scroll that one. Example:
731
- Checkin a7fbefee38a1c522 file diff.c */
732
- return false;
733
- }, false);
733
+ if(!unifiedDiffs){
734
+ diff.tabIndex = 0;
735
+ if(!diff.classList.contains('scroller')){
736
+ D.addClass(diff, 'scroller');
737
+ diff.addEventListener('keydown', function(e){
738
+ e = e || event;
739
+ const len = {37: -SCROLL_LEN, 39: SCROLL_LEN}[e.keyCode];
740
+ if( !len ) return;
741
+ this.$txtPres[0].scrollLeft += len;
742
+ /* ^^^ bug: if there is a 2nd column and it has a scrollbar
743
+ but txtPres[0] does not, no scrolling happens here. We need
744
+ to find the widest of txtPres and scroll that one. Example:
745
+ Checkin a7fbefee38a1c522 file diff.c */
746
+ return false;
747
+ }, false);
748
+ }
734749
 }
735750
 return this;
736751
 }
737752
 window.fossil.page.tweakSbsDiffs = function(){
738753
 document.querySelectorAll('table.splitdiff').forEach((e)=>Diff.initTableDiff(e));
739754
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -666,10 +666,18 @@
666 }
667 f.colsR.forEach(function(e){
668 e.style.width = w + "px";
669 e.style.maxWidth = w + "px";
670 });
 
 
 
 
 
 
 
 
671 if(0){ // seems to be unnecessary
672 if(!f.allDiffs){
673 f.allDiffs = document.querySelectorAll('table.diff');
674 }
675 w = lastWidth;
@@ -691,15 +699,20 @@
691 const table = this.parentElement/*TD*/.parentElement/*TR*/.
692 parentElement/*TBODY*/.parentElement/*TABLE*/;
693 table.$txtPres.forEach((e)=>(e===this) ? 1 : (e.scrollLeft = this.scrollLeft));
694 return false;
695 };
696 Diff.initTableDiff = function f(diff){
697 if(!diff){
698 let i, diffs = document.querySelectorAll('table.splitdiff');
 
 
 
 
 
699 for(i=0; i<diffs.length; ++i){
700 f.call(this, diffs[i]);
701 }
702 return this;
703 }
704 diff.$txtCols = diff.querySelectorAll('td.difftxt');
705 diff.$txtPres = diff.querySelectorAll('td.difftxt pre');
@@ -710,29 +723,31 @@
710 //console.debug("diff.$txtPres =",diff.$txtPres);
711 diff.$txtCols.forEach((e)=>e.style.width = width + 'px');
712 diff.$txtPres.forEach(function(e){
713 e.style.maxWidth = width + 'px';
714 e.style.width = width + 'px';
715 if(!e.classList.contains('scroller')){
716 D.addClass(e, 'scroller');
717 e.addEventListener('scroll', scrollLeft, false);
718 }
719 });
720 diff.tabIndex = 0;
721 if(!diff.classList.contains('scroller')){
722 D.addClass(diff, 'scroller');
723 diff.addEventListener('keydown', function(e){
724 e = e || event;
725 const len = {37: -SCROLL_LEN, 39: SCROLL_LEN}[e.keyCode];
726 if( !len ) return;
727 this.$txtPres[0].scrollLeft += len;
728 /* ^^^ bug: if there is a 2nd column and it has a scrollbar
729 but txtPres[0] does not, no scrolling happens here. We need
730 to find the widest of txtPres and scroll that one. Example:
731 Checkin a7fbefee38a1c522 file diff.c */
732 return false;
733 }, false);
 
 
734 }
735 return this;
736 }
737 window.fossil.page.tweakSbsDiffs = function(){
738 document.querySelectorAll('table.splitdiff').forEach((e)=>Diff.initTableDiff(e));
739
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -666,10 +666,18 @@
666 }
667 f.colsR.forEach(function(e){
668 e.style.width = w + "px";
669 e.style.maxWidth = w + "px";
670 });
671 if(force || !f.colsU){
672 f.colsU = document.querySelectorAll('td.difftxtu pre');
673 }
674 w = lastWidth - 100;
675 f.colsU.forEach(function(e){
676 e.style.width = w + "px";
677 e.style.maxWidth = w + "px";
678 });
679 if(0){ // seems to be unnecessary
680 if(!f.allDiffs){
681 f.allDiffs = document.querySelectorAll('table.diff');
682 }
683 w = lastWidth;
@@ -691,15 +699,20 @@
699 const table = this.parentElement/*TD*/.parentElement/*TR*/.
700 parentElement/*TBODY*/.parentElement/*TABLE*/;
701 table.$txtPres.forEach((e)=>(e===this) ? 1 : (e.scrollLeft = this.scrollLeft));
702 return false;
703 };
704 Diff.initTableDiff = function f(diff, unifiedDiffs){
705 if(!diff){
706 let i, diffs;
707 diffs = document.querySelectorAll('table.splitdiff');
708 for(i=0; i<diffs.length; ++i){
709 f.call(this, diffs[i], false);
710 }
711 diffs = document.querySelectorAll('table.udiff');
712 for(i=0; i<diffs.length; ++i){
713 f.call(this, diffs[i], true);
714 }
715 return this;
716 }
717 diff.$txtCols = diff.querySelectorAll('td.difftxt');
718 diff.$txtPres = diff.querySelectorAll('td.difftxt pre');
@@ -710,29 +723,31 @@
723 //console.debug("diff.$txtPres =",diff.$txtPres);
724 diff.$txtCols.forEach((e)=>e.style.width = width + 'px');
725 diff.$txtPres.forEach(function(e){
726 e.style.maxWidth = width + 'px';
727 e.style.width = width + 'px';
728 if(!unifiedDiffs && !e.classList.contains('scroller')){
729 D.addClass(e, 'scroller');
730 e.addEventListener('scroll', scrollLeft, false);
731 }
732 });
733 if(!unifiedDiffs){
734 diff.tabIndex = 0;
735 if(!diff.classList.contains('scroller')){
736 D.addClass(diff, 'scroller');
737 diff.addEventListener('keydown', function(e){
738 e = e || event;
739 const len = {37: -SCROLL_LEN, 39: SCROLL_LEN}[e.keyCode];
740 if( !len ) return;
741 this.$txtPres[0].scrollLeft += len;
742 /* ^^^ bug: if there is a 2nd column and it has a scrollbar
743 but txtPres[0] does not, no scrolling happens here. We need
744 to find the widest of txtPres and scroll that one. Example:
745 Checkin a7fbefee38a1c522 file diff.c */
746 return false;
747 }, false);
748 }
749 }
750 return this;
751 }
752 window.fossil.page.tweakSbsDiffs = function(){
753 document.querySelectorAll('table.splitdiff').forEach((e)=>Diff.initTableDiff(e));
754

Keyboard Shortcuts

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