From 08eeb5ad962e4ac468d8c7453ada05f75ddad98d Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 12 Aug 2024 22:53:16 -0400 Subject: [PATCH] Get opening in a separate window working --- extension/chrome/manifest.json | 10 +- extension/src/app/Actions.tsx | 26 +---- extension/src/background/contextMenus.ts | 16 +-- extension/src/background/openWindow.ts | 103 +++++------------- .../src/background/store/apiMiddleware.ts | 10 +- extension/src/pageScript/api/openWindow.ts | 4 +- 6 files changed, 43 insertions(+), 126 deletions(-) diff --git a/extension/chrome/manifest.json b/extension/chrome/manifest.json index a03057fb..4799521a 100644 --- a/extension/chrome/manifest.json +++ b/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" diff --git a/extension/src/app/Actions.tsx b/extension/src/app/Actions.tsx index 00abd2b9..216e59af 100644 --- a/extension/src/app/Actions.tsx +++ b/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 { )} - {!window.isElectron && position !== '#left' && ( + {!window.isElectron && ( - )} - {!window.isElectron && position !== '#right' && ( - - )} - {!window.isElectron && position !== '#bottom' && ( - )} {!window.isElectron && ( diff --git a/extension/src/background/contextMenus.ts b/extension/src/background/contextMenus.ts index d8a30145..3aaed4ed 100644 --- a/extension/src/background/contextMenus.ts +++ b/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'], }); - }); + } }); } diff --git a/extension/src/background/openWindow.ts b/extension/src/background/openWindow.ts index f9622f24..d4524a2d 100644 --- a/extension/src/background/openWindow.ts +++ b/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}`); + } } diff --git a/extension/src/background/store/apiMiddleware.ts b/extension/src/background/store/apiMiddleware.ts index a8271f6f..7f24e0af 100644 --- a/extension/src/background/store/apiMiddleware.ts +++ b/extension/src/background/store/apiMiddleware.ts @@ -490,12 +490,8 @@ function messaging>( 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> = diff --git a/extension/src/pageScript/api/openWindow.ts b/extension/src/pageScript/api/openWindow.ts index f48c3b6b..de2947c9 100644 --- a/extension/src/pageScript/api/openWindow.ts +++ b/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>( message: PageScriptToContentScriptMessage, @@ -13,6 +13,6 @@ export default function openWindow(position?: Position) { post({ source: '@devtools-page', type: 'OPEN', - position: position || 'right', + position: position ?? 'window', }); }