Merge pull request #10803 from ckeditor/ck/5954-memory-leaks

Internal: Made sure `KeystrokeHandler` and `FocusTracker` instances are destroyed across the UI in the project to avoid memory leaks. Closes #10749. Closes #6561.

Tests (ckeditor5): Added a semi-automated manual test to investigate memory leaks in the editor (see #10749).

packages/ckeditor5-find-and-replace/src/ui/findandreplaceformview.js

@@ -353,6 +353,16 @@ export default class FindAndReplaceFormView extends View {
 		this._initKeystrokeHandling();
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this._focusTracker.destroy();
+		this._keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the fist {@link #_focusables} in the form.
 	 */

packages/ckeditor5-find-and-replace/tests/ui/findandreplaceformview.js

@@ -673,6 +673,24 @@ describe( 'FindAndReplaceFormView', () => {
 		} );
 	} );
 
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view._focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view._keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
 	describe( 'focus()', () => {
 		it( 'should focus the #findInputView', () => {
 			const spy = sinon.spy( view._findInputView, 'focus' );

packages/ckeditor5-font/src/ui/colortableview.js

@@ -235,6 +235,16 @@ export default class ColorTableView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Appends {@link #staticColorsGrid} and {@link #documentColorsGrid} views.
 	 */

packages/ckeditor5-font/tests/ui/colortableview.js

@@ -145,6 +145,24 @@ describe( 'ColorTableView', () => {
 		} );
 	} );
 
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( colorTableView.focusTracker, 'destroy' );
+
+			colorTableView.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( colorTableView.keystrokes, 'destroy' );
+
+			colorTableView.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
 	describe( 'focus tracker', () => {
 		it( 'should focus first child of colorTableView in DOM', () => {
 			const spy = sinon.spy( colorTableView._focusCycler, 'focusFirst' );

packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js

@@ -203,6 +203,16 @@ export default class ImageInsertPanelView extends View {
 		}, { priority: 'high' } );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Returns a view of the integration.
 	 *

packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js

@@ -151,6 +151,16 @@ export default class TextAlternativeFormView extends View {
 			} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Creates the button view.
 	 *

packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js

@@ -271,6 +271,24 @@ describe( 'ImageUploadPanelView', () => {
 		} );
 	} );
 
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
 	describe( 'focus()', () => {
 		it( 'should focus on the first integration', () => {
 			const spy = sinon.spy( view.getIntegration( 'insertImageViaUrl' ), 'focus' );

packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js

@@ -150,6 +150,24 @@ describe( 'TextAlternativeFormView', () => {
 		} );
 	} );
 
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
 	describe( 'DOM bindings', () => {
 		describe( 'submit event', () => {
 			it( 'should trigger submit event', () => {

packages/ckeditor5-link/src/ui/linkactionsview.js

@@ -155,6 +155,16 @@ export default class LinkActionsView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the fist {@link #_focusables} in the actions.
 	 */

packages/ckeditor5-link/src/ui/linkformview.js

@@ -200,6 +200,16 @@ export default class LinkFormView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the fist {@link #_focusables} in the form.
 	 */

packages/ckeditor5-link/tests/ui/linkactionsview.js

@@ -199,6 +199,24 @@ describe( 'LinkActionsView', () => {
 		} );
 	} );
 
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
 	describe( 'focus()', () => {
 		it( 'focuses the #previewButtonView', () => {
 			const spy = sinon.spy( view.previewButtonView, 'focus' );

packages/ckeditor5-link/tests/ui/linkformview.js

@@ -171,6 +171,24 @@ describe( 'LinkFormView', () => {
 		} );
 	} );
 
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
 	describe( 'DOM bindings', () => {
 		describe( 'submit event', () => {
 			it( 'should trigger submit event', () => {

packages/ckeditor5-media-embed/src/ui/mediaformview.js

@@ -210,6 +210,16 @@ export default class MediaFormView extends View {
 		}, { priority: 'high' } );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the fist {@link #_focusables} in the form.
 	 */

packages/ckeditor5-media-embed/tests/ui/mediaformview.js

@@ -220,6 +220,24 @@ describe( 'MediaFormView', () => {
 		} );
 	} );
 
+	describe( 'destroy()', () => {
+		it( 'should destroy the FocusTracker instance', () => {
+			const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+
+		it( 'should destroy the KeystrokeHandler instance', () => {
+			const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+			view.destroy();
+
+			sinon.assert.calledOnce( destroySpy );
+		} );
+	} );
+
 	describe( 'DOM bindings', () => {
 		describe( 'submit event', () => {
 			it( 'should trigger submit event', () => {

packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -430,6 +430,16 @@ export default class TableCellPropertiesView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the fist focusable field in the form.
 	 */

packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -379,6 +379,16 @@ export default class TablePropertiesView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Focuses the fist focusable field in the form.
 	 */

packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js

@@ -760,6 +760,24 @@ describe( 'table cell properties', () => {
 			} );
 		} );
 
+		describe( 'destroy()', () => {
+			it( 'should destroy the FocusTracker instance', () => {
+				const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+				view.destroy();
+
+				sinon.assert.calledOnce( destroySpy );
+			} );
+
+			it( 'should destroy the KeystrokeHandler instance', () => {
+				const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+				view.destroy();
+
+				sinon.assert.calledOnce( destroySpy );
+			} );
+		} );
+
 		describe( 'DOM bindings', () => {
 			describe( 'submit event', () => {
 				it( 'should trigger submit event', () => {

packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js

@@ -693,6 +693,24 @@ describe( 'table properties', () => {
 			} );
 		} );
 
+		describe( 'destroy()', () => {
+			it( 'should destroy the FocusTracker instance', () => {
+				const destroySpy = sinon.spy( view.focusTracker, 'destroy' );
+
+				view.destroy();
+
+				sinon.assert.calledOnce( destroySpy );
+			} );
+
+			it( 'should destroy the KeystrokeHandler instance', () => {
+				const destroySpy = sinon.spy( view.keystrokes, 'destroy' );
+
+				view.destroy();
+
+				sinon.assert.calledOnce( destroySpy );
+			} );
+		} );
+
 		describe( 'DOM bindings', () => {
 			describe( 'submit event', () => {
 				it( 'should trigger submit event', () => {

packages/ckeditor5-ui/src/colorgrid/colorgridview.js

@@ -176,6 +176,16 @@ export default class ColorGridView extends View {
 		this.keystrokes.listenTo( this.element );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this.focusTracker.destroy();
+		this.keystrokes.destroy();
+	}
+
 	/**
 	 * Fired when the `ColorTileView` for the picked item is executed.
 	 *