From 0a5b732894cc73985bd6aa262682f956413a08bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Tue, 28 Jul 2020 14:41:05 +0200
Subject: [PATCH 1/4] Toggle Inspector on global ALT+F12 keyboard shortcut.

---
 src/ui.js | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/ui.js b/src/ui.js
index 8784d7c..91512ee 100644
--- 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,11 +118,17 @@ 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' : ''
@@ -130,6 +136,20 @@ class ToggleButtonVisual extends Component {
 				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.key === 'F12';
+}

From f6f1a3a3cfd9fb02fa5f558469ec0545d9688488 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Tue, 28 Jul 2020 14:41:25 +0200
Subject: [PATCH 2/4] Add test for toggling Inspector on global ALT+F12
 keyboard shortcut.

---
 tests/inspector/ui.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/tests/inspector/ui.js b/tests/inspector/ui.js
index 99670ca..af00a07 100644
--- a/tests/inspector/ui.js
+++ b/tests/inspector/ui.js
@@ -22,6 +22,8 @@ import {
 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 +36,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 +82,8 @@ describe( '<InspectorUI />', () => {
 		editor1Element.remove();
 		editor2Element.remove();
 
+		window.addEventListener = origAddEventListener;
+
 		return Promise.all( Array.from( editors )
 			.map( ( [ , editor ] ) => editor.destroy() ) );
 	} );
@@ -340,6 +350,17 @@ 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', () => {
+						const toggle = getToggle();
+						const button = toggle.find( 'button' );
+
+						expect( button ).to.not.have.className( 'ck-inspector-navbox__navigation__toggle_up' );
+
+						windowEventMap.keydown( { key: 'F12', altKey: true } );
+
+						expect( getToggle().find( 'button' ) ).to.have.className( 'ck-inspector-navbox__navigation__toggle_up' );
+					} );
 				} );
 			} );
 

From af16a9d48e65c2974ed4f18010766b5dabb2d0e3 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Wed, 29 Jul 2020 10:37:52 +0200
Subject: [PATCH 3/4] Tests: Fixed a broken test due to redux store mock. Fixed
 broken legacy assertions in another test.

---
 tests/inspector/ui.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/tests/inspector/ui.js b/tests/inspector/ui.js
index af00a07..f2db077 100644
--- a/tests/inspector/ui.js
+++ b/tests/inspector/ui.js
@@ -16,7 +16,8 @@ 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 />', () => {
@@ -336,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( {
@@ -352,14 +354,11 @@ describe( '<InspectorUI />', () => {
 					} );
 
 					it( 'should toggle the UI on a global ALT+F12 keyboard shortcut', () => {
-						const toggle = getToggle();
-						const button = toggle.find( 'button' );
-
-						expect( button ).to.not.have.className( 'ck-inspector-navbox__navigation__toggle_up' );
-
 						windowEventMap.keydown( { key: 'F12', altKey: true } );
 
-						expect( getToggle().find( 'button' ) ).to.have.className( 'ck-inspector-navbox__navigation__toggle_up' );
+						sinon.assert.calledWithExactly( dispatchSpy.lastCall, {
+							type: TOGGLE_IS_COLLAPSED
+						} );
 					} );
 				} );
 			} );

From 93ecbee42d82f99e7d884cc72e3b68794b8cbbfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Wed, 29 Jul 2020 15:23:06 +0200
Subject: [PATCH 4/4] Inspector should be toggled only on alt+f12.

---
 src/ui.js             |  2 +-
 tests/inspector/ui.js | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/ui.js b/src/ui.js
index 91512ee..6f61e84 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -180,5 +180,5 @@ function updateBodyHeight( height ) {
 }
 
 function isToggleShortcut( event ) {
-	return event.altKey && event.key === 'F12';
+	return event.altKey && !event.shiftKey && !event.ctrlKey && event.key === 'F12';
 }
diff --git a/tests/inspector/ui.js b/tests/inspector/ui.js
index f2db077..2a417a6 100644
--- a/tests/inspector/ui.js
+++ b/tests/inspector/ui.js
@@ -360,6 +360,18 @@ describe( '<InspectorUI />', () => {
 							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 );
+					} );
 				} );
 			} );