cci: add automatic diff dropdown

Author: ChlodAlejandro

i18n/settings/en.json

@@ -53,6 +53,12 @@
     "deputy.setting.user.cci.showCvLink.description": "Show a \"cv\" link next to \"cur\" and \"prev\" on revision rows. This link will only appear if this wiki is configured to use Earwig's Copyvio Detector.",
     "deputy.setting.user.cci.showUsername.name": "Show username",
     "deputy.setting.user.cci.showUsername.description": "Show the username of the user who made the edit on revision rows. This may be redundant for cases which only have one editor.",
+    "deputy.setting.user.cci.autoShowDiff.name": "Automatically show diffs",
+    "deputy.setting.user.cci.autoShowDiff.description": "Enabling automatic loading of diffs. Configurable with two additional options to avoid loading too much content.",
+    "deputy.setting.user.cci.maxRevisionsToAutoShowDiff.name": "Maximum revisions to automatically show diff",
+    "deputy.setting.user.cci.maxRevisionsToAutoShowDiff.description": "The maximum number of revisions for a given page to automatically show the diff for each revision in the main interface.",
+    "deputy.setting.user.cci.maxSizeToAutoShowDiff.name": "Maximum size to automatically show diff",
+    "deputy.setting.user.cci.maxSizeToAutoShowDiff.description": "The maximum size of a diff to be automatically shown, if the diff will be automatically shown (see \"Maximum revisions to automatically show diff\"). Prevents extremely large diffs from opening. Set to -1 to show regardless of size.",
     "deputy.setting.user.cci.forceUtc.name": "Force UTC time",
     "deputy.setting.user.cci.forceUtc.description": "Forces Deputy to use UTC time whenever displaying dates and times, irregardless of your system's timezone or your MediaWiki time settings.",
     "deputy.setting.user.cci.signingBehavior.name": "Row signing behavior",

src/config/UserConfiguration.ts

@@ -92,6 +92,34 @@ export default class UserConfiguration extends ConfigurationBase {
 				type: 'checkbox'
 			}
 		} ),
+		autoShowDiff: new Setting<boolean, boolean>( {
+			defaultValue: false,
+			displayOptions: {
+				type: 'checkbox'
+			}
+		} ),
+		maxRevisionsToAutoShowDiff: new Setting<number, number>( {
+			defaultValue: 2,
+			displayOptions: {
+				type: 'number',
+				// Force any due to self-reference
+				disabled: ( config: any ) => !config.cci.autoShowDiff.get(),
+				extraOptions: {
+					min: 1
+				}
+			}
+		} ),
+		maxSizeToAutoShowDiff: new Setting<number, number>( {
+			defaultValue: 500,
+			displayOptions: {
+				type: 'number',
+				// Force any due to self-reference
+				disabled: ( config: any ) => !config.cci.autoShowDiff.get(),
+				extraOptions: {
+					min: -1
+				}
+			}
+		} ),
 		forceUtc: new Setting<boolean, boolean>( {
 			defaultValue: false,
 			displayOptions: {

src/css/deputy.css

@@ -320,12 +320,15 @@ body.mediawiki.rtl .dp-cs-row-head > :not(:first-child):not(:last-child) {
 }
 
 .dp-cs-rev-diff {
-	margin: 4px 0;
-	padding: 8px 14px;
 	background-color: white;
 	position: relative;
 }
 
+.dp-cs-rev-diff--loaded {
+	margin: 4px 0;
+	padding: 8px 14px;
+}
+
 .dp-cs-rev-diff--hidden {
 	display: none;
 }

src/ui/root/DeputyContributionSurveyRevision.tsx

@@ -223,25 +223,19 @@ export default class DeputyContributionSurveyRevision
 			value: this.autoExpanded
 		} );
 
-		const handleDiffToggle = ( active: boolean ) => {
-			if ( !this.element ) {
-				// Not yet mounted.
-				return;
-			}
-
-			let willLoad = true;
+		this.diff = <div class="dp-cs-rev-diff"/> as HTMLElement;
 
-			if ( this.diff == null ) {
-				this.diff = <div class="dp-cs-rev-diff"/> as HTMLElement;
-				this.element.appendChild( this.diff );
-			} else if ( active && this.diff.classList.contains( 'dp-cs-rev-diff--errored' ) ) {
+		let loaded = false;
+		const handleDiffToggle = ( active: boolean ) => {
+			this.diffToggle.setIndicator( active ? 'up' : 'down' );
+			if ( active && this.diff.classList.contains( 'dp-cs-rev-diff--errored' ) ) {
+				// Remake diff panel
 				this.diff = swapElements( this.diff, <div class="dp-cs-rev-diff"/> as HTMLElement );
-			} else {
+			} else if ( loaded ) {
 				this.diff.classList.toggle( 'dp-cs-rev-diff--hidden', !active );
-				willLoad = false;
 			}
 
-			if ( active && willLoad ) {
+			if ( active && !loaded ) {
 				// Going active, clear the element out
 				Array.from( this.diff.children ).forEach(
 					( child ) => this.diff.removeChild( child )
@@ -299,14 +293,18 @@ export default class DeputyContributionSurveyRevision
 							}
 						} );
 
+						this.diff.classList.toggle( 'dp-cs-rev-diff--loaded', true );
+						this.diff.classList.toggle( 'dp-cs-rev-diff--errored', false );
 						this.diff.appendChild( diffTable );
+						loaded = true;
 					}, ( _error, errorData ) => {
-					// Clear element out again
+						// Clear element out again
 						Array.from( this.diff.children ).map(
 							( child ) => this.diff.removeChild( child )
 						);
 
-						this.diff.classList.add( 'dp-cs-rev-diff--errored' );
+						this.diff.classList.toggle( 'dp-cs-rev-diff--loaded', true );
+						this.diff.classList.toggle( 'dp-cs-rev-diff--errored', true );
 						this.diff.appendChild( unwrapWidget( DeputyMessageWidget( {
 							type: 'error',
 							message: mw.msg(
@@ -321,7 +319,6 @@ export default class DeputyContributionSurveyRevision
 		};
 
 		this.diffToggle.on( 'change', ( checked: boolean ) => {
-			this.diffToggle.setIndicator( checked ? 'up' : 'down' );
 			handleDiffToggle( checked );
 		} );
 
@@ -406,7 +403,7 @@ export default class DeputyContributionSurveyRevision
 				( this.revision as any ).missing ?
 					this.renderMissingRevisionInfo() :
 					this.renderRevisionInfo()
-			)}
+			)}{this.diff}
 		</div> as HTMLElement;
 	}
 

src/ui/root/DeputyContributionSurveyRow.tsx

@@ -626,8 +626,15 @@ export default class DeputyContributionSurveyRow extends EventTarget implements
 			this.renderCommentsTextInput( this.row.comment )
 		) );
 
+		const maxSize = window.deputy.config.cci.maxSizeToAutoShowDiff.get();
 		for ( const revision of diffs.values() ) {
-			const revisionUIEl = new DeputyContributionSurveyRevision( revision, this );
+			const revisionUIEl = new DeputyContributionSurveyRevision(
+				revision, this, {
+					expanded: window.deputy.config.cci.autoShowDiff.get() &&
+						diffs.size < window.deputy.config.cci.maxRevisionsToAutoShowDiff.get() &&
+						( maxSize === -1 || Math.abs( revision.diffsize ) < maxSize )
+				}
+			);
 
 			revisionUIEl.addEventListener(
 				'update',