Added closing a tab on the middle mouse click

Author: Chugunov Roman

src/main/webContent/Tabs.ts

@@ -28,7 +28,7 @@ class Tabs implements ITabs {
         });
         tab.setBounds(options);
         tab.webContents.loadURL(url);
-        isDev && tab.webContents.toggleDevTools();
+        // isDev && tab.webContents.toggleDevTools();
 
         Tabs.tabs.push(tab);
 

src/main/webContent/WindowManager.ts

@@ -78,7 +78,8 @@ class WindowManager implements IWindowManager {
             }, 600);
 
             if (isDev) this.devtools();
-            if (isDev) this.mainWindow.webContents.toggleDevTools();
+            if (isDev) this.mainWindow.webContents.openDevTools({ mode: 'detach' });
+            // if (isDev) this.mainWindow.webContents.toggleDevTools();
         });
         E.app.on('window-all-closed', this.onWindowAllClosed);
 

src/renderer/components/Tabs/index.tsx

@@ -1,4 +1,6 @@
+/// <reference path="../../../../@types/common/index.d.ts" />
 /// <reference path="../../../../@types/renderer/stores/index.d.ts" />
+
 import { ipcRenderer } from "electron";
 import { Component } from "react";
 import { h } from 'preact';
@@ -23,7 +25,7 @@ class Tabs extends Component<TabsProps, {}> {
         this.props = props;
     }
 
-    private close = (e: React.MouseEvent<HTMLDivElement> & Event, id: number) => {
+    private close = (e: MouseEvent & Event, id: number) => {
         e.stopPropagation();
         e.stopImmediatePropagation();
 
@@ -44,12 +46,29 @@ class Tabs extends Component<TabsProps, {}> {
                 1
         );
     }
-    
+
     private newTab = () => {
         ipcRenderer.send('newtab');
     }
 
-    private focus = (e: React.MouseEvent<HTMLDivElement> & Event, id: number) => {
+    private clickTab = (event: MouseEvent & Event, tab: Tab) => {
+        switch(event.button) {
+            // Handle left click, set focuse on the target tab 
+            case 0: {
+                this.focus(event, tab.id);
+            } break;
+            // Handle middle click, close tab
+            case 1: {
+                this.close(event, tab.id);
+            } break;
+            // Handle right click, invoke the popup menu
+            case 2: {
+                // console.log('clickTab right click, ', event.button);
+            } break;
+        }
+    }
+
+    private focus = (e: MouseEvent & Event, id: number) => {
         e.stopPropagation();
         e.stopImmediatePropagation();
 
@@ -63,10 +82,9 @@ class Tabs extends Component<TabsProps, {}> {
                 tabs={toJS(this.props.tabs) as ITabsStore}
                 close={this.close}
                 newTab={this.newTab}
-                focus={this.focus}
+                clickTab={this.clickTab}
             />
         )
-
     }
 }
 

src/renderer/components/Tabs/tabs.tsx

@@ -1,11 +1,12 @@
+/// <reference path="../../../../@types/common/index.d.ts" />
 /// <reference path="../../../../@types/renderer/stores/index.d.ts" />
 import { h } from 'preact';
 
 interface Props {
     tabs: ITabsStore;
 
-    close(e: React.MouseEvent<HTMLDivElement> & Event, id: number): void
-    focus(e: React.MouseEvent<HTMLDivElement> & Event, id: number): void
+    close(e: MouseEvent & Event, id: number): void
+    clickTab(e: MouseEvent & Event, tab: Tab): void
     newTab(): void
 }
 
@@ -18,9 +19,12 @@ function Tabs(props: Props) {
                 </svg>
             </div>
             {props.tabs.tabs.map(t => (
-                <div className={`tab ${props.tabs.current === t.id ? 'active' : ''}`} onClick={(e) => props.focus(e as React.MouseEvent<HTMLDivElement> & Event, t.id)}>
+                <div
+                    className={`tab ${props.tabs.current === t.id ? 'active' : ''}`}
+                    onMouseDown={(e) => props.clickTab(e, t)}
+                >
                     <span>{t.title}</span>
-                    <div className="tabClose" onClick={(e) => props.close(e as React.MouseEvent<HTMLDivElement> & Event, t.id)}>
+                    <div className="tabClose" onClick={(e) => props.close(e, t.id)}>
                         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 21.9 21.9" enable-background="new 0 0 21.9 21.9" width="8px" height="8px">
                             <path d="M14.1,11.3c-0.2-0.2-0.2-0.5,0-0.7l7.5-7.5c0.2-0.2,0.3-0.5,0.3-0.7s-0.1-0.5-0.3-0.7l-1.4-1.4C20,0.1,19.7,0,19.5,0  c-0.3,0-0.5,0.1-0.7,0.3l-7.5,7.5c-0.2,0.2-0.5,0.2-0.7,0L3.1,0.3C2.9,0.1,2.6,0,2.4,0S1.9,0.1,1.7,0.3L0.3,1.7C0.1,1.9,0,2.2,0,2.4  s0.1,0.5,0.3,0.7l7.5,7.5c0.2,0.2,0.2,0.5,0,0.7l-7.5,7.5C0.1,19,0,19.3,0,19.5s0.1,0.5,0.3,0.7l1.4,1.4c0.2,0.2,0.5,0.3,0.7,0.3  s0.5-0.1,0.7-0.3l7.5-7.5c0.2-0.2,0.5-0.2,0.7,0l7.5,7.5c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l1.4-1.4c0.2-0.2,0.3-0.5,0.3-0.7  s-0.1-0.5-0.3-0.7L14.1,11.3z" fill="#FFFFFF"/>
                         </svg>