mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-28 04:23:56 +03:00
Start work
This commit is contained in:
parent
4164b6279e
commit
c1838240f0
|
@ -7,7 +7,7 @@
|
||||||
"page_action": {
|
"page_action": {
|
||||||
"default_icon": "img/logo/gray.png",
|
"default_icon": "img/logo/gray.png",
|
||||||
"default_title": "Redux DevTools",
|
"default_title": "Redux DevTools",
|
||||||
"default_popup": "window.html#popup"
|
"default_popup": "devpanel.html#popup"
|
||||||
},
|
},
|
||||||
"commands": {
|
"commands": {
|
||||||
"devtools-left": {
|
"devtools-left": {
|
||||||
|
|
|
@ -261,22 +261,18 @@ type MonitorAction<S, A extends Action<string>> =
|
||||||
// Chrome message limit is 64 MB, but we're using 32 MB to include other object's parts
|
// Chrome message limit is 64 MB, but we're using 32 MB to include other object's parts
|
||||||
const maxChromeMsgSize = 32 * 1024 * 1024;
|
const maxChromeMsgSize = 32 * 1024 * 1024;
|
||||||
|
|
||||||
|
// TODO Clean up args
|
||||||
function toMonitors<S, A extends Action<string>>(
|
function toMonitors<S, A extends Action<string>>(
|
||||||
action: MonitorAction<S, A>,
|
action: MonitorAction<S, A>,
|
||||||
tabId?: string | number,
|
tabId?: string | number,
|
||||||
verbose?: boolean,
|
verbose?: boolean,
|
||||||
) {
|
) {
|
||||||
for (const monitorPort of Object.values(connections.monitor)) {
|
for (const port of [
|
||||||
monitorPort.postMessage(
|
...Object.values(connections.monitor),
|
||||||
verbose || action.type === 'ERROR' || action.type === SET_PERSIST
|
...Object.values(connections.panel),
|
||||||
? action
|
]) {
|
||||||
: { type: UPDATE_STATE },
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
for (const panelPort of Object.values(connections.panel)) {
|
|
||||||
try {
|
try {
|
||||||
panelPort.postMessage(action);
|
port.postMessage(action);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
if (
|
if (
|
||||||
action.type !== UPDATE_STATE ||
|
action.type !== UPDATE_STATE ||
|
||||||
|
@ -307,11 +303,11 @@ function toMonitors<S, A extends Action<string>>(
|
||||||
value;
|
value;
|
||||||
}
|
}
|
||||||
|
|
||||||
panelPort.postMessage({ ...action, request: splitMessageStart });
|
port.postMessage({ ...action, request: splitMessageStart });
|
||||||
|
|
||||||
for (let i = 0; i < toSplit.length; i++) {
|
for (let i = 0; i < toSplit.length; i++) {
|
||||||
for (let j = 0; j < toSplit[i][1].length; j += maxChromeMsgSize) {
|
for (let j = 0; j < toSplit[i][1].length; j += maxChromeMsgSize) {
|
||||||
panelPort.postMessage({
|
port.postMessage({
|
||||||
...action,
|
...action,
|
||||||
request: {
|
request: {
|
||||||
split: 'chunk',
|
split: 'chunk',
|
||||||
|
@ -324,7 +320,7 @@ function toMonitors<S, A extends Action<string>>(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
panelPort.postMessage({ ...action, request: { split: 'end' } });
|
port.postMessage({ ...action, request: { split: 'end' } });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,5 +12,11 @@ html
|
||||||
|
|
||||||
body
|
body
|
||||||
#root
|
#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='/devpanel.bundle.css', rel='stylesheet')
|
link(href='/devpanel.bundle.css', rel='stylesheet')
|
||||||
script(src='/devpanel.bundle.js')
|
script(src='/devpanel.bundle.js')
|
||||||
|
|
|
@ -23,9 +23,10 @@ import { PersistGate } from 'redux-persist/integration/react';
|
||||||
|
|
||||||
const position = location.hash;
|
const position = location.hash;
|
||||||
const messageStyle: CSSProperties = {
|
const messageStyle: CSSProperties = {
|
||||||
padding: '20px',
|
paddingTop: '20px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
|
boxSizing: 'border-box',
|
||||||
};
|
};
|
||||||
|
|
||||||
let rendered: boolean | undefined;
|
let rendered: boolean | undefined;
|
||||||
|
@ -72,7 +73,12 @@ function renderNA() {
|
||||||
.
|
.
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
if (isChrome) {
|
if (
|
||||||
|
isChrome &&
|
||||||
|
chrome &&
|
||||||
|
chrome.devtools &&
|
||||||
|
chrome.devtools.inspectedWindow
|
||||||
|
) {
|
||||||
chrome.devtools.inspectedWindow.getResources((resources) => {
|
chrome.devtools.inspectedWindow.getResources((resources) => {
|
||||||
if (resources[0].url.substr(0, 4) === 'file') {
|
if (resources[0].url.substr(0, 4) === 'file') {
|
||||||
message = (
|
message = (
|
||||||
|
@ -101,17 +107,20 @@ function renderNA() {
|
||||||
|
|
||||||
let splitMessage: SplitUpdateStateRequest<unknown, Action<string>>;
|
let splitMessage: SplitUpdateStateRequest<unknown, Action<string>>;
|
||||||
|
|
||||||
function init(id: number) {
|
function init() {
|
||||||
renderNA();
|
renderNA();
|
||||||
bgConnection = chrome.runtime.connect({
|
let name = 'monitor';
|
||||||
name: id ? id.toString() : undefined,
|
if (chrome && chrome.devtools && chrome.devtools.inspectedWindow) {
|
||||||
});
|
name += chrome.devtools.inspectedWindow.tabId;
|
||||||
|
}
|
||||||
|
bgConnection = chrome.runtime.connect({ name });
|
||||||
bgConnection.onMessage.addListener(
|
bgConnection.onMessage.addListener(
|
||||||
<S, A extends Action<string>>(
|
<S, A extends Action<string>>(
|
||||||
message: PanelMessageWithSplitAction<S, A>,
|
message: PanelMessageWithSplitAction<S, A>,
|
||||||
) => {
|
) => {
|
||||||
if (message.type === 'NA') {
|
if (message.type === 'NA') {
|
||||||
if (message.id === id) renderNA();
|
// TODO Double-check this now that the name is different
|
||||||
|
if (message.id === name) renderNA();
|
||||||
else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
|
else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
|
||||||
} else {
|
} else {
|
||||||
if (!rendered) renderDevTools();
|
if (!rendered) renderDevTools();
|
||||||
|
@ -157,4 +166,7 @@ function init(id: number) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
init(chrome.devtools.inspectedWindow.tabId);
|
if (position === '#popup') document.body.style.minWidth = '760px';
|
||||||
|
if (position !== '#popup') document.body.style.minHeight = '100%';
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
|
@ -7,23 +7,51 @@ import {
|
||||||
TOGGLE_PERSIST,
|
TOGGLE_PERSIST,
|
||||||
UPDATE_STATE,
|
UPDATE_STATE,
|
||||||
} from '@redux-devtools/app';
|
} from '@redux-devtools/app';
|
||||||
import { Dispatch, Middleware } from 'redux';
|
import { Dispatch, Middleware, MiddlewareAPI } from 'redux';
|
||||||
|
|
||||||
|
function selectInstance(
|
||||||
|
tabId: number,
|
||||||
|
store: MiddlewareAPI<Dispatch<StoreAction>, 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!);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function panelDispatcher(
|
function panelDispatcher(
|
||||||
bgConnection: chrome.runtime.Port,
|
bgConnection: chrome.runtime.Port,
|
||||||
): Middleware<{}, StoreState, Dispatch<StoreAction>> {
|
): Middleware<{}, StoreState, Dispatch<StoreAction>> {
|
||||||
let autoselected = false;
|
let autoselected = false;
|
||||||
const tabId = chrome.devtools.inspectedWindow.tabId;
|
|
||||||
|
|
||||||
return (store) => (next) => (untypedAction) => {
|
return (store) => (next) => (untypedAction) => {
|
||||||
const action = untypedAction as StoreAction;
|
const action = untypedAction as StoreAction;
|
||||||
|
|
||||||
const result = next(action);
|
const result = next(action);
|
||||||
if (!autoselected && action.type === UPDATE_STATE && tabId) {
|
if (!autoselected && action.type === UPDATE_STATE) {
|
||||||
autoselected = true;
|
autoselected = true;
|
||||||
const connections = store.getState().instances.connections[tabId];
|
|
||||||
if (connections && connections.length === 1) {
|
if (chrome.devtools && chrome.devtools.inspectedWindow) {
|
||||||
next({ type: SELECT_INSTANCE, selected: connections[0] });
|
selectInstance(chrome.devtools.inspectedWindow.tabId, store, next);
|
||||||
|
} else {
|
||||||
|
getCurrentTabId((tabId) => selectInstance(tabId, store, next));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) {
|
if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) {
|
||||||
|
|
|
@ -12,7 +12,7 @@ html
|
||||||
img(
|
img(
|
||||||
src='/img/loading.svg',
|
src='/img/loading.svg',
|
||||||
height=300, width=350,
|
height=300, width=350,
|
||||||
style='position: absolute; top: 50%; left: 50%; margin-top: -175px; margin-left: -175px;'
|
style='position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -175px;'
|
||||||
)
|
)
|
||||||
link(href='/window.bundle.css', rel='stylesheet')
|
link(href='/window.bundle.css', rel='stylesheet')
|
||||||
script(src='/window.bundle.js')
|
script(src='/window.bundle.js')
|
||||||
|
|
Loading…
Reference in New Issue
Block a user