Get opening in a separate window working

extension/chrome/manifest.json

@@ -10,14 +10,8 @@
     "default_popup": "devpanel.html#popup"
   },
   "commands": {
-    "devtools-left": {
-      "description": "DevTools window to left"
-    },
-    "devtools-right": {
-      "description": "DevTools window to right"
-    },
-    "devtools-bottom": {
-      "description": "DevTools window to bottom"
+    "devtools-window": {
+      "description": "DevTools window"
     },
     "devtools-remote": {
       "description": "Remote DevTools"

extension/src/app/Actions.tsx

@@ -18,7 +18,7 @@ import {
   TopButtons,
 } from '@redux-devtools/app';
 import { GoBroadcast } from 'react-icons/go';
-import { MdBorderBottom, MdBorderLeft, MdBorderRight } from 'react-icons/md';
+import { MdOutlineWindow } from 'react-icons/md';
 import type { Position } from '../pageScript/api/openWindow';
 import type { SingleMessage } from '../background/store/apiMiddleware';
 
@@ -98,31 +98,13 @@ class Actions extends Component<Props> {
             <DispatcherButton dispatcherIsOpen={this.props.dispatcherIsOpen} />
           )}
           <Divider />
-          {!window.isElectron && position !== '#left' && (
+          {!window.isElectron && (
             <Button
               onClick={() => {
-                this.openWindow('left');
+                this.openWindow('window');
               }}
             >
-              <MdBorderLeft />
-            </Button>
-          )}
-          {!window.isElectron && position !== '#right' && (
-            <Button
-              onClick={() => {
-                this.openWindow('right');
-              }}
-            >
-              <MdBorderRight />
-            </Button>
-          )}
-          {!window.isElectron && position !== '#bottom' && (
-            <Button
-              onClick={() => {
-                this.openWindow('bottom');
-              }}
-            >
-              <MdBorderBottom />
+              <MdOutlineWindow />
             </Button>
           )}
           {!window.isElectron && (

extension/src/background/contextMenus.ts

@@ -2,29 +2,23 @@ import openDevToolsWindow, { DevToolsPosition } from './openWindow';
 
 export function createMenu() {
   const menus = [
-    { id: 'devtools-left', title: 'To left' },
-    { id: 'devtools-right', title: 'To right' },
-    { id: 'devtools-bottom', title: 'To bottom' },
-    {
-      id: 'devtools-panel',
-      title: 'Open in a panel (enable in browser settings)',
-    },
+    { id: 'devtools-window', title: 'Open in a window' },
     { id: 'devtools-remote', title: 'Open Remote DevTools' },
   ];
 
   let shortcuts: { [commandName: string]: string | undefined } = {};
   chrome.commands.getAll((commands) => {
-    commands.forEach(({ name, shortcut }) => {
+    for (const { name, shortcut } of commands) {
       shortcuts[name!] = shortcut;
-    });
+    }
 
-    menus.forEach(({ id, title }) => {
+    for (const { id, title } of menus) {
       chrome.contextMenus.create({
         id: id,
         title: title + (shortcuts[id] ? ' (' + shortcuts[id] + ')' : ''),
         contexts: ['all'],
       });
-    });
+    }
   });
 }
 

extension/src/background/openWindow.ts

@@ -1,83 +1,34 @@
-export type DevToolsPosition =
-  | 'devtools-left'
-  | 'devtools-right'
-  | 'devtools-bottom'
-  | 'devtools-panel'
-  | 'devtools-remote';
+export type DevToolsPosition = 'devtools-window' | 'devtools-remote';
 
 let windows: { [K in DevToolsPosition]?: number } = {};
-let lastPosition: DevToolsPosition | null = null;
 
 export default function openDevToolsWindow(position: DevToolsPosition) {
-  function popWindow(
-    action: string,
-    url: string,
-    customOptions: chrome.windows.CreateData & chrome.windows.UpdateInfo,
-  ) {
-    function focusIfExist(callback: () => void) {
-      if (!windows[position]) {
-        callback();
-        lastPosition = position;
-      } else {
-        let params = { focused: true };
-        if (lastPosition !== position && position !== 'devtools-panel') {
-          params = { ...params, ...customOptions };
-        }
-        chrome.windows.update(windows[position]!, params, () => {
-          lastPosition = null;
-          if (chrome.runtime.lastError) callback();
-        });
-      }
-    }
-
-    focusIfExist(() => {
-      let options: chrome.windows.CreateData = {
-        type: 'popup',
-        ...customOptions,
-      };
-      if (action === 'open') {
-        options.url = chrome.extension.getURL(
-          url + '#' + position.substr(position.indexOf('-') + 1),
-        );
-        chrome.windows.create(options, (win) => {
-          windows[position] = win!.id;
-          if (navigator.userAgent.indexOf('Firefox') !== -1) {
-            chrome.windows.update(win!.id!, {
-              focused: true,
-              ...customOptions,
-            });
-          }
-        });
-      }
+  if (!windows[position]) {
+    createWindow(position);
+  } else {
+    chrome.windows.update(windows[position]!, { focused: true }, () => {
+      if (chrome.runtime.lastError) createWindow(position);
     });
   }
-
-  let params: chrome.windows.CreateData & chrome.windows.UpdateInfo = {
-    left: 0,
-    top: 0,
-    width: 380,
-    height: window.screen.availHeight,
-  };
-  let url = 'devpanel.html';
-  switch (position) {
-    case 'devtools-right':
-      params.left =
-        (window.screen as unknown as { availLeft: number }).availLeft +
-        window.screen.availWidth -
-        params.width!;
-      break;
-    case 'devtools-bottom':
-      params.height = 420;
-      params.top = window.screen.height - params.height;
-      params.width = window.screen.availWidth;
-      break;
-    case 'devtools-panel':
-      params.type = 'panel';
-      break;
-    case 'devtools-remote':
-      params = { width: 850, height: 600 };
-      url = 'remote.html';
-      break;
-  }
-  popWindow('open', url, params);
+}
+
+function createWindow(position: DevToolsPosition) {
+  const url = chrome.runtime.getURL(getPath(position));
+  chrome.windows.create({ type: 'popup', url }, (win) => {
+    windows[position] = win!.id;
+    if (navigator.userAgent.indexOf('Firefox') !== -1) {
+      chrome.windows.update(win!.id!, { focused: true });
+    }
+  });
+}
+
+function getPath(position: DevToolsPosition) {
+  switch (position) {
+    case 'devtools-window':
+      return 'devpanel.html';
+    case 'devtools-remote':
+      return 'remote.html';
+    default:
+      throw new Error(`Unrecognized position: ${position}`);
+  }
 }

extension/src/background/store/apiMiddleware.ts

@@ -490,12 +490,8 @@ function messaging<S, A extends Action<string>>(
     return;
   }
   if (request.type === 'OPEN') {
-    let position: DevToolsPosition = 'devtools-left';
-    if (
-      ['remote', 'panel', 'left', 'right', 'bottom'].indexOf(
-        request.position,
-      ) !== -1
-    ) {
+    let position: DevToolsPosition = 'devtools-window';
+    if (['remote', 'window'].includes(request.position)) {
       position = ('devtools-' + request.position) as DevToolsPosition;
     }
     openDevToolsWindow(position);
@@ -649,7 +645,7 @@ chrome.runtime.onMessageExternal.addListener(messaging);
 
 chrome.notifications.onClicked.addListener((id) => {
   chrome.notifications.clear(id);
-  openDevToolsWindow('devtools-right');
+  openDevToolsWindow('devtools-window');
 });
 
 const api: Middleware<{}, BackgroundState, Dispatch<BackgroundAction>> =

extension/src/pageScript/api/openWindow.ts

@@ -1,7 +1,7 @@
 import { Action } from 'redux';
 import type { PageScriptToContentScriptMessage } from './index';
 
-export type Position = 'left' | 'right' | 'bottom' | 'panel' | 'remote';
+export type Position = 'window' | 'remote';
 
 function post<S, A extends Action<string>>(
   message: PageScriptToContentScriptMessage<S, A>,
@@ -13,6 +13,6 @@ export default function openWindow(position?: Position) {
   post({
     source: '@devtools-page',
     type: 'OPEN',
-    position: position || 'right',
+    position: position ?? 'window',
   });
 }