Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-09-20 06:11:56 +00:00
Code Issues Projects Releases Packages Wiki Activity

Context menu devtools follow the devtools docking preference state

Browse source
This commit is contained in:
Manoj Vivek 2023-02-19 15:09:28 +05:30
parent 9167a991fd
commit 860e20f13e
9 changed files with 139 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
desktop-app/.eslintrc.js
View file

@ -4,6 +4,9 @@ module.exports = {
// A temporary hack related to IDE not resolving correct package.json
'import/no-extraneous-dependencies': 'off',
'import/no-unresolved': 'error',
'import/prefer-default-export': 'off',
// Since React 17 and typescript 4.1 you can safely disable the rule
'react/react-in-jsx-scope': 'off',
'react/require-default-props': 'off',

3
desktop-app/src/main/devtools/index.ts
View file

@ -109,11 +109,12 @@ const disableInspector = async (
const { webviewId } = args;
const webViewContents = webContents.fromId(webviewId);
const dbg = webViewContents.debugger;
try {
await dbg.sendCommand('Overlay.setInspectMode', {
mode: 'none',
highlightConfig: {},
});
try {
dbg.removeAllListeners().detach();
} catch (err) {
// eslint-disable-next-line no-console

3
desktop-app/src/main/preload-webview.ts
View file

@ -1,10 +1,7 @@
import { ipcRenderer } from 'electron';
console.log('Preload main');
const documentBodyInit = () => {
// Browser Sync
console.log('Registering browserSync');
const bsScript = window.document.createElement('script');
bsScript.src =
'https://localhost:12719/browser-sync/browser-sync-client.js?v=2.27.10';

9
desktop-app/src/main/webview-context-menu/common.ts Normal file
View file

@ -0,0 +1,9 @@
interface ContextMenuMetadata {
id: string;
label: string;
}
export const CONTEXT_MENUS: { [key: string]: ContextMenuMetadata } = {
INSPECT_ELEMENT: { id: 'INSPECT_ELEMENT', label: 'Inspect Element' },
OPEN_CONSOLE: { id: 'OPEN_CONSOLE', label: 'Open Console' },
};

33
desktop-app/src/main/webview-context-menu/handler.ts
View file

@ -1,33 +0,0 @@
interface ContextMenuMetadata {
id: string;
label: string;
}
export const CONTEXT_MENUS: { [key: string]: ContextMenuMetadata } = {
INSPECT_ELEMENT: { id: 'INSPECT_ELEMENT', label: 'Inspect Element' },
OPEN_CONSOLE: { id: 'OPEN_CONSOLE', label: 'Open Console' },
};
export const handleContextMenuEvent = (
webview: Electron.WebviewTag,
command: string,
arg: any
) => {
switch (command) {
case CONTEXT_MENUS.INSPECT_ELEMENT.id: {
const { x: webViewX, y: webViewY } = webview.getBoundingClientRect();
const { contextMenuMeta } = arg;
const scaleFactor = parseFloat(webview.dataset?.scaleFactor ?? '1');
const x = Math.floor(webViewX + contextMenuMeta.x * scaleFactor);
const y = Math.floor(webViewY + contextMenuMeta.y * scaleFactor);
webview.inspectElement(x, y);
break;
}
case CONTEXT_MENUS.OPEN_CONSOLE.id: {
webview.openDevTools();
break;
}
default:
console.log('Unknown context menu command:', command);
}
};

2
desktop-app/src/main/webview-context-menu/register.ts
View file

@ -1,5 +1,5 @@
import { BrowserWindow, ipcMain, Menu } from 'electron';
import { CONTEXT_MENUS } from './handler';
import { CONTEXT_MENUS } from './common';
export const initWebviewContextMenu = () => {
ipcMain.on('show-context-menu', (event, ...args) => {

9
desktop-app/src/renderer/components/Previewer/Device/common.ts Normal file
View file

@ -0,0 +1,9 @@
interface ContextMenuMetadata {
id: string;
label: string;
}
export const CONTEXT_MENUS: { [key: string]: ContextMenuMetadata } = {
INSPECT_ELEMENT: { id: 'INSPECT_ELEMENT', label: 'Inspect Element' },
OPEN_CONSOLE: { id: 'OPEN_CONSOLE', label: 'Open Console' },
};

75
desktop-app/src/renderer/components/Previewer/Device/index.tsx
View file

@ -11,7 +11,10 @@ import {
DisableDefaultWindowOpenHandlerArgs,
DisableDefaultWindowOpenHandlerResult,
} from 'main/native-functions';
import { handleContextMenuEvent } from 'main/webview-context-menu/handler';
import {
CONTEXT_MENUS,
handleContextMenuEvent,
} from 'main/webview-context-menu/common';
import {
DeleteStorageArgs,
DeleteStorageResult,
@ -151,6 +154,38 @@ const Device = ({ isPrimary, device }: Props) => {
dispatch(setDevtoolsOpen(webview.getWebContentsId()));
}, [dispatch, dockPosition]);
const inspectElement = useCallback(
async (deviceX: number, deviceY: number) => {
if (!ref.current) {
return;
}
const webview = ref.current as Electron.WebviewTag;
if (webview == null) {
return;
}
if (devtoolsOpenForWebviewId !== webview.getWebContentsId()) {
if (isDevtoolsOpen) {
dispatch(setDevtoolsClose());
await window.electron.ipcRenderer.invoke('close-devtools');
}
await openDevTools();
}
const { x: webViewX, y: webViewY } = webview.getBoundingClientRect();
webview.inspectElement(
Math.round(webViewX + deviceX * zoomfactor),
Math.round(webViewY + deviceY * zoomfactor)
);
},
[
dispatch,
devtoolsOpenForWebviewId,
isDevtoolsOpen,
openDevTools,
zoomfactor,
]
);
useEffect(() => {
if (!ref.current) {
return;
@ -166,7 +201,20 @@ const Device = ({ isPrimary, device }: Props) => {
webview.addEventListener('ipc-message', (e) => {
if (e.channel === 'context-menu-command') {
const { command, arg } = e.args[0];
handleContextMenuEvent(webview, command, arg);
switch (command) {
case CONTEXT_MENUS.OPEN_CONSOLE.id:
openDevTools();
break;
case CONTEXT_MENUS.INSPECT_ELEMENT.id: {
const {
contextMenuMeta: { x, y },
} = arg;
inspectElement(x, y);
break;
}
default:
console.log('Unhandled context menu command', command);
}
}
});
@ -211,7 +259,14 @@ const Device = ({ isPrimary, device }: Props) => {
}
registerNavigationHandlers();
}, [ref, dispatch, registerNavigationHandlers, isPrimary]);
}, [
ref,
dispatch,
registerNavigationHandlers,
isPrimary,
inspectElement,
openDevTools,
]);
useEffect(() => {
// Reload keyboard shortcuts effect
@ -249,21 +304,10 @@ const Device = ({ isPrimary, device }: Props) => {
return;
}
dispatch(setIsInspecting(false));
const { x: webViewX, y: webViewY } = webview.getBoundingClientRect();
const {
coords: { x: deviceX, y: deviceY },
} = args;
if (devtoolsOpenForWebviewId !== webview.getWebContentsId()) {
if (isDevtoolsOpen) {
dispatch(setDevtoolsClose());
await window.electron.ipcRenderer.invoke('close-devtools');
}
await openDevTools();
}
webview.inspectElement(
Math.round(webViewX + deviceX * zoomfactor),
Math.round(webViewY + deviceY * zoomfactor)
);
inspectElement(deviceX, deviceY);
};
window.electron.ipcRenderer.on('inspect-element', inspectElementHandler);
@ -283,6 +327,7 @@ const Device = ({ isPrimary, device }: Props) => {
devtoolsOpenForWebviewId,
openDevTools,
zoomfactor,
inspectElement,
]);
useEffect(() => {

97
desktop-app/yarn.lock
View file

@ -1920,9 +1920,11 @@
integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
"@types/cors@^2.8.12":
version "2.8.12"
resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080"
integrity sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==
version "2.8.13"
resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.13.tgz#b8ade22ba455a1b8cb3b5d3f35910fd204f84f94"
integrity sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA==
dependencies:
"@types/node" "*"
"@types/debug@^4.0.0", "@types/debug@^4.1.6":
version "4.1.7"
@ -2130,7 +2132,7 @@
resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
"@types/node@*", "@types/node@>=10.0.0":
"@types/node@*":
version "18.11.5"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.5.tgz#1bc94cf2f9ab5fe33353bc7c79c797dcc5325bef"
integrity sha512-3JRwhbjI+cHLAkUorhf8RnqUbFXajvzX4q6fMn5JwkgtuwfYtRQYI3u4V92vI6NJuTsbBQWWh3RZjFsuevyMGQ==
@ -2140,6 +2142,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.6.tgz#31743bc5772b6ac223845e18c3fc26f042713c83"
integrity sha512-EdxgKRXgYsNITy5mjjXjVE/CS8YENSdhiagGrLqjG0pvA2owgJ6i4l7wy/PFZGC0B1/H20lWKN7ONVDNYDZm7A==
"@types/node@>=10.0.0":
version "18.11.18"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
integrity sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==
"@types/node@^16.11.26":
version "16.18.0"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.0.tgz#34982c6d5b5734c900f4ee69e1b87d212db6c60f"
@ -3579,10 +3586,10 @@ browser-process-hrtime@^1.0.0:
resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
browser-sync-client@^2.27.10:
version "2.27.10"
resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.27.10.tgz#f06233ea66bd873b96664f001cbc49035022634d"
integrity sha512-KCFKA1YDj6cNul0VsA28apohtBsdk5Wv8T82ClOZPZMZWxPj4Ny5AUbrj9UlAb/k6pdxE5HABrWDhP9+cjt4HQ==
browser-sync-client@^2.27.11:
version "2.27.11"
resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.27.11.tgz#1450e662ba805386b842f2b89456b48bdab7b968"
integrity sha512-okMNfD2NasL/XD1/BclP3onXjhahisk3e/kTQ5HPDT/lLqdBqNDd6QFcjI5I1ak7na2hxKQSLjryql+7fp5gKQ==
dependencies:
etag "1.8.1"
fresh "0.5.2"
@ -3590,10 +3597,10 @@ browser-sync-client@^2.27.10:
rxjs "^5.5.6"
typescript "^4.6.2"
browser-sync-ui@^2.27.10:
version "2.27.10"
resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-2.27.10.tgz#59dd6e436e17b743c99094ff5129306ab7ab5b79"
integrity sha512-elbJILq4Uo6OQv6gsvS3Y9vRAJlWu+h8j0JDkF0X/ua+3S6SVbbiWnZc8sNOFlG7yvVGIwBED3eaYQ0iBo1Dtw==
browser-sync-ui@^2.27.11:
version "2.27.11"
resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-2.27.11.tgz#a391a0cd011dc19cb1798d10bc2ba29c9bcc5a2c"
integrity sha512-1T/Y8Pp1R68aUL7zVSFq0nxtr258xWd/nTasCAHX2M6EsGaswVOFtXsw3bKqsr35z+J+LfVfOdz1HFLYKxdgrA==
dependencies:
async-each-series "0.1.1"
connect-history-api-fallback "^1"
@ -3603,12 +3610,12 @@ browser-sync-ui@^2.27.10:
stream-throttle "^0.1.3"
browser-sync@^2.27.10:
version "2.27.10"
resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.27.10.tgz#3568d4f66afb0f68fee4a10902ecbbe8b2f680dd"
integrity sha512-xKm+6KJmJu6RuMWWbFkKwOCSqQOxYe3nOrFkKI5Tr/ZzjPxyU3pFShKK3tWnazBo/3lYQzN7fzjixG8fwJh1Xw==
version "2.27.11"
resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.27.11.tgz#bb2c07fa586863612507cf0b7963e352a26a07af"
integrity sha512-U5f9u97OYJH66T0MGWWzG9rOQTW6ZmDMj97vsmtqwNS03JAwdLVES8eel2lD3rvAqQCNAFqaJ74NMacBI57vJg==
dependencies:
browser-sync-client "^2.27.10"
browser-sync-ui "^2.27.10"
browser-sync-client "^2.27.11"
browser-sync-ui "^2.27.11"
bs-recipes "1.3.4"
bs-snippet-injector "^2.0.1"
chokidar "^3.5.1"
@ -3626,7 +3633,7 @@ browser-sync@^2.27.10:
micromatch "^4.0.2"
opn "5.3.0"
portscanner "2.2.0"
qs "6.2.3"
qs "^6.11.0"
raw-body "^2.3.2"
resp-modifier "6.0.2"
rx "4.1.0"
@ -5365,14 +5372,14 @@ engine.io-client@~6.2.3:
xmlhttprequest-ssl "~2.0.0"
engine.io-parser@~5.0.3:
version "5.0.4"
resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
version "5.0.6"
resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.6.tgz#7811244af173e157295dec9b2718dfe42a64ef45"
integrity sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==
engine.io@~6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.0.tgz#003bec48f6815926f2b1b17873e576acd54f41d0"
integrity sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==
engine.io@~6.2.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.1.tgz#e3f7826ebc4140db9bbaa9021ad6b1efb175878f"
integrity sha512-ECceEFcAaNRybd3lsGQKas3ZlMVjN3cyWwMP25D2i0zWfyiytVbTpRPa34qrr+FHddtpBVOmq4H/DCv1O0lZRA==
dependencies:
"@types/cookie" "^0.4.1"
"@types/cors" "^2.8.12"
@ -10745,18 +10752,13 @@ q@^1.1.2:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
qs@6.11.0:
qs@6.11.0, qs@^6.11.0:
version "6.11.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
dependencies:
side-channel "^1.0.4"
qs@6.2.3:
version "6.2.3"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.3.tgz#1cfcb25c10a9b2b483053ff39f5dfc9233908cfe"
integrity sha512-AY4g8t3LMboim0t6XWFdz6J5OuJ1ZNYu54SXihS/OMpgyCqYmcAJnWqkNSOjSjWmq3xxy+GF9uWQI2lI/7tKIA==
querystringify@^2.1.1:
version "2.2.0"
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@ -11880,34 +11882,34 @@ socket.io-adapter@~2.4.0:
integrity sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==
socket.io-client@^4.4.1:
version "4.5.3"
resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.3.tgz#bed69209d001465b2fea650d2e95c1e82768ab5e"
integrity sha512-I/hqDYpQ6JKwtJOf5ikM+Qz+YujZPMEl6qBLhxiP0nX+TfXKhW4KZZG8lamrD6Y5ngjmYHreESVasVCgi5Kl3A==
version "4.5.4"
resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.4.tgz#d3cde8a06a6250041ba7390f08d2468ccebc5ac9"
integrity sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==
dependencies:
"@socket.io/component-emitter" "~3.1.0"
debug "~4.3.2"
engine.io-client "~6.2.3"
socket.io-parser "~4.2.0"
socket.io-parser "~4.2.1"
socket.io-parser@~4.2.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
socket.io-parser@~4.2.1:
version "4.2.2"
resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.2.tgz#1dd384019e25b7a3d374877f492ab34f2ad0d206"
integrity sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==
dependencies:
"@socket.io/component-emitter" "~3.1.0"
debug "~4.3.1"
socket.io@^4.4.1:
version "4.5.3"
resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.5.3.tgz#44dffea48d7f5aa41df4a66377c386b953bc521c"
integrity sha512-zdpnnKU+H6mOp7nYRXH4GNv1ux6HL6+lHL8g7Ds7Lj8CkdK1jJK/dlwsKDculbyOHifcJ0Pr/yeXnZQ5GeFrcg==
version "4.5.4"
resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.5.4.tgz#a4513f06e87451c17013b8d13fdfaf8da5a86a90"
integrity sha512-m3GC94iK9MfIEeIBfbhJs5BqFibMtkRk8ZpKwG2QwxV0m/eEhPIV4ara6XCF1LWNAus7z58RodiZlAH71U3EhQ==
dependencies:
accepts "~1.3.4"
base64id "~2.0.0"
debug "~4.3.2"
engine.io "~6.2.0"
engine.io "~6.2.1"
socket.io-adapter "~2.4.0"
socket.io-parser "~4.2.0"
socket.io-parser "~4.2.1"
sockjs@^0.3.24:
version "0.3.24"
@ -12816,7 +12818,12 @@ typed-emitter@^2.1.0:
optionalDependencies:
rxjs "^7.5.2"
typescript@^4.6.2, typescript@^4.7.4:
typescript@^4.6.2:
version "4.9.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
typescript@^4.7.4:
version "4.8.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==