Merge pull request #92 from ckeditor/i/87

Feature: Made it possible to toggle the inspector using the `Alt+F12` keyboard shortcut. Closes #87.
ckeditor · Jul 30, 2020 · 8059d72 · 8059d72
2 parents a5b4e67 + 93ecbee
commit 8059d72
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/src/ui.js b/src/ui.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global document */
+/* global document, window */
 
 import React, { Component } from 'react';
 import { Rnd } from 'react-rnd';
@@ -118,18 +118,38 @@ export class DocsButton extends Component {
 }
 
 class ToggleButtonVisual extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.handleShortcut = this.handleShortcut.bind( this );
+	}
+
 	render() {
 		return <button
 			type="button"
 			onClick={this.props.toggleIsCollapsed}
-			title="Toggle inspector"
+			title="Toggle inspector (Alt+F12)"
 			className={[
 				'ck-inspector-navbox__navigation__toggle',
 				this.props.isCollapsed ? ' ck-inspector-navbox__navigation__toggle_up' : ''
 			].join( ' ' )}>
 				Toggle inspector
 		</button>;
 	}
+
+	componentDidMount() {
+		window.addEventListener( 'keydown', this.handleShortcut );
+	}
+
+	componentWillUnmount() {
+		window.removeEventListener( 'keydown', this.handleShortcut );
+	}
+
+	handleShortcut( event ) {
+		if ( isToggleShortcut( event ) ) {
+			this.props.toggleIsCollapsed();
+		}
+	}
 }
 
 export const ToggleButton = connect( ( { ui: { isCollapsed } } ) => {
@@ -158,3 +178,7 @@ export const EditorInstanceSelector = connect(
 function updateBodyHeight( height ) {
 	document.body.style.setProperty( '--ck-inspector-height', height );
 }
+
+function isToggleShortcut( event ) {
+	return event.altKey && !event.shiftKey && !event.ctrlKey && event.key === 'F12';
+}
diff --git a/tests/inspector/ui.js b/tests/inspector/ui.js
@@ -16,12 +16,15 @@ import TestEditor from '../utils/testeditor';
 
 import {
 	SET_HEIGHT,
-	SET_CURRENT_EDITOR_NAME
+	SET_CURRENT_EDITOR_NAME,
+	TOGGLE_IS_COLLAPSED
 } from '../../src/data/actions';
 
 describe( '<InspectorUI />', () => {
 	let editors, wrapper, store, editor1Element, editor2Element, dispatchSpy;
 
+	const origAddEventListener = window.addEventListener;
+	const windowEventMap = {};
 	const container = document.createElement( 'div' );
 	document.body.appendChild( container );
 
@@ -34,6 +37,12 @@ describe( '<InspectorUI />', () => {
 		document.body.appendChild( editor1Element );
 		document.body.appendChild( editor2Element );
 
+		window.addEventListener = ( event, cb ) => {
+			windowEventMap[ event ] = cb;
+
+			origAddEventListener( event, cb );
+		};
+
 		return Promise.all( [
 			TestEditor.create( editor1Element ),
 			TestEditor.create( editor2Element )
@@ -74,6 +83,8 @@ describe( '<InspectorUI />', () => {
 		editor1Element.remove();
 		editor2Element.remove();
 
+		window.addEventListener = origAddEventListener;
+
 		return Promise.all( Array.from( editors )
 			.map( ( [ , editor ] ) => editor.destroy() ) );
 	} );
@@ -326,7 +337,8 @@ describe( '<InspectorUI />', () => {
 						const toggle = getToggle();
 						const button = toggle.find( 'button' );
 
-						expect( toggle.props().onClick ).to.equal( wrapper.props().toggleIsCollapsed );
+						expect( toggle.props().toggleIsCollapsed ).to.be.a( 'function' );
+						expect( button.props().onClick ).to.equal( toggle.props().toggleIsCollapsed );
 						expect( button ).to.not.have.className( 'ck-inspector-navbox__navigation__toggle_up' );
 
 						store.dispatch( {
@@ -340,6 +352,26 @@ describe( '<InspectorUI />', () => {
 
 						expect( getToggle().find( 'button' ) ).to.have.className( 'ck-inspector-navbox__navigation__toggle_up' );
 					} );
+
+					it( 'should toggle the UI on a global ALT+F12 keyboard shortcut', () => {
+						windowEventMap.keydown( { key: 'F12', altKey: true } );
+
+						sinon.assert.calledWithExactly( dispatchSpy.lastCall, {
+							type: TOGGLE_IS_COLLAPSED
+						} );
+					} );
+
+					it( 'should not toggle the UI on a global SHIFT+ALT+F12 keyboard shortcut', () => {
+						windowEventMap.keydown( { key: 'F12', altKey: true, shiftKey: true } );
+
+						sinon.assert.notCalled( dispatchSpy );
+					} );
+
+					it( 'should not toggle the UI on a global CTRL+ALT+F12 keyboard shortcut', () => {
+						windowEventMap.keydown( { key: 'F12', altKey: true, ctrlKey: true } );
+
+						sinon.assert.notCalled( dispatchSpy );
+					} );
 				} );
 			} );