Cleanup keyboard shortcuts and add a toggle sidebar shortcut (replayi…

…o#4619)
hbenl · Nov 23, 2021 · 262380d · 262380d
1 parent 5babb7e
commit 262380d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/devtools/client/debugger/src/components/App.js b/src/devtools/client/debugger/src/components/App.js
@@ -10,7 +10,6 @@ import { features } from "../utils/prefs";
 import { prefs } from "../../../../../ui/utils/prefs";
 import actions from "../actions";
 import { setUnexpectedError } from "ui/actions/session";
-import { setSelectedPrimaryPanel } from "ui/actions/app";
 import A11yIntention from "./A11yIntention";
 import { ShortcutsModal } from "./ShortcutsModal";
 import SplitBox from "devtools/client/shared/components/splitter/SplitBox";
@@ -24,7 +23,7 @@ import {
   getSelectedSource,
 } from "../selectors";
 
-import { getSelectedPanel, getSelectedPrimaryPanel, getShowEditor } from "ui/reducers/app.ts";
+import { getSelectedPanel, getShowEditor } from "ui/reducers/app.ts";
 import { useGetUserSettings } from "ui/hooks/settings";
 
 import KeyShortcuts from "devtools/client/shared/key-shortcuts";
@@ -82,7 +81,6 @@ class Debugger extends Component {
     globalShortcuts.on("CmdOrCtrl+Shift+P", this.toggleSourceQuickOpenModal);
     globalShortcuts.on("CmdOrCtrl+Shift+O", this.toggleFunctionQuickOpenModal);
     globalShortcuts.on("CmdOrCtrl+P", this.toggleSourceQuickOpenModal);
-    globalShortcuts.on("CmdOrCtrl+Shift+F", this.toggleFullTextSearch);
 
     if (this.props.enableGlobalSearch) {
       globalShortcuts.on("CmdOrCtrl+O", this.toggleProjectFunctionQuickOpenModal);
@@ -99,7 +97,6 @@ class Debugger extends Component {
     globalShortcuts.off("CmdOrCtrl+Shift+P", this.toggleSourceQuickOpenModal);
     globalShortcuts.off("CmdOrCtrl+Shift+O", this.toggleFunctionQuickOpenModal);
     globalShortcuts.off("CmdOrCtrl+P", this.toggleSourceQuickOpenModal);
-    globalShortcuts.off("CmdOrCtrl+Shift+F", this.toggleFullTextSearch);
 
     if (this.props.enableGlobalSearch) {
       globalShortcuts.off("CmdOrCtrl+O", this.toggleProjectFunctionQuickOpenModal);
@@ -151,14 +148,6 @@ class Debugger extends Component {
     return this.props.orientation === "horizontal";
   }
 
-  toggleFullTextSearch = () => {
-    if (this.props.selectedPrimaryPanel != "search") {
-      this.props.setSelectedPrimaryPanel("search");
-    } else {
-      this.props.togglePaneCollapse();
-    }
-  };
-
   toggleFunctionQuickOpenModal = e => {
     this.toggleQuickOpenModal(e, "@");
   };
@@ -335,7 +324,6 @@ function DebuggerLoader(props) {
 
 const mapStateToProps = state => ({
   activeSearch: getActiveSearch(state),
-  selectedPrimaryPanel: getSelectedPrimaryPanel(state),
   orientation: getOrientation(state),
   quickOpenEnabled: getQuickOpenEnabled(state),
   selectedPanel: getSelectedPanel(state),
@@ -349,7 +337,5 @@ export default connect(mapStateToProps, {
   openQuickOpen: actions.openQuickOpen,
   closeQuickOpen: actions.closeQuickOpen,
   refreshCodeMirror: actions.refreshCodeMirror,
-  togglePaneCollapse: actions.togglePaneCollapse,
-  setSelectedPrimaryPanel,
   setUnexpectedError,
 })(DebuggerLoader);
diff --git a/src/ui/components/KeyboardShortcuts.tsx b/src/ui/components/KeyboardShortcuts.tsx
@@ -16,7 +16,12 @@ function setupShortcuts() {
 
 const globalShortcuts = setupShortcuts();
 
-function KeyboardShortcuts({ viewMode, setSelectedPrimaryPanel, setViewMode }: PropsFromRedux) {
+function KeyboardShortcuts({
+  viewMode,
+  setSelectedPrimaryPanel,
+  togglePaneCollapse,
+  setViewMode,
+}: PropsFromRedux) {
   const openFullTextSearch = () => {
     if (viewMode !== "dev") {
       setViewMode("dev");
@@ -25,16 +30,22 @@ function KeyboardShortcuts({ viewMode, setSelectedPrimaryPanel, setViewMode }: P
     trackEvent("key_shortcut.full_text_search");
     setSelectedPrimaryPanel("search");
   };
+  const toggleLeftSidebar = () => {
+    trackEvent("key_shortcut.toggle_left_sidebar");
+    togglePaneCollapse();
+  };
 
   // The shortcuts have to be reassigned every time the dependencies change,
   // otherwise we end up with a stale prop.
   useEffect(() => {
     if (!globalShortcuts) return;
 
     globalShortcuts.on("CmdOrCtrl+Shift+F", openFullTextSearch);
+    globalShortcuts.on("CmdOrCtrl+B", toggleLeftSidebar);
 
     return () => {
       globalShortcuts.off("CmdOrCtrl+Shift+F", openFullTextSearch);
+      globalShortcuts.off("CmdOrCtrl+B", toggleLeftSidebar);
     };
   }, [viewMode]);
 
@@ -46,7 +57,11 @@ const connector = connect(
     selectedPrimaryPanel: selectors.getSelectedPrimaryPanel(state),
     viewMode: selectors.getViewMode(state),
   }),
-  { setSelectedPrimaryPanel: actions.setSelectedPrimaryPanel, setViewMode: actions.setViewMode }
+  {
+    setSelectedPrimaryPanel: actions.setSelectedPrimaryPanel,
+    setViewMode: actions.setViewMode,
+    togglePaneCollapse: actions.togglePaneCollapse,
+  }
 );
 type PropsFromRedux = ConnectedProps<typeof connector>;
 export default connector(KeyboardShortcuts);