Context menu devtools follow the devtools docking preference state

desktop-app/.eslintrc.js

@@ -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',

desktop-app/src/main/devtools/index.ts

@@ -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

desktop-app/src/main/preload-webview.ts

@@ -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';

desktop-app/src/main/webview-context-menu/common.ts

@@ -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' },
+};

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

@@ -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);
-  }
-};

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

@@ -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) => {

desktop-app/src/renderer/components/Previewer/Device/common.ts

@@ -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' },
+};

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

@@ -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()) {
+      inspectElement(deviceX, deviceY);
-        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)
-      );
     };
 
     window.electron.ipcRenderer.on('inspect-element', inspectElementHandler);
@@ -283,6 +327,7 @@ const Device = ({ isPrimary, device }: Props) => {
     devtoolsOpenForWebviewId,
     openDevTools,
     zoomfactor,
+    inspectElement,
   ]);
 
   useEffect(() => {

desktop-app/yarn.lock

@@ -1920,9 +1920,11 @@
   integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
 
 "@types/cors@^2.8.12":
-  version "2.8.12"
+  version "2.8.13"
-  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080"
+  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.13.tgz#b8ade22ba455a1b8cb3b5d3f35910fd204f84f94"
-  integrity sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==
+  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:
+browser-sync-client@^2.27.11:
-  version "2.27.10"
+  version "2.27.11"
-  resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.27.10.tgz#f06233ea66bd873b96664f001cbc49035022634d"
+  resolved "https://registry.yarnpkg.com/browser-sync-client/-/browser-sync-client-2.27.11.tgz#1450e662ba805386b842f2b89456b48bdab7b968"
-  integrity sha512-KCFKA1YDj6cNul0VsA28apohtBsdk5Wv8T82ClOZPZMZWxPj4Ny5AUbrj9UlAb/k6pdxE5HABrWDhP9+cjt4HQ==
+  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:
+browser-sync-ui@^2.27.11:
-  version "2.27.10"
+  version "2.27.11"
-  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-2.27.10.tgz#59dd6e436e17b743c99094ff5129306ab7ab5b79"
+  resolved "https://registry.yarnpkg.com/browser-sync-ui/-/browser-sync-ui-2.27.11.tgz#a391a0cd011dc19cb1798d10bc2ba29c9bcc5a2c"
-  integrity sha512-elbJILq4Uo6OQv6gsvS3Y9vRAJlWu+h8j0JDkF0X/ua+3S6SVbbiWnZc8sNOFlG7yvVGIwBED3eaYQ0iBo1Dtw==
+  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"
+  version "2.27.11"
-  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.27.10.tgz#3568d4f66afb0f68fee4a10902ecbbe8b2f680dd"
+  resolved "https://registry.yarnpkg.com/browser-sync/-/browser-sync-2.27.11.tgz#bb2c07fa586863612507cf0b7963e352a26a07af"
-  integrity sha512-xKm+6KJmJu6RuMWWbFkKwOCSqQOxYe3nOrFkKI5Tr/ZzjPxyU3pFShKK3tWnazBo/3lYQzN7fzjixG8fwJh1Xw==
+  integrity sha512-U5f9u97OYJH66T0MGWWzG9rOQTW6ZmDMj97vsmtqwNS03JAwdLVES8eel2lD3rvAqQCNAFqaJ74NMacBI57vJg==
   dependencies:
-    browser-sync-client "^2.27.10"
+    browser-sync-client "^2.27.11"
-    browser-sync-ui "^2.27.10"
+    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"
+  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.6.tgz#7811244af173e157295dec9b2718dfe42a64ef45"
-  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
+  integrity sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==
 
-engine.io@~6.2.0:
+engine.io@~6.2.1:
-  version "6.2.0"
+  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.0.tgz#003bec48f6815926f2b1b17873e576acd54f41d0"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.1.tgz#e3f7826ebc4140db9bbaa9021ad6b1efb175878f"
-  integrity sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==
+  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"
+  version "4.5.4"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.3.tgz#bed69209d001465b2fea650d2e95c1e82768ab5e"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.4.tgz#d3cde8a06a6250041ba7390f08d2468ccebc5ac9"
-  integrity sha512-I/hqDYpQ6JKwtJOf5ikM+Qz+YujZPMEl6qBLhxiP0nX+TfXKhW4KZZG8lamrD6Y5ngjmYHreESVasVCgi5Kl3A==
+  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:
+socket.io-parser@~4.2.1:
-  version "4.2.1"
+  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.2.tgz#1dd384019e25b7a3d374877f492ab34f2ad0d206"
-  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+  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"
+  version "4.5.4"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.5.3.tgz#44dffea48d7f5aa41df4a66377c386b953bc521c"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.5.4.tgz#a4513f06e87451c17013b8d13fdfaf8da5a86a90"
-  integrity sha512-zdpnnKU+H6mOp7nYRXH4GNv1ux6HL6+lHL8g7Ds7Lj8CkdK1jJK/dlwsKDculbyOHifcJ0Pr/yeXnZQ5GeFrcg==
+  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==