From 007bb6fa097475661288f3517869dfd3795474a7 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Sun, 4 Mar 2018 14:45:33 +0000
Subject: [PATCH] Refactor diffpage init

Avoid re-rendering the diff if it hasn't changed.

Change-Id: Icbc8eb58625cf7c5485d0045e26993a170016309
---
 .../ve-mw/init/ve.init.mw.DiffPage.init.js    | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/modules/ve-mw/init/ve.init.mw.DiffPage.init.js b/modules/ve-mw/init/ve.init.mw.DiffPage.init.js
index e96568ef08..27fd5b2c3f 100644
--- a/modules/ve-mw/init/ve.init.mw.DiffPage.init.js
+++ b/modules/ve-mw/init/ve.init.mw.DiffPage.init.js
@@ -6,8 +6,10 @@
  */
 
 ( function () {
-	var $visualDiff,
-		reviewModeButtonSelect,
+	var reviewModeButtonSelect, diffElement, lastDiff, $wikitextDiff,
+		$visualDiffContainer = $( '<div>' ),
+		$visualDiff = $( '<div>' ),
+		progress = new OO.ui.ProgressBarWidget( { classes: [ 've-init-mw-diffPage-loading' ] } ),
 		uri = new mw.Uri(),
 		mode = uri.query.diffmode || 'source',
 		conf = mw.config.get( 'wgVisualEditorConfig' ),
@@ -18,10 +20,14 @@
 		mode = 'source';
 	}
 
+	$visualDiffContainer.append(
+		progress.$element.addClass( 'oo-ui-element-hidden' ),
+		$visualDiff
+	);
+
 	function onReviewModeButtonSelectSelect( item ) {
-		var modulePromise, progress, oldPageName, newPageName,
+		var modulePromise, oldPageName, newPageName, isVisual,
 			$revSlider = $( '.mw-revslider-container' ),
-			$wikitextDiff = $( 'table.diff[data-mw="interface"]' ),
 			oldId = mw.config.get( 'wgDiffOldId' ),
 			newId = mw.config.get( 'wgDiffNewId' );
 
@@ -33,28 +39,34 @@
 		}
 
 		mode = item.getData();
+		isVisual = mode === 'visual';
 
-		if ( mode === 'visual' ) {
-			progress = new OO.ui.ProgressBarWidget( { classes: [ 've-init-mw-diffPage-loading' ] } );
-			$wikitextDiff.addClass( 'oo-ui-element-hidden' ).before( progress.$element );
+		$visualDiffContainer.toggleClass( 'oo-ui-element-hidden', !isVisual );
+		$wikitextDiff.toggleClass( 'oo-ui-element-hidden', isVisual );
+		$revSlider.toggleClass( 've-init-mw-diffPage-revSlider-visual', isVisual );
+
+		if ( isVisual && !(
+			lastDiff && lastDiff.oldId === oldId && lastDiff.newId === newId &&
+			lastDiff.oldPageName === oldPageName && lastDiff.newPageName === newPageName
+		) ) {
+			$visualDiff.empty();
+			progress.$element.removeClass( 'oo-ui-element-hidden' );
 			// TODO: Load a smaller subset of VE for computing the visual diff
 			modulePromise = mw.loader.using( [ 'ext.visualEditor.desktopArticleTarget' ].concat( pluginModules ) );
 			mw.libs.ve.diffLoader.getVisualDiffGeneratorPromise( oldId, newId, modulePromise, oldPageName, newPageName ).then( function ( visualDiffGenerator ) {
-				var diffElement = new ve.ui.DiffElement( visualDiffGenerator(), { classes: [ 've-init-mw-diffPage-diff' ] } );
+				diffElement = new ve.ui.DiffElement( visualDiffGenerator(), { classes: [ 've-init-mw-diffPage-diff' ] } );
 
-				progress.$element.remove();
-				$wikitextDiff.before( diffElement.$element );
-				$visualDiff = diffElement.$element;
-				$revSlider.addClass( 've-init-mw-diffPage-revSlider-visual' );
+				progress.$element.addClass( 'oo-ui-element-hidden' );
+				$visualDiff.append( diffElement.$element );
+				lastDiff = {
+					oldId: oldId,
+					newId: newId,
+					oldPageName: oldPageName,
+					newPageName: newPageName
+				};
 
 				diffElement.positionDescriptions();
 			} );
-		} else {
-			if ( $visualDiff ) {
-				$visualDiff.addClass( 'oo-ui-element-hidden' );
-			}
-			$wikitextDiff.removeClass( 'oo-ui-element-hidden' );
-			$revSlider.removeClass( 've-init-mw-diffPage-revSlider-visual' );
 		}
 
 		if ( history.replaceState ) {
@@ -65,6 +77,8 @@
 	}
 
 	mw.hook( 'wikipage.diff' ).add( function () {
+		$wikitextDiff = $( 'table.diff[data-mw="interface"]' );
+		$wikitextDiff.before( $visualDiffContainer );
 		// The PHP widget was a ButtonGroupWidget, so replace with a
 		// ButtonSelectWidget instead of infusing.
 		reviewModeButtonSelect = new OO.ui.ButtonSelectWidget( {