Fossil SCM

Some JS code simplification and added dark-mode CSS filter to jchunk controls.

stephan 2021-09-10 16:08 diff-js-refactoring
Commit 65ae15e0088cf3ff81f13d1c9d13b8bbf49beacc98c48594945d3e00a70d18db
Parent 11a981ead041010…
2 files changed +7 -2 +27 -31
~ src/default.css ~ src/fossil.diff.js
M src/default.css
+7 -2
--- src/default.css
+++ src/default.css
@@ -547,14 +547,16 @@
547547
 table.diff pre {
548548
 margin: 0 0 0 0;
549549
 }
550550
 tr.diffskip.jchunk {
551551
 /* jchunk gets added from JS to diffskip rows when they are
552
- plugged into the /jchunk route and removed after that data
553
- is fetched. */
552
+ plugged into the /jchunk route. */
554553
 background-color: aliceblue;
555554
 padding: 0;
555
+}
556
+body.fossil-dark-style tr.diffskip.jchunk {
557
+ filter: invert(100%);
556558
 }
557559
 tr.diffskip.jchunk > td {
558560
 padding: 0.25em 0.5em;
559561
 margin: 0;
560562
 }
@@ -566,10 +568,13 @@
566568
 text-align: left;
567569
 font-family: monospace;
568570
 }
569571
 tr.diffskip > td.chunkctrl > div {
570572
 /* Exists solely for layout purposes. */
573
+}
574
+body.fossil-dark-style tr.diffskip > td.chunkctrl{
575
+ filter: inherit;
571576
 }
572577
 tr.diffskip > td.chunkctrl .button {
573578
 min-width: 2.5em;
574579
 max-width: 2.5em;
575580
 text-align: center;
576581
--- src/default.css
+++ src/default.css
@@ -547,14 +547,16 @@
547 table.diff pre {
548 margin: 0 0 0 0;
549 }
550 tr.diffskip.jchunk {
551 /* jchunk gets added from JS to diffskip rows when they are
552 plugged into the /jchunk route and removed after that data
553 is fetched. */
554 background-color: aliceblue;
555 padding: 0;
 
 
 
556 }
557 tr.diffskip.jchunk > td {
558 padding: 0.25em 0.5em;
559 margin: 0;
560 }
@@ -566,10 +568,13 @@
566 text-align: left;
567 font-family: monospace;
568 }
569 tr.diffskip > td.chunkctrl > div {
570 /* Exists solely for layout purposes. */
 
 
 
571 }
572 tr.diffskip > td.chunkctrl .button {
573 min-width: 2.5em;
574 max-width: 2.5em;
575 text-align: center;
576
--- src/default.css
+++ src/default.css
@@ -547,14 +547,16 @@
547 table.diff pre {
548 margin: 0 0 0 0;
549 }
550 tr.diffskip.jchunk {
551 /* jchunk gets added from JS to diffskip rows when they are
552 plugged into the /jchunk route. */
 
553 background-color: aliceblue;
554 padding: 0;
555 }
556 body.fossil-dark-style tr.diffskip.jchunk {
557 filter: invert(100%);
558 }
559 tr.diffskip.jchunk > td {
560 padding: 0.25em 0.5em;
561 margin: 0;
562 }
@@ -566,10 +568,13 @@
568 text-align: left;
569 font-family: monospace;
570 }
571 tr.diffskip > td.chunkctrl > div {
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
M src/fossil.diff.js
+27 -31
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -274,31 +274,27 @@
274274
 || (this.pos.prev && this.pos.next
275275
 && ((this.pos.next.startLhs - this.pos.prev.endLhs)
276276
 <= Diff.config.chunkLoadLines))){
277277
 /* Place a single button to load the whole block, rather
278278
 than separate up/down buttons. */
279
- //delete this.pos.next;
280279
 btnDown = false;
281280
 btnUp = D.append(
282281
 D.addClass(D.span(), 'button', 'up', 'down'),
283282
 D.span(/*glyph holder*/)
284
- //D.append(D.span(), this.config.glyphDown, this.config.glyphUp)
285283
 );
286284
 }else{
287285
 /* Figure out which chunk-load buttons to add... */
288286
 if(this.pos.prev){
289287
 btnDown = D.append(
290288
 D.addClass(D.span(), 'button', 'down'),
291289
 D.span(/*glyph holder*/)
292
- //D.append(D.span(), this.config.glyphDown)
293290
 );
294291
 }
295292
 if(this.pos.next){
296293
 btnUp = D.append(
297294
 D.addClass(D.span(), 'button', 'up'),
298295
 D.span(/*glyph holder*/)
299
- //D.append(D.span(), this.config.glyphUp)
300296
 );
301297
 }
302298
 }
