2017-05-14 08:06:49 +08:00
|
|
|
import { remote } from 'electron';
|
|
|
|
|
import contextMenu from 'electron-context-menu';
|
|
|
|
|
import { item, n, toggleDevTools, separator } from '../../electron/menu/util';
|
2019-09-08 12:22:30 +08:00
|
|
|
import config from './config';
|
2017-05-14 08:06:49 +08:00
|
|
|
|
2017-07-07 04:00:53 +08:00
|
|
|
const { nativeImage } = remote;
|
2017-05-14 08:06:49 +08:00
|
|
|
const { TouchBarButton, TouchBarSlider } = remote.TouchBar || {};
|
|
|
|
|
const currentWindow = remote.getCurrentWindow();
|
|
|
|
|
|
|
|
|
|
let worker;
|
|
|
|
|
let availableMethods = [];
|
|
|
|
|
|
|
|
|
|
/* reload, toggleElementInspector, networkInspect */
|
|
|
|
|
let leftBar = {};
|
|
|
|
|
|
|
|
|
|
let isSliderEnabled;
|
|
|
|
|
let storeLiftedState;
|
|
|
|
|
/* slider, prev, next */
|
|
|
|
|
let rightBar = {};
|
|
|
|
|
|
2017-09-01 01:13:54 +08:00
|
|
|
const getBarItems = bar =>
|
|
|
|
|
Object.keys(bar)
|
|
|
|
|
.map(key => bar[key])
|
|
|
|
|
.filter(barItem => !!barItem);
|
2017-05-14 08:06:49 +08:00
|
|
|
const setTouchBar = () =>
|
|
|
|
|
currentWindow.setTouchBar([
|
|
|
|
|
...getBarItems(leftBar),
|
|
|
|
|
...(isSliderEnabled ? getBarItems(rightBar) : []),
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const invokeDevMenuMethod = ({ name, args }) =>
|
|
|
|
|
worker && worker.postMessage({ method: 'invokeDevMenuMethod', name, args });
|
|
|
|
|
|
2019-09-08 12:22:30 +08:00
|
|
|
let networkInspectEnabled = !!config.networkInspect;
|
2017-09-01 01:13:54 +08:00
|
|
|
export const networkInspect = {
|
|
|
|
|
isEnabled: () => !!networkInspectEnabled,
|
|
|
|
|
getHighlightColor: () => (networkInspectEnabled ? '#7A7A7A' : '#363636'),
|
2017-05-14 08:06:49 +08:00
|
|
|
toggle() {
|
2017-09-01 01:13:54 +08:00
|
|
|
networkInspectEnabled = !networkInspectEnabled;
|
2017-05-14 08:06:49 +08:00
|
|
|
},
|
2017-09-01 01:13:54 +08:00
|
|
|
label: () => (networkInspectEnabled ? 'Disable Network Inspect' : 'Enable Network Inspect'),
|
2017-05-14 08:06:49 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const devMenuMethods = {
|
|
|
|
|
reload: () => invokeDevMenuMethod({ name: 'reload' }),
|
|
|
|
|
toggleElementInspector: () => invokeDevMenuMethod({ name: 'toggleElementInspector' }),
|
2017-07-31 12:23:10 +08:00
|
|
|
show: () => invokeDevMenuMethod({ name: 'show' }),
|
2017-05-14 08:06:49 +08:00
|
|
|
networkInspect: () => {
|
|
|
|
|
networkInspect.toggle();
|
|
|
|
|
if (leftBar.networkInspect) {
|
|
|
|
|
leftBar.networkInspect.backgroundColor = networkInspect.getHighlightColor();
|
|
|
|
|
}
|
|
|
|
|
invokeDevMenuMethod({
|
|
|
|
|
name: 'networkInspect',
|
2017-09-01 01:13:54 +08:00
|
|
|
args: [networkInspectEnabled],
|
2017-05-14 08:06:49 +08:00
|
|
|
});
|
|
|
|
|
},
|
2017-09-26 17:52:30 +08:00
|
|
|
showAsyncStorage: () => {
|
|
|
|
|
invokeDevMenuMethod({ name: 'showAsyncStorage' });
|
|
|
|
|
},
|
2017-07-06 18:10:36 +08:00
|
|
|
clearAsyncStorage: () => {
|
|
|
|
|
if (confirm('Call `AsyncStorage.clear()` in current React Native debug session?')) {
|
|
|
|
|
invokeDevMenuMethod({ name: 'clearAsyncStorage' });
|
|
|
|
|
}
|
|
|
|
|
},
|
2017-05-14 08:06:49 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const defaultContextMenuItems = [
|
2017-06-30 13:53:55 +08:00
|
|
|
item('Toggle Developer Tools', n, () => toggleDevTools(currentWindow, 'chrome')),
|
2017-05-14 08:06:49 +08:00
|
|
|
item('Toggle React DevTools', n, () => toggleDevTools(currentWindow, 'react')),
|
|
|
|
|
item('Toggle Redux DevTools', n, () => toggleDevTools(currentWindow, 'redux')),
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
contextMenu({
|
|
|
|
|
window: currentWindow,
|
|
|
|
|
showInspectElement: process.env.NODE_ENV === 'development',
|
|
|
|
|
prepend: () =>
|
|
|
|
|
[
|
|
|
|
|
availableMethods.includes('reload') && item('Reload JS', n, devMenuMethods.reload),
|
|
|
|
|
availableMethods.includes('toggleElementInspector') &&
|
|
|
|
|
item('Toggle Element Inspector', n, devMenuMethods.toggleElementInspector),
|
2017-07-31 12:23:10 +08:00
|
|
|
availableMethods.includes('show') && item('Show Developer Menu', n, devMenuMethods.show),
|
2017-07-06 18:10:36 +08:00
|
|
|
item(networkInspect.label(), n, devMenuMethods.networkInspect),
|
2017-09-26 17:52:30 +08:00
|
|
|
availableMethods.includes('showAsyncStorage') &&
|
|
|
|
|
item('Log AsyncStorage content', n, devMenuMethods.showAsyncStorage),
|
2017-07-06 18:10:36 +08:00
|
|
|
availableMethods.includes('clearAsyncStorage') &&
|
|
|
|
|
item('Clear AsyncStorage', n, devMenuMethods.clearAsyncStorage),
|
2017-05-14 08:06:49 +08:00
|
|
|
separator,
|
|
|
|
|
]
|
|
|
|
|
.filter(menuItem => !!menuItem)
|
|
|
|
|
.concat(defaultContextMenuItems),
|
|
|
|
|
});
|
|
|
|
|
|
2017-10-06 20:43:22 +08:00
|
|
|
export const invokeDevMethod = name => () => {
|
2017-09-26 17:53:19 +08:00
|
|
|
if (availableMethods.includes(name)) {
|
|
|
|
|
return devMenuMethods[name]();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2019-09-11 15:35:29 +08:00
|
|
|
const hslShift = [0.5, 0.2, 0.8];
|
|
|
|
|
const icon = name => nativeImage.createFromNamedImage(name, hslShift);
|
2017-07-07 04:00:53 +08:00
|
|
|
|
|
|
|
|
let namedImages;
|
|
|
|
|
const initNamedImages = () => {
|
|
|
|
|
if (process.platform !== 'darwin' || namedImages) return;
|
|
|
|
|
namedImages = {
|
|
|
|
|
reload: icon('NSTouchBarRefreshTemplate'),
|
|
|
|
|
toggleElementInspector: icon('NSTouchBarQuickLookTemplate'),
|
|
|
|
|
networkInspect: icon('NSTouchBarRecordStartTemplate'),
|
|
|
|
|
prev: icon('NSTouchBarGoBackTemplate'),
|
|
|
|
|
next: icon('NSTouchBarGoForwardTemplate'),
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
2017-05-14 08:06:49 +08:00
|
|
|
const setDevMenuMethodsForTouchBar = () => {
|
|
|
|
|
if (process.platform !== 'darwin') return;
|
2017-07-07 04:00:53 +08:00
|
|
|
initNamedImages();
|
2017-05-14 08:06:49 +08:00
|
|
|
|
|
|
|
|
leftBar = {
|
|
|
|
|
// Default items
|
2017-07-07 04:00:53 +08:00
|
|
|
networkInspect: new TouchBarButton({
|
|
|
|
|
icon: namedImages.networkInspect,
|
|
|
|
|
click: devMenuMethods.networkInspect,
|
|
|
|
|
backgroundColor: networkInspect.getHighlightColor(),
|
|
|
|
|
}),
|
2017-05-14 08:06:49 +08:00
|
|
|
};
|
2018-03-14 23:20:41 +08:00
|
|
|
if (availableMethods.includes('reload')) {
|
|
|
|
|
leftBar.reload = new TouchBarButton({
|
|
|
|
|
icon: namedImages.reload,
|
|
|
|
|
click: devMenuMethods.reload,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (availableMethods.includes('toggleElementInspector')) {
|
|
|
|
|
leftBar.toggleElementInspector = new TouchBarButton({
|
|
|
|
|
icon: namedImages.toggleElementInspector,
|
|
|
|
|
click: devMenuMethods.toggleElementInspector,
|
|
|
|
|
});
|
|
|
|
|
}
|
2017-05-14 08:06:49 +08:00
|
|
|
setTouchBar();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Reset TouchBar when reload the app
|
|
|
|
|
setDevMenuMethodsForTouchBar([]);
|
|
|
|
|
|
|
|
|
|
export const setDevMenuMethods = (list, wkr) => {
|
|
|
|
|
worker = wkr;
|
|
|
|
|
availableMethods = list;
|
|
|
|
|
|
|
|
|
|
setDevMenuMethodsForTouchBar();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const setReduxDevToolsMethods = (enabled, dispatch) => {
|
|
|
|
|
if (process.platform !== 'darwin') return;
|
2017-07-07 04:00:53 +08:00
|
|
|
initNamedImages();
|
2017-05-14 08:06:49 +08:00
|
|
|
|
|
|
|
|
// Already setup
|
|
|
|
|
if (enabled && isSliderEnabled) return;
|
|
|
|
|
|
|
|
|
|
const handleSliderChange = (nextIndex, dontUpdateTouchBarSlider = false) =>
|
|
|
|
|
dispatch({
|
|
|
|
|
type: 'JUMP_TO_STATE',
|
|
|
|
|
actionId: storeLiftedState.stagedActionIds[nextIndex],
|
|
|
|
|
index: nextIndex,
|
|
|
|
|
dontUpdateTouchBarSlider,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
rightBar = {
|
|
|
|
|
slider: new TouchBarSlider({
|
|
|
|
|
value: 0,
|
|
|
|
|
minValue: 0,
|
|
|
|
|
maxValue: 0,
|
|
|
|
|
change(nextIndex) {
|
|
|
|
|
if (nextIndex !== storeLiftedState.currentStateIndex) {
|
|
|
|
|
// Set `dontUpdateTouchBarSlider` true for keep slide experience
|
|
|
|
|
handleSliderChange(nextIndex, true);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
prev: new TouchBarButton({
|
2017-07-07 04:00:53 +08:00
|
|
|
icon: namedImages.prev,
|
2017-05-14 08:06:49 +08:00
|
|
|
click() {
|
|
|
|
|
const nextIndex = storeLiftedState.currentStateIndex - 1;
|
|
|
|
|
if (nextIndex >= 0) {
|
|
|
|
|
handleSliderChange(nextIndex);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
next: new TouchBarButton({
|
2017-07-07 04:00:53 +08:00
|
|
|
icon: namedImages.next,
|
2017-05-14 08:06:49 +08:00
|
|
|
click() {
|
|
|
|
|
const nextIndex = storeLiftedState.currentStateIndex + 1;
|
|
|
|
|
if (nextIndex < storeLiftedState.computedStates.length) {
|
|
|
|
|
handleSliderChange(nextIndex);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}),
|
|
|
|
|
};
|
|
|
|
|
isSliderEnabled = enabled;
|
|
|
|
|
setTouchBar();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const updateSliderContent = (liftedState, dontUpdateTouchBarSlider) => {
|
|
|
|
|
if (process.platform !== 'darwin') return;
|
|
|
|
|
|
|
|
|
|
storeLiftedState = liftedState;
|
|
|
|
|
if (isSliderEnabled && !dontUpdateTouchBarSlider) {
|
|
|
|
|
const { currentStateIndex, computedStates } = liftedState;
|
|
|
|
|
rightBar.slider.maxValue = computedStates.length - 1;
|
|
|
|
|
rightBar.slider.value = currentStateIndex;
|
|
|
|
|
}
|
|
|
|
|
};
|
