Fix monitoring on opening panel (#1739)

* Fix monitoring on opening panel

* Create polite-foxes-rest.md

* Further cleanup

* Fix

* Simplify

* ===
This commit is contained in:
Nathan Bierema 2024-08-31 17:10:34 -04:00 committed by GitHub
parent e49708d831
commit fd9f9504f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 51 deletions

View File

@ -0,0 +1,5 @@
---
'remotedev-redux-devtools-extension': patch
---
Fix monitoring on opening panel

View File

@ -161,10 +161,6 @@ export type UpdateStateRequest<S, A extends Action<string>> =
| SerializedActionMessage | SerializedActionMessage
| SerializedStateMessage<S, A>; | SerializedStateMessage<S, A>;
export interface EmptyUpdateStateAction {
readonly type: typeof UPDATE_STATE;
}
interface UpdateStateAction<S, A extends Action<string>> { interface UpdateStateAction<S, A extends Action<string>> {
readonly type: typeof UPDATE_STATE; readonly type: typeof UPDATE_STATE;
request: UpdateStateRequest<S, A>; request: UpdateStateRequest<S, A>;
@ -213,11 +209,6 @@ export type PanelMessage<S, A extends Action<string>> =
export type PanelMessageWithSplitAction<S, A extends Action<string>> = export type PanelMessageWithSplitAction<S, A extends Action<string>> =
| PanelMessage<S, A> | PanelMessage<S, A>
| SplitUpdateStateAction<S, A>; | SplitUpdateStateAction<S, A>;
export type MonitorMessage =
| NAAction
| ErrorMessage
| EmptyUpdateStateAction
| SetPersistAction;
type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & { type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
postMessage: (message: TabMessage) => void; postMessage: (message: TabMessage) => void;
@ -227,20 +218,15 @@ type PanelPort = Omit<chrome.runtime.Port, 'postMessage'> & {
message: PanelMessageWithSplitAction<S, A>, message: PanelMessageWithSplitAction<S, A>,
) => void; ) => void;
}; };
type MonitorPort = Omit<chrome.runtime.Port, 'postMessage'> & {
postMessage: (message: MonitorMessage) => void;
};
export const CONNECTED = 'socket/CONNECTED'; export const CONNECTED = 'socket/CONNECTED';
export const DISCONNECTED = 'socket/DISCONNECTED'; export const DISCONNECTED = 'socket/DISCONNECTED';
const connections: { const connections: {
readonly tab: { [K in number | string]: TabPort }; readonly tab: { [K in number | string]: TabPort };
readonly panel: { [K in number | string]: PanelPort }; readonly panel: { [K in number | string]: PanelPort };
readonly monitor: { [K in number | string]: MonitorPort };
} = { } = {
tab: {}, tab: {},
panel: {}, panel: {},
monitor: {},
}; };
const chunks: { const chunks: {
[instanceId: string]: PageScriptToContentScriptMessageForwardedToMonitors< [instanceId: string]: PageScriptToContentScriptMessageForwardedToMonitors<
@ -249,7 +235,6 @@ const chunks: {
>; >;
} = {}; } = {};
let monitors = 0; let monitors = 0;
let isMonitored = false;
const getId = (sender: chrome.runtime.MessageSender, name?: string) => const getId = (sender: chrome.runtime.MessageSender, name?: string) =>
sender.tab ? sender.tab.id! : name || sender.id!; sender.tab ? sender.tab.id! : name || sender.id!;
@ -264,10 +249,7 @@ type MonitorAction<S, A extends Action<string>> =
const maxChromeMsgSize = 32 * 1024 * 1024; const maxChromeMsgSize = 32 * 1024 * 1024;
function toMonitors<S, A extends Action<string>>(action: MonitorAction<S, A>) { function toMonitors<S, A extends Action<string>>(action: MonitorAction<S, A>) {
for (const port of [ for (const port of Object.values(connections.panel)) {
...Object.values(connections.monitor),
...Object.values(connections.panel),
]) {
try { try {
port.postMessage(action); port.postMessage(action);
} catch (err) { } catch (err) {
@ -412,19 +394,6 @@ function toAllTabs(msg: TabMessage) {
} }
} }
function monitorInstances(shouldMonitor: boolean, id?: string) {
if (!id && isMonitored === shouldMonitor) return;
const action = {
type: shouldMonitor ? ('START' as const) : ('STOP' as const),
};
if (id) {
if (connections.tab[id]) connections.tab[id].postMessage(action);
} else {
toAllTabs(action);
}
isMonitored = shouldMonitor;
}
function getReducerError() { function getReducerError() {
const instancesState = store.getState().instances; const instancesState = store.getState().instances;
const payload = instancesState.states[instancesState.current]; const payload = instancesState.states[instancesState.current];
@ -436,11 +405,11 @@ function getReducerError() {
function togglePersist() { function togglePersist() {
const state = store.getState(); const state = store.getState();
if (state.instances.persisted) { if (state.instances.persisted) {
Object.keys(state.instances.connections).forEach((id) => { for (const id of Object.keys(state.instances.connections)) {
if (connections.tab[id]) return; if (connections.tab[id]) return;
store.dispatch({ type: REMOVE_INSTANCE, id }); store.dispatch({ type: REMOVE_INSTANCE, id });
toMonitors({ type: 'NA', id }); toMonitors({ type: 'NA', id });
}); }
} }
} }
@ -543,9 +512,9 @@ function messaging<S, A extends Action<string>>(
} }
function disconnect( function disconnect(
type: 'tab' | 'monitor' | 'panel', type: 'tab' | 'panel',
id: number | string, id: number | string,
listener?: (message: any, port: chrome.runtime.Port) => void, listener: (message: any, port: chrome.runtime.Port) => void,
) { ) {
return function disconnectListener() { return function disconnectListener() {
const p = connections[type][id]; const p = connections[type][id];
@ -559,7 +528,7 @@ function disconnect(
} }
} else { } else {
monitors--; monitors--;
if (!monitors) monitorInstances(false); if (monitors === 0) toAllTabs({ type: 'STOP' });
} }
}; };
} }
@ -581,7 +550,7 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
chrome.action.enable(id); chrome.action.enable(id);
chrome.action.setIcon({ tabId: id, path: 'img/logo/38x38.png' }); chrome.action.setIcon({ tabId: id, path: 'img/logo/38x38.png' });
} }
if (isMonitored) port.postMessage({ type: 'START' }); if (monitors > 0) port.postMessage({ type: 'START' });
const state = store.getState(); const state = store.getState();
if (state.instances.persisted) { if (state.instances.persisted) {
@ -607,22 +576,11 @@ function onConnect<S, A extends Action<string>>(port: chrome.runtime.Port) {
port.onMessage.addListener(listener); port.onMessage.addListener(listener);
port.onDisconnect.addListener(disconnect('tab', id, listener)); port.onDisconnect.addListener(disconnect('tab', id, listener));
} else if (port.name && port.name.indexOf('monitor') === 0) { } else if (port.name && port.name.indexOf('monitor') === 0) {
id = getId(port.sender!, port.name);
connections.monitor[id] = port;
monitorInstances(true);
listener = (msg: BackgroundAction | 'heartbeat') => {
if (msg === 'heartbeat') return;
store.dispatch(msg);
};
port.onMessage.addListener(listener);
monitors++;
port.onDisconnect.addListener(disconnect('monitor', id));
} else {
// devpanel // devpanel
id = port.name || port.sender!.frameId!; id = getId(port.sender!, port.name);
connections.panel[id] = port; connections.panel[id] = port;
monitorInstances(true, port.name);
monitors++; monitors++;
toAllTabs({ type: 'START' });
listener = (msg: BackgroundAction | 'heartbeat') => { listener = (msg: BackgroundAction | 'heartbeat') => {
if (msg === 'heartbeat') return; if (msg === 'heartbeat') return;
store.dispatch(msg); store.dispatch(msg);