303299
 if(btnDown){
304300
 D.append(this.e.btnWrapper, btnDown);
@@ -381,82 +377,88 @@
381377
 const tr = trPrev || trNext;
382378
 if(0!==direction){
383379
 console.error("this case is not yet handled",arguments);
384380
 return this;
385381
 }
386
- const joinTr = (0===direction && trPrev && trNext);
382
+ const joinTr = (
383
+ 0===direction && trPrev && trNext
384
+ ) ? trNext : false
385
+ /* Truthy if we want to combine trPrev, the new content, and
386
+ trNext into trPrev and remove trNext. */;
387387
 let i, td;
388
+
388389
 if(1){ // LHS line numbers...
389390
 const selector = '.difflnl > pre';
390391
 td = tr.querySelector(selector);
391392
 for( i = urlParam.from; i <= urlParam.to; ++i ){
392393
 lineno.push(i);
393394
 }
394395
 const lineNoTxt = lineno.join('\n')+'\n';
395
- const content = [];
396
- if(doAppend) content.push(td.innerHTML, lineNoTxt);
397
- else content.push(lineNoTxt, td.innerHTML);
396
+ const content = [td.innerHTML];
397
+ if(doAppend) content.push(lineNoTxt);
398
+ else content.unshift(lineNoTxt);
398399
 if(joinTr){
399400
 content.push(trNext.querySelector(selector).innerHTML);
400401
 }
401402
 td.innerHTML = content.join('');
402403
 }
403404
404
- if(1){// code block...
405
+ if(1){// code block(s)...
405406
 const selector = '.difftxt > pre';
406407
 td = tr.querySelectorAll(selector);
407408
 const code = D.append(D.div(),lines.join('\n')+'\n').innerText;
408409
 let joinNdx = 0;
409410
 td.forEach(function(e){
410
- const content = [];
411
- if(doAppend) content.push(e.innerHTML, code);
412
- else content.push(code, e.innerHTML);
411
+ const content = [e.innerHTML];
412
+ if(doAppend) content.push(code);
413
+ else content.unshift(code);
413414
 if(joinTr){
414415
 content.push(trNext.querySelectorAll(selector)[joinNdx++].innerHTML)
415416
 }
416417
 e.innerHTML = content.join('');
417418
 });
418419
 }
420
+
419421
 if(1){
420422
 // Add blank lines in (.diffsep>pre)
421423
 const selector = '.diffsep > pre';
422424
 td = tr.querySelector(selector);
423425
 for(i = 0; i < lineno.length; ++i) lineno[i] = '';
424426
 const blanks = lineno.join('\n')+'\n';
425
- const content = [];
426
- if(doAppend) content.push(td.innerHTML, blanks);
427
- else content.push(blanks, td.innerHTML);
427
+ const content = [td.innerHTML];
428
+ if(doAppend) content.push(blanks);
429
+ else content.unshift(blanks);
428430
 if(joinTr){
429431
 content.push(trNext.querySelector(selector).innerHTML);
430432
 }
431433
 td.innerHTML = content.join('');
432434
 }
435
+
433436
 if(0===direction){
434437
 /* Closing the whole gap between two chunks or a whole gap
435438
 at the start or end of a diff. */
439
+ // RHS line numbers...
436440
 let startLnR = this.pos.prev
437441
 ? this.pos.prev.endRhs+1 /* Closing the whole gap between two chunks
438442
 or end-of-file gap. */
439443
 : this.pos.next.startRhs - lines.length /* start-of-file gap */;
440
- lineno.length = 0;
444
+ lineno.length = lines.length;
441445
 for( i = startLnR; i < startLnR + lines.length; ++i ){
442
- /* TODO? space-pad numbers, but we don't know the proper length from here. */
443
- lineno.push(i);
446
+ lineno[i-startLnR] = i;
444447
 }
445448
 const selector = '.difflnr > pre';
446449
 td = tr.querySelector(selector);
447450
 const lineNoTxt = lineno.join('\n')+'\n';
448
- const content = [];
449
- if(doAppend) content.push(td.innerHTML, lineNoTxt);
450
- else content.push(lineNoTxt, td.innerHTML);
451
+ lineno.length = 0;
452
+ const content = [td.innerHTML];
453
+ if(doAppend) content.push(lineNoTxt);
454
+ else content.unshift(lineNoTxt);
451455
 if(joinTr){
452456
 content.push(trNext.querySelector(selector).innerHTML);
453457
 }
454458
 td.innerHTML = content.join('');
455
- if(joinTr){
456
- D.remove(joinTr);
457
- }
459
+ if(joinTr) D.remove(joinTr);
458460
 Diff.checkTableWidth(true);
459461
 this.destroy();
460462
 return this;
461463
 }else{
462464
 console.debug("TODO: handle load of partial next/prev");
@@ -480,20 +482,19 @@
480482
 return this;
481483
 }else if(direction>0/*next chunk*/ && !this.pos.prev){
482484
 console.error("Attempt to fetch next diff lines but don't have any.");
483485
 return this;
484486
 }
485
- console.debug("Going to fetch in direction",direction);
486487
 const fOpt = {
487488
 urlParams:{
488489
 name: this.fileHash, from: 0, to: 0
489490
 },
490491
 aftersend: ()=>delete this.$isFetching
491492
 };
492493
 const self = this;
493494
 if(direction!=0){
494
- console.debug("Skipping fetch for now.");
495
+ console.debug("Skipping partial fetch for now.");
495496
 return this;
496497
 }else{
497498
 fOpt.urlParams.from = this.pos.startLhs;
498499
 fOpt.urlParams.to = this.pos.endLhs;
499500
 fOpt.onload = function(list){
@@ -521,15 +522,10 @@
521522
 return F;
522523
 };
523524
 Diff.addDiffSkipHandlers();
524525
 });
525526
526
-/**
527
- 2021-09-07: refactoring the following for use in the higher-level
528
- fossil.*.js framework is pending. For now it's a copy/paste copy
529
- of diff.js.
530
-*/
531527
 /* Refinements to the display of unified and side-by-side diffs.
532528
 **
533529
 ** In all cases, the table columns tagged with "difftxt" are expanded,
534530
 ** where possible, to fill the width of the screen.
535531
 **
536532
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -274,31 +274,27 @@
274 || (this.pos.prev && this.pos.next
275 && ((this.pos.next.startLhs - this.pos.prev.endLhs)
276 <= Diff.config.chunkLoadLines))){
277 /* Place a single button to load the whole block, rather
278 than separate up/down buttons. */
279 //delete this.pos.next;
280 btnDown = false;
281 btnUp = D.append(
282 D.addClass(D.span(), 'button', 'up', 'down'),
283 D.span(/*glyph holder*/)
284 //D.append(D.span(), this.config.glyphDown, this.config.glyphUp)
285 );
286 }else{
287 /* Figure out which chunk-load buttons to add... */
288 if(this.pos.prev){
289 btnDown = D.append(
290 D.addClass(D.span(), 'button', 'down'),
291 D.span(/*glyph holder*/)
292 //D.append(D.span(), this.config.glyphDown)
293 );
294 }
295 if(this.pos.next){
296 btnUp = D.append(
297 D.addClass(D.span(), 'button', 'up'),
298 D.span(/*glyph holder*/)
299 //D.append(D.span(), this.config.glyphUp)
300 );
301 }
302 }
303 if(btnDown){
304 D.append(this.e.btnWrapper, btnDown);
@@ -381,82 +377,88 @@
381 const tr = trPrev || trNext;
382 if(0!==direction){
383 console.error("this case is not yet handled",arguments);
384 return this;
385 }
386 const joinTr = (0===direction && trPrev && trNext);
 
 
 
 
387 let i, td;
 
388 if(1){ // LHS line numbers...
389 const selector = '.difflnl > pre';
390 td = tr.querySelector(selector);
391 for( i = urlParam.from; i <= urlParam.to; ++i ){
392 lineno.push(i);
393 }
394 const lineNoTxt = lineno.join('\n')+'\n';
395 const content = [];
396 if(doAppend) content.push(td.innerHTML, lineNoTxt);
397 else content.push(lineNoTxt, td.innerHTML);
398 if(joinTr){
399 content.push(trNext.querySelector(selector).innerHTML);
400 }
401 td.innerHTML = content.join('');
402 }
403
404 if(1){// code block...
405 const selector = '.difftxt > pre';
406 td = tr.querySelectorAll(selector);
407 const code = D.append(D.div(),lines.join('\n')+'\n').innerText;
408 let joinNdx = 0;
409 td.forEach(function(e){
410 const content = [];
411 if(doAppend) content.push(e.innerHTML, code);
412 else content.push(code, e.innerHTML);
413 if(joinTr){
414 content.push(trNext.querySelectorAll(selector)[joinNdx++].innerHTML)
415 }
416 e.innerHTML = content.join('');
417 });
418 }
 
419 if(1){
420 // Add blank lines in (.diffsep>pre)
421 const selector = '.diffsep > pre';
422 td = tr.querySelector(selector);
423 for(i = 0; i < lineno.length; ++i) lineno[i] = '';
424 const blanks = lineno.join('\n')+'\n';
425 const content = [];
426 if(doAppend) content.push(td.innerHTML, blanks);
427 else content.push(blanks, td.innerHTML);
428 if(joinTr){
429 content.push(trNext.querySelector(selector).innerHTML);
430 }
431 td.innerHTML = content.join('');
432 }
 
433 if(0===direction){
434 /* Closing the whole gap between two chunks or a whole gap
435 at the start or end of a diff. */
 
436 let startLnR = this.pos.prev
437 ? this.pos.prev.endRhs+1 /* Closing the whole gap between two chunks
438 or end-of-file gap. */
439 : this.pos.next.startRhs - lines.length /* start-of-file gap */;
440 lineno.length = 0;
441 for( i = startLnR; i < startLnR + lines.length; ++i ){
442 /* TODO? space-pad numbers, but we don't know the proper length from here. */
443 lineno.push(i);
444 }
445 const selector = '.difflnr > pre';
446 td = tr.querySelector(selector);
447 const lineNoTxt = lineno.join('\n')+'\n';
448 const content = [];
449 if(doAppend) content.push(td.innerHTML, lineNoTxt);
450 else content.push(lineNoTxt, td.innerHTML);
 
451 if(joinTr){
452 content.push(trNext.querySelector(selector).innerHTML);
453 }
454 td.innerHTML = content.join('');
455 if(joinTr){
456 D.remove(joinTr);
457 }
458 Diff.checkTableWidth(true);
459 this.destroy();
460 return this;
461 }else{
462 console.debug("TODO: handle load of partial next/prev");
@@ -480,20 +482,19 @@
480 return this;
481 }else if(direction>0/*next chunk*/ && !this.pos.prev){
482 console.error("Attempt to fetch next diff lines but don't have any.");
483 return this;
484 }
485 console.debug("Going to fetch in direction",direction);
486 const fOpt = {
487 urlParams:{
488 name: this.fileHash, from: 0, to: 0
489 },
490 aftersend: ()=>delete this.$isFetching
491 };
492 const self = this;
493 if(direction!=0){
494 console.debug("Skipping fetch for now.");
495 return this;
496 }else{
497 fOpt.urlParams.from = this.pos.startLhs;
498 fOpt.urlParams.to = this.pos.endLhs;
499 fOpt.onload = function(list){
@@ -521,15 +522,10 @@
521 return F;
522 };
523 Diff.addDiffSkipHandlers();
524 });
525
526 /**
527 2021-09-07: refactoring the following for use in the higher-level
528 fossil.*.js framework is pending. For now it's a copy/paste copy
529 of diff.js.
530 */
531 /* Refinements to the display of unified and side-by-side diffs.
532 **
533 ** In all cases, the table columns tagged with "difftxt" are expanded,
534 ** where possible, to fill the width of the screen.
535 **
536
--- src/fossil.diff.js
+++ src/fossil.diff.js
@@ -274,31 +274,27 @@
274 || (this.pos.prev && this.pos.next
275 && ((this.pos.next.startLhs - this.pos.prev.endLhs)
276 <= Diff.config.chunkLoadLines))){
277 /* Place a single button to load the whole block, rather
278 than separate up/down buttons. */
 
