Closing dock tabs with cmd+w on mac (#3849)

* Change Close menu item accelerator

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Listening global keydown event in <Dock/>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Prevent terminal to fire custom event

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Refresh tooltip hint

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Make Tab line gray if Dock isn't focused

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/main/menu.ts

@@ -147,13 +147,18 @@ export function buildMenu(windowManager: WindowManager) {
           }
         }
       ]),
+
       { type: "separator" },
-      {
-        role: "close",
-        label: "Close Window"
-      },
+
+      ...(isMac ? [
+        {
+          role: "close",
+          label: "Close Window",
+          accelerator: "Shift+Cmd+W"
+        }
+      ] as MenuItemConstructorOptions[] : []),
+
       ...ignoreOnMac([
-        { type: "separator" },
         {
           label: "Exit",
           accelerator: "Alt+F4",

src/renderer/components/dock/dock-tab.tsx

@@ -29,6 +29,7 @@ import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import { observable, makeObservable } from "mobx";
+import { isMac } from "../../../common/vars";
 
 export interface DockTabProps extends TabProps<DockTabModel> {
   moreActions?: React.ReactNode;
@@ -94,7 +95,7 @@ export class DockTab extends React.Component<DockTabProps> {
         {!pinned && (
           <Icon
             small material="close"
-            tooltip="Close (Ctrl+Shift+W)"
+            tooltip={`Close ${isMac ? "⌘+W" : "Ctrl+W"}`}
             onClick={prevDefault(this.close)}
           />
         )}

src/renderer/components/dock/dock.scss

@@ -27,6 +27,16 @@
   display: flex;
   flex-direction: column;
 
+  &:not(:focus-within) .DockTab.active {
+    &::after {
+      color: var(--halfGray);
+    }
+
+    &:hover::after {
+      color: var(--line-color-active);
+    }
+  }
+
   &.isOpen {
     &.fullSize {
       position: fixed;

src/renderer/components/dock/dock.tsx

@@ -46,19 +46,31 @@ interface Props {
 
 @observer
 export class Dock extends React.Component<Props> {
-  onKeydown = (evt: React.KeyboardEvent<HTMLElement>) => {
-    const { close, closeTab, selectedTab } = dockStore;
+  private element = React.createRef<HTMLDivElement>();
 
-    if (!selectedTab) return;
-    const { code, ctrlKey, shiftKey } = evt.nativeEvent;
+  componentDidMount() {
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  }
+
+  onKeyDown = (evt: KeyboardEvent) => {
+    const { close, selectedTab, closeTab } = dockStore;
+    const { code, ctrlKey, metaKey, shiftKey } = evt;
+    // Determine if user working inside <Dock/> or using any other areas in app
+    const dockIsFocused = this.element?.current.contains(document.activeElement);
+
+    if (!selectedTab || !dockIsFocused) return;
 
     if (shiftKey && code === "Escape") {
       close();
     }
 
-    if (ctrlKey && code === "KeyW") {
-      if (selectedTab.pinned) close();
-      else closeTab(selectedTab.id);
+    if ((ctrlKey && code === "KeyW") || (metaKey && code === "KeyW")) {
+      closeTab(selectedTab.id);
+      this.element?.current.focus();  // Avoid loosing focus when closing tab
     }
   };
 
@@ -67,6 +79,7 @@ export class Dock extends React.Component<Props> {
 
     open();
     selectTab(tab.id);
+    this.element?.current.focus();
   };
 
   renderTab(tab: DockTab) {
@@ -105,7 +118,7 @@ export class Dock extends React.Component<Props> {
     return (
       <div
         className={cssNames("Dock", className, { isOpen, fullSize })}
-        onKeyDown={this.onKeydown}
+        ref={this.element}
         tabIndex={-1}
       >
         <ResizingAnchor

src/renderer/components/dock/terminal.ts

@@ -222,7 +222,7 @@ export class Terminal {
   };
 
   keyHandler = (evt: KeyboardEvent): boolean => {
-    const { code, ctrlKey, type, metaKey } = evt;
+    const { code, ctrlKey, metaKey } = evt;
 
     // Handle custom hotkey bindings
     if (ctrlKey) {
@@ -248,11 +248,6 @@ export class Terminal {
       }
     }
 
-    // Pass the event above in DOM for <Dock/> to handle common actions
-    if (!evt.defaultPrevented) {
-      this.elem.dispatchEvent(new KeyboardEvent(type, evt));
-    }
-
     return true;
   };
 }