Do not update the inspector on editor events when the UI is collapsed.

ckeditor · Jul 30, 2020 · 31f48fa · 31f48fa
1 parent 8059d72
commit 31f48fa
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 4 deletions.
diff --git a/src/ckeditorinspector.js b/src/ckeditorinspector.js
@@ -182,6 +182,7 @@ export default class CKEditorInspector {
 
 		const container = CKEditorInspector._wrapper = document.createElement( 'div' );
 		let previousEditor;
+		let wasUICollapsed;
 
 		container.className = 'ck-inspector-wrapper';
 		document.body.appendChild( container );
@@ -190,11 +191,29 @@ export default class CKEditorInspector {
 		// is changing or the view is being rendered.
 		CKEditorInspector._editorListener = new EditorListener( {
 			onModelChange() {
-				CKEditorInspector._store.dispatch( updateModelState() );
-				CKEditorInspector._store.dispatch( updateCommandsState() );
+				const store = CKEditorInspector._store;
+				const isUICollapsed = store.getState().ui.isCollapsed;
+
+				// Don't update the model and commands state if the entire inspector is collapsed.
+				// See https://github.com/ckeditor/ckeditor5-inspector/issues/80.
+				if ( isUICollapsed ) {
+					return;
+				}
+
+				store.dispatch( updateModelState() );
+				store.dispatch( updateCommandsState() );
 			},
 			onViewRender() {
-				CKEditorInspector._store.dispatch( updateViewState() );
+				const store = CKEditorInspector._store;
+				const isUICollapsed = store.getState().ui.isCollapsed;
+
+				// Don't update the view state if the entire inspector is collapsed.
+				// See https://github.com/ckeditor/ckeditor5-inspector/issues/80.
+				if ( isUICollapsed ) {
+					return;
+				}
+
+				store.dispatch( updateViewState() );
 			}
 		} );
 
@@ -234,6 +253,24 @@ export default class CKEditorInspector {
 			}
 		} );
 
+		// Watch for changes of the current editor in the global store, and update the
+		// model/view/commands state when the UI uncollapses. Normally, when the inspector
+		// is collapsed, it does not respond to changes in the model/view/commands to improve
+		// the performance and DX. See https://github.com/ckeditor/ckeditor5-inspector/issues/80.
+		CKEditorInspector._store.subscribe( () => {
+			const store = CKEditorInspector._store;
+			const isUICollapsed = store.getState().ui.isCollapsed;
+			const hasUIUncollapsed = wasUICollapsed && !isUICollapsed;
+
+			wasUICollapsed = isUICollapsed;
+
+			if ( hasUIUncollapsed ) {
+				store.dispatch( updateModelState() );
+				store.dispatch( updateCommandsState() );
+				store.dispatch( updateViewState() );
+			}
+		} );
+
 		ReactDOM.render(
 			<Provider store={CKEditorInspector._store}>
 				<InspectorUI />

diff --git a/tests/inspector/ckeditorinspector.js b/tests/inspector/ckeditorinspector.js
@@ -16,7 +16,8 @@ import {
 
 import {
 	SET_EDITORS,
-	setCurrentEditorName
+	setCurrentEditorName,
+	toggleIsCollapsed
 } from '../../src/data/actions';
 
 import { LOCAL_STORAGE_IS_COLLAPSED } from '../../src/data/reducer';
@@ -137,6 +138,19 @@ describe( 'CKEditorInspector', () => {
 				spy.restore();
 			} );
 
+			// https://github.com/ckeditor/ckeditor5-inspector/issues/80
+			it( 'should not respond to editor events when the inspector UI is collapsed', () => {
+				CKEditorInspector.attach( { foo: editor } );
+				dispatchStoreAction( toggleIsCollapsed() );
+
+				const spy = sinon.stub( CKEditorInspector._store, 'dispatch' );
+
+				editor.model.document.fire( 'change' );
+				sinon.assert.notCalled( spy );
+
+				spy.restore();
+			} );
+
 			it( 'should stop listening to editor events when the inspector is being detached', () => {
 				CKEditorInspector.attach( { foo: editor } );
 
@@ -311,6 +325,28 @@ describe( 'CKEditorInspector', () => {
 			} );
 		} );
 
+		// https://github.com/ckeditor/ckeditor5-inspector/issues/80
+		it( 'should update model/view/commands state immediatelly when the inspector UI uncollapses', () => {
+			CKEditorInspector.attach( { foo: editor } );
+
+			dispatchStoreAction( toggleIsCollapsed() );
+
+			const spy = sinon.spy( CKEditorInspector._store, 'dispatch' );
+
+			editor.model.document.fire( 'change' );
+			sinon.assert.notCalled( spy );
+
+			dispatchStoreAction( toggleIsCollapsed() );
+
+			sinon.assert.callCount( spy, 4 );
+			// Note: The 0 call was TOGGLE_IS_COLLAPSED.
+			sinon.assert.calledWithExactly( spy.getCall( 1 ), { type: UPDATE_MODEL_STATE } );
+			sinon.assert.calledWithExactly( spy.getCall( 2 ), { type: UPDATE_COMMANDS_STATE } );
+			sinon.assert.calledWithExactly( spy.getCall( 3 ), { type: UPDATE_VIEW_STATE } );
+
+			spy.restore();
+		} );
+
 		describe( 'options', () => {
 			describe( '#isCollapsed', () => {
 				it( 'should be false if unspecified', () => {