Merge pull request #25 from ckeditor/t/ckeditor5/1341

Fix: There should be no memory leaks when the editor is created and destroyed (see ckeditor/ckeditor5#1341).

Author: oleq

tests/ballooneditor.js

@@ -20,6 +20,8 @@ import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementap
 import RootElement from '@ckeditor/ckeditor5-engine/src/model/rootelement';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import { describeMemoryUsage, testMemoryUsage } from '@ckeditor/ckeditor5-core/tests/_utils/memory';
 
 describe( 'BalloonEditor', () => {
 	let editor, editorElement;
@@ -313,4 +315,17 @@ describe( 'BalloonEditor', () => {
 				.then( newEditor => newEditor.destroy() );
 		} );
 	} );
+
+	describeMemoryUsage( () => {
+		testMemoryUsage(
+			'should not grow on multiple create/destroy',
+			() => BalloonEditor
+				.create( document.querySelector( '#mem-editor' ), {
+					plugins: [ ArticlePluginSet ],
+					toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
+					image: {
+						toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+					}
+				} ) );
+	} );
 } );

tests/manual/memory.html

@@ -0,0 +1,28 @@
+<p>
+	<button id="destroyEditors">Destroy editor</button>
+	<button id="initEditors">Init editors</button>
+</p>
+
+<div id="editor-1" contenteditable="true" class="custom-class" custom-attr="foo">
+	<h2>Editor 1</h2>
+	<p>This is an editor instance. And there's <a href="http://ckeditor.com">some link</a>.</p>
+</div>
+
+<div id="editor-2" class="custom-class" custom-attr="foo">
+	<h2>Editor 2</h2>
+	<p>This is another editor instance.</p>
+	<img src="sample.jpg" />
+	<p>
+		Unlike Editor 1 it doesn't have contenteditable=true initially.
+		Check if it's editable after initializing the editors and back to non-editable after destroying them.
+	</p>
+</div>
+
+<style>
+	.custom-class {
+		margin-top: 100px;
+		margin-left: 100px;
+		margin-bottom: 100px;
+		width: 450px;
+	}
+</style>

tests/manual/memory.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console:false, document, window */
+
+import BalloonEditor from '../../src/ballooneditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+window.editors = {};
+
+/*
+ * Memory-leak safe version of balloon editor manual test does not:
+ * - define global variables (such as let editor; in main file scope)
+ * - console.log() objects
+ * - add event listeners with () => {} methods which reference other
+ */
+function initEditors() {
+	init( '#editor-1' );
+	init( '#editor-2' );
+
+	document.getElementById( 'destroyEditors' ).addEventListener( 'click', destroyEditors );
+
+	function init( selector ) {
+		BalloonEditor
+			.create( document.querySelector( selector ), {
+				plugins: [ ArticlePluginSet ],
+				toolbar: {
+					items: [
+						'heading',
+						'|',
+						'bold',
+						'italic',
+						'link',
+						'bulletedList',
+						'numberedList',
+						'blockQuote',
+						'insertTable',
+						'mediaEmbed',
+						'undo',
+						'redo'
+					]
+				},
+				image: {
+					toolbar: [
+						'imageStyle:full',
+						'imageStyle:side',
+						'|',
+						'imageTextAlternative'
+					]
+				},
+				table: {
+					contentToolbar: [
+						'tableColumn',
+						'tableRow',
+						'mergeTableCells'
+					]
+				}
+			} )
+			.then( editor => {
+				window.editors[ selector ] = editor;
+			} )
+			.catch( err => {
+				console.error( err.stack );
+			} );
+	}
+
+	function destroyEditors() {
+		for ( const selector in window.editors ) {
+			window.editors[ selector ].destroy().then( () => {
+				window.editors[ selector ] = undefined;
+			} );
+		}
+
+		document.getElementById( 'destroyEditors' ).removeEventListener( 'click', destroyEditors );
+	}
+}
+
+document.getElementById( 'initEditors' ).addEventListener( 'click', initEditors );

tests/manual/memory.md

@@ -0,0 +1,31 @@
+1. Open DevTools on Chrome.
+2. Go to Memory tab.
+3. Select "Heap snapshot" profiling type.
+4. Click "Collect Garbage" (trash icon) and "Clear all profiles" (don't go icon).
+5. Record heap snapshot ("Take heap snapshot" a record icon).
+6. Repeat multiple times:
+    - click "Init editor",
+    - wait to editor show up ,
+    - click "Destroy editor".
+7. Record heap snapshot again.
+8. Compare Snapshot 1 with Snapshot 2 and look for:
+    - "detached" - HTML Elements/DOM nodes
+    - "EventListener" - there should be only 1
+    - Any CKEditor5 classes instances like "Editor" or "LivePosition"
+
+## Notes:
+
+* Browser extensions might attach event listeners to the DOM so the safest way to run this test is by running Chrome from command line:
+
+    ```
+    google-chrome \
+        --enable-precise-memory-info \
+        --disable-extensions \
+        --disable-plugins \
+        --incognito \
+        http://localhost:8125 
+    ```
+
+    The above will run Chrome without extensions or plugins in incognito mode and open manual tests page.
+
+* Close any running Chrome instance beforehand because otherwise it will open a tab in currently opened Chrome (look for "Opening in existing browser session." in command line).