diff --git a/extension/build.mjs b/extension/build.mjs index 86971a68..fa4faeec 100644 --- a/extension/build.mjs +++ b/extension/build.mjs @@ -22,7 +22,6 @@ await esbuild.build({ entryPoints: [ { out: 'background.bundle', in: 'src/background/index.ts' }, { out: 'options.bundle', in: 'src/options/index.tsx' }, - { out: 'window.bundle', in: 'src/window/index.tsx' }, { out: 'remote.bundle', in: 'src/remote/index.tsx' }, { out: 'devpanel.bundle', in: 'src/devpanel/index.tsx' }, { out: 'devtools.bundle', in: 'src/devtools/index.ts' }, @@ -48,7 +47,7 @@ if (prod) { console.log(); console.log('Creating HTML files...'); -const htmlFiles = ['devpanel', 'devtools', 'options', 'remote', 'window']; +const htmlFiles = ['devpanel', 'devtools', 'options', 'remote']; for (const htmlFile of htmlFiles) { fs.writeFileSync( `dist/${htmlFile}.html`, diff --git a/extension/src/background/openWindow.ts b/extension/src/background/openWindow.ts index 2c3f1db0..f9622f24 100644 --- a/extension/src/background/openWindow.ts +++ b/extension/src/background/openWindow.ts @@ -58,7 +58,7 @@ export default function openDevToolsWindow(position: DevToolsPosition) { width: 380, height: window.screen.availHeight, }; - let url = 'window.html'; + let url = 'devpanel.html'; switch (position) { case 'devtools-right': params.left = diff --git a/extension/src/window/index.tsx b/extension/src/window/index.tsx deleted file mode 100644 index 6f40e055..00000000 --- a/extension/src/window/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client'; -import { Provider } from 'react-redux'; -import { PersistGate } from 'redux-persist/integration/react'; -import { UPDATE_STATE } from '@redux-devtools/app'; -import App from '../app/App'; -import configureStore from './store/windowStore'; -import type { MonitorMessage } from '../background/store/apiMiddleware'; - -const position = location.hash; - -chrome.runtime.getBackgroundPage((window) => { - const { store } = window!; - const { store: localStore, persistor } = configureStore(store, position); - let name = 'monitor'; - if (chrome && chrome.devtools && chrome.devtools.inspectedWindow) { - name += chrome.devtools.inspectedWindow.tabId; - } - const bg = chrome.runtime.connect({ name }); - const update = (action?: MonitorMessage) => { - localStore.dispatch(action || { type: UPDATE_STATE }); - }; - bg.onMessage.addListener(update); - update(); - - const root = createRoot(document.getElementById('root')!); - root.render( - - - - - , - ); -}); - -if (position === '#popup') document.body.style.minWidth = '760px'; -if (position !== '#popup') document.body.style.minHeight = '100%'; diff --git a/extension/src/window/store/instanceSelectorMiddleware.ts b/extension/src/window/store/instanceSelectorMiddleware.ts deleted file mode 100644 index 7587cb8d..00000000 --- a/extension/src/window/store/instanceSelectorMiddleware.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Dispatch, Middleware, MiddlewareAPI } from 'redux'; -import { - SELECT_INSTANCE, - StoreAction, - StoreState, - UPDATE_STATE, -} from '@redux-devtools/app'; - -function selectInstance( - tabId: number, - store: MiddlewareAPI, StoreState>, - next: (action: unknown) => unknown, -) { - const instances = store.getState().instances; - if (instances.current === 'default') return; - const connections = instances.connections[tabId]; - if (connections && connections.length === 1) { - next({ type: SELECT_INSTANCE, selected: connections[0] }); - } -} - -function getCurrentTabId(next: (tabId: number) => void) { - chrome.tabs.query( - { - active: true, - lastFocusedWindow: true, - }, - (tabs) => { - const tab = tabs[0]; - if (!tab) return; - next(tab.id!); - }, - ); -} - -const popupSelector: Middleware<{}, StoreState, Dispatch> = - (store) => (next) => (untypedAction) => { - const action = untypedAction as StoreAction; - - const result = next(action); - if (action.type === UPDATE_STATE) { - if (chrome.devtools && chrome.devtools.inspectedWindow) { - selectInstance(chrome.devtools.inspectedWindow.tabId, store, next); - } else { - getCurrentTabId((tabId) => selectInstance(tabId, store, next)); - } - } - return result; - }; - -export default popupSelector; diff --git a/extension/src/window/store/instancesReducer.ts b/extension/src/window/store/instancesReducer.ts deleted file mode 100644 index 29497656..00000000 --- a/extension/src/window/store/instancesReducer.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { - instancesInitialState, - dispatchAction, - UPDATE_STATE, - SELECT_INSTANCE, - LIFTED_ACTION, - SET_PERSIST, -} from '@redux-devtools/app'; -import type { - ExpandedUpdateStateAction, - WindowStoreAction, -} from './windowStore'; - -export default function instances( - state = instancesInitialState, - action: WindowStoreAction, -) { - switch (action.type) { - case UPDATE_STATE: - return { - ...(action as ExpandedUpdateStateAction).instances, - selected: state.selected, - }; - case LIFTED_ACTION: - if (action.message === 'DISPATCH') return dispatchAction(state, action); - return state; - case SELECT_INSTANCE: - return { ...state, selected: action.selected }; - case SET_PERSIST: - return { ...state, persisted: action.payload }; - default: - return state; - } -} diff --git a/extension/src/window/store/windowReducer.ts b/extension/src/window/store/windowReducer.ts deleted file mode 100644 index dab281c9..00000000 --- a/extension/src/window/store/windowReducer.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { combineReducers, Reducer } from 'redux'; -import { - connection, - monitor, - notification, - reports, - section, - socket, - theme, - stateTreeSettings, - StoreState, -} from '@redux-devtools/app'; -import instances from './instancesReducer'; -import type { WindowStoreAction } from './windowStore'; - -const rootReducer: Reducer< - StoreState, - WindowStoreAction, - Partial -> = combineReducers({ - instances, - monitor, - socket, - reports, - notification, - section, - theme, - connection, - stateTreeSettings, -}) as any; - -export default rootReducer; diff --git a/extension/src/window/store/windowStore.ts b/extension/src/window/store/windowStore.ts deleted file mode 100644 index ce746a92..00000000 --- a/extension/src/window/store/windowStore.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { - createStore, - compose, - applyMiddleware, - Store, - StoreEnhancer, - Reducer, -} from 'redux'; -import localForage from 'localforage'; -import { persistReducer, persistStore } from 'redux-persist'; -import { - api, - CONNECT_REQUEST, - exportStateMiddleware, - InstancesState, - StoreActionWithoutUpdateState, - StoreState, - UpdateStateAction, -} from '@redux-devtools/app'; -import syncStores from './windowSyncMiddleware'; -import instanceSelector from './instanceSelectorMiddleware'; -import rootReducer from './windowReducer'; -import type { BackgroundState } from '../../background/store/backgroundReducer'; -import type { BackgroundAction } from '../../background/store/backgroundStore'; -import type { - EmptyUpdateStateAction, - NAAction, -} from '../../background/store/apiMiddleware'; - -export interface ExpandedUpdateStateAction extends UpdateStateAction { - readonly instances: InstancesState; -} - -export type WindowStoreAction = - | StoreActionWithoutUpdateState - | ExpandedUpdateStateAction - | NAAction - | EmptyUpdateStateAction; - -const persistConfig = { - key: 'redux-devtools', - blacklist: ['instances', 'socket'], - storage: localForage, -}; - -const persistedReducer: Reducer = persistReducer( - persistConfig, - rootReducer, -) as any; - -export default function configureStore( - baseStore: Store, - position: string, -) { - let enhancer: StoreEnhancer; - const middlewares = [exportStateMiddleware, api, syncStores(baseStore)]; - if (!position || position === '#popup') { - // select current tab instance for devPanel and pageAction - middlewares.push(instanceSelector); - } - if (process.env.NODE_ENV === 'production') { - enhancer = applyMiddleware(...middlewares); - } else { - enhancer = compose( - applyMiddleware(...middlewares), - window.__REDUX_DEVTOOLS_EXTENSION__ - ? window.__REDUX_DEVTOOLS_EXTENSION__() - : (noop: unknown) => noop, - ); - } - const store = createStore(persistedReducer, enhancer); - const persistor = persistStore(store as Store, null, () => { - if (store.getState().connection.type !== 'disabled') { - store.dispatch({ - type: CONNECT_REQUEST, - }); - } - }); - - return { store, persistor }; -} diff --git a/extension/src/window/store/windowSyncMiddleware.ts b/extension/src/window/store/windowSyncMiddleware.ts deleted file mode 100644 index 9cdcdfa8..00000000 --- a/extension/src/window/store/windowSyncMiddleware.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { - getActiveInstance, - LIFTED_ACTION, - StoreAction, - StoreState, - TOGGLE_PERSIST, - UPDATE_STATE, -} from '@redux-devtools/app'; -import { Dispatch, Middleware, Store } from 'redux'; -import type { BackgroundState } from '../../background/store/backgroundReducer'; -import type { BackgroundAction } from '../../background/store/backgroundStore'; - -const syncStores = - ( - baseStore: Store, - ): Middleware<{}, StoreState, Dispatch> => - (store) => - (next) => - (untypedAction) => { - const action = untypedAction as StoreAction; - - if (action.type === UPDATE_STATE) { - return next({ - ...action, - instances: baseStore.getState().instances, - }); - } - if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) { - const instances = store.getState().instances; - const instanceId = getActiveInstance(instances); - const id = instances.options[instanceId].connectionId; - baseStore.dispatch({ ...action, instanceId, id } as any); - } - return next(action); - }; - -export default syncStores; diff --git a/extension/src/window/window.pug b/extension/src/window/window.pug deleted file mode 100644 index 10f1009c..00000000 --- a/extension/src/window/window.pug +++ /dev/null @@ -1,18 +0,0 @@ -doctype html - -html - head - meta(charset='UTF-8') - title Redux DevTools - include ../style.pug - - body - #root - div(style='position: relative') - img( - src='/img/loading.svg', - height=300, width=350, - style='position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -175px;' - ) - link(href='/window.bundle.css', rel='stylesheet') - script(src='/window.bundle.js')