279 btnDown = false;
280 btnUp = D.append(
281 D.addClass(D.span(), 'button', 'up', 'down'),
282 D.span(/*glyph holder*/)
 
283 );
284 }else{
285 /* Figure out which chunk-load buttons to add... */
286 if(this.pos.prev){
287 btnDown = D.append(
288 D.addClass(D.span(), 'button', 'down'),
289 D.span(/*glyph holder*/)
 
290 );
291 }
292 if(this.pos.next){
293 btnUp = D.append(
294 D.addClass(D.span(), 'button', 'up'),
295 D.span(/*glyph holder*/)
 
296 );
297 }
298 }
299 if(btnDown){
300 D.append(this.e.btnWrapper, btnDown);
@@ -381,82 +377,88 @@
377 const tr = trPrev || trNext;
378 if(0!==direction){
379 console.error("this case is not yet handled",arguments);
380 return this;
381 }
382 const joinTr = (
383 0===direction && trPrev && trNext
384 ) ? trNext : false
385 /* Truthy if we want to combine trPrev, the new content, and
386 trNext into trPrev and remove trNext. */;
387 let i, td;
388
389 if(1){ // LHS line numbers...
390 const selector = '.difflnl > pre';
391 td = tr.querySelector(selector);
392 for( i = urlParam.from; i <= urlParam.to; ++i ){
393 lineno.push(i);
394 }
395 const lineNoTxt = lineno.join('\n')+'\n';
396 const content = [td.innerHTML];
397 if(doAppend) content.push(lineNoTxt);
398 else content.unshift(lineNoTxt);
399 if(joinTr){
400 content.push(trNext.querySelector(selector).innerHTML);
401 }
402 td.innerHTML = content.join('');
403 }
404
405 if(1){// code block(s)...
406 const selector = '.difftxt > pre';
407 td = tr.querySelectorAll(selector);
408 const code = D.append(D.div(),lines.join('\n')+'\n').innerText;
409 let joinNdx = 0;
410 td.forEach(function(e){
411 const content = [e.innerHTML];
412 if(doAppend) content.push(code);
413 else content.unshift(code);
414 if(joinTr){
415 content.push(trNext.querySelectorAll(selector)[joinNdx++].innerHTML)
416 }
417 e.innerHTML = content.join('');
418 });
419 }
420
421 if(1){
422 // Add blank lines in (.diffsep>pre)
423 const selector = '.diffsep > pre';
424 td = tr.querySelector(selector);
425 for(i = 0; i < lineno.length; ++i) lineno[i] = '';
426 const blanks = lineno.join('\n')+'\n';
427 const content = [td.innerHTML];
428 if(doAppend) content.push(blanks);
429 else content.unshift(blanks);
430 if(joinTr){
431 content.push(trNext.querySelector(selector).innerHTML);
432 }
433 td.innerHTML = content.join('');
434 }
435
436 if(0===direction){
437 /* Closing the whole gap between two chunks or a whole gap
438 at the start or end of a diff. */
439 // RHS line numbers...
440 let startLnR = this.pos.prev
441 ? this.pos.prev.endRhs+1 /* Closing the whole gap between two chunks
442 or end-of-file gap. */
443 : this.pos.next.startRhs - lines.length /* start-of-file gap */;
444 lineno.length = lines.length;
445 for( i = startLnR; i < startLnR + lines.length; ++i ){
446 lineno[i-startLnR] = i;
 
447 }
448 const selector = '.difflnr > pre';
449 td = tr.querySelector(selector);
450 const lineNoTxt = lineno.join('\n')+'\n';
451 lineno.length = 0;
452 const content = [td.innerHTML];
453 if(doAppend) content.push(lineNoTxt);
454 else content.unshift(lineNoTxt);
455 if(joinTr){
456 content.push(trNext.querySelector(selector).innerHTML);
457 }
458 td.innerHTML = content.join('');
459 if(joinTr) D.remove(joinTr);
 
 
460 Diff.checkTableWidth(true);
461 this.destroy();
462 return this;
463 }else{
464 console.debug("TODO: handle load of partial next/prev");
@@ -480,20 +482,19 @@
482 return this;
483 }else if(direction>0/*next chunk*/ && !this.pos.prev){
484 console.error("Attempt to fetch next diff lines but don't have any.");
485 return this;
486 }
 
487 const fOpt = {
488 urlParams:{
489 name: this.fileHash, from: 0, to: 0
490 },
491 aftersend: ()=>delete this.$isFetching
492 };
493 const self = this;
494 if(direction!=0){
495 console.debug("Skipping partial fetch for now.");
496 return this;
497 }else{
498 fOpt.urlParams.from = this.pos.startLhs;
499 fOpt.urlParams.to = this.pos.endLhs;
500 fOpt.onload = function(list){
@@ -521,15 +522,10 @@
522 return F;
523 };
524 Diff.addDiffSkipHandlers();
525 });
526
 
 
 
 
 
527 /* Refinements to the display of unified and side-by-side diffs.
528 **
529 ** In all cases, the table columns tagged with "difftxt" are expanded,
530 ** where possible, to fill the width of the screen.
531 **
532

Keyboard Shortcuts

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