refactor: Port inspector to TypeScript (#16943)

* refactor: Port inspector to TypeScript

* refactor: Add another type to inspector

* refactor: Use correct paths

* Update lib/renderer/inspector.ts

Co-Authored-By: felixrieseberg <felix@felixrieseberg.com>

* refactor: Implement feedback <3

* refactor: Don't define blob at all

* fix: Correct type

filenames.gni

@@ -66,7 +66,7 @@ filenames = {
     "lib/renderer/chrome-api.ts",
     "lib/renderer/content-scripts-injector.ts",
     "lib/renderer/init.ts",
-    "lib/renderer/inspector.js",
+    "lib/renderer/inspector.ts",
     "lib/renderer/ipc-renderer-internal-utils.ts",
     "lib/renderer/ipc-renderer-internal.ts",
     "lib/renderer/remote.ts",

lib/renderer/inspector.js

@@ -1,65 +0,0 @@
-'use strict'
-
-const { ipcRendererInternal } = require('@electron/internal/renderer/ipc-renderer-internal')
-const ipcRendererUtils = require('@electron/internal/renderer/ipc-renderer-internal-utils')
-
-window.onload = function () {
-  // Use menu API to show context menu.
-  window.InspectorFrontendHost.showContextMenuAtPoint = createMenu
-
-  // correct for Chromium returning undefined for filesystem
-  window.Persistence.FileSystemWorkspaceBinding.completeURL = completeURL
-
-  // Use dialog API to override file chooser dialog.
-  window.UI.createFileSelectorElement = createFileSelectorElement
-}
-
-// Extra / is needed as a result of MacOS requiring absolute paths
-function completeURL (project, path) {
-  project = 'file:///'
-  return `${project}${path}`
-}
-
-window.confirm = function (message, title) {
-  return ipcRendererUtils.invokeSync('ELECTRON_INSPECTOR_CONFIRM', message, title)
-}
-
-ipcRendererInternal.on('ELECTRON_INSPECTOR_CONTEXT_MENU_CLICK', function (event, id) {
-  window.DevToolsAPI.contextMenuItemSelected(id)
-})
-
-ipcRendererInternal.on('ELECTRON_INSPECTOR_CONTEXT_MENU_CLOSE', function () {
-  window.DevToolsAPI.contextMenuCleared()
-})
-
-const useEditMenuItems = function (x, y, items) {
-  return items.length === 0 && document.elementsFromPoint(x, y).some(function (element) {
-    return element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA' || element.isContentEditable
-  })
-}
-
-const createMenu = function (x, y, items) {
-  const isEditMenu = useEditMenuItems(x, y, items)
-  ipcRendererUtils.invoke('ELECTRON_INSPECTOR_CONTEXT_MENU', items, isEditMenu)
-}
-
-const showFileChooserDialog = function (callback) {
-  ipcRendererUtils.invoke('ELECTRON_INSPECTOR_SELECT_FILE').then(([path, data]) => {
-    if (path && data) {
-      callback(dataToHtml5FileObject(path, data))
-    }
-  })
-}
-
-const dataToHtml5FileObject = function (path, data) {
-  const blob = new Blob([data])
-  blob.name = path
-  return blob
-}
-
-const createFileSelectorElement = function (callback) {
-  const fileSelectorElement = document.createElement('span')
-  fileSelectorElement.style.display = 'none'
-  fileSelectorElement.click = showFileChooserDialog.bind(this, callback)
-  return fileSelectorElement
-}

lib/renderer/inspector.ts

@@ -0,0 +1,64 @@
+import { ipcRendererInternal } from '@electron/internal/renderer/ipc-renderer-internal'
+import { invoke, invokeSync } from '@electron/internal/renderer/ipc-renderer-internal-utils'
+
+window.onload = function () {
+  // Use menu API to show context menu.
+  window.InspectorFrontendHost!.showContextMenuAtPoint = createMenu
+
+  // correct for Chromium returning undefined for filesystem
+  window.Persistence!.FileSystemWorkspaceBinding.completeURL = completeURL
+
+  // Use dialog API to override file chooser dialog.
+  window.UI!.createFileSelectorElement = createFileSelectorElement
+}
+
+// Extra / is needed as a result of MacOS requiring absolute paths
+function completeURL (project: string, path: string) {
+  project = 'file:///'
+  return `${project}${path}`
+}
+
+// The DOM implementation expects (message?: string) => boolean
+(window.confirm as any) = function (message: string, title: string) {
+  return invokeSync('ELECTRON_INSPECTOR_CONFIRM', message, title) as boolean
+}
+
+ipcRendererInternal.on('ELECTRON_INSPECTOR_CONTEXT_MENU_CLICK', function (_event: Electron.Event, id: number) {
+  window.DevToolsAPI!.contextMenuItemSelected(id)
+})
+
+ipcRendererInternal.on('ELECTRON_INSPECTOR_CONTEXT_MENU_CLOSE', function () {
+  window.DevToolsAPI!.contextMenuCleared()
+})
+
+const useEditMenuItems = function (x: number, y: number, items: any[]) {
+  return items.length === 0 && document.elementsFromPoint(x, y).some(function (element) {
+    return element.nodeName === 'INPUT' ||
+      element.nodeName === 'TEXTAREA' ||
+      (element as HTMLElement).isContentEditable
+  })
+}
+
+const createMenu = function (x: number, y: number, items: any[]) {
+  const isEditMenu = useEditMenuItems(x, y, items)
+  invoke('ELECTRON_INSPECTOR_CONTEXT_MENU', items, isEditMenu)
+}
+
+const showFileChooserDialog = function (callback: (blob: File) => void) {
+  invoke<[ string, any ]>('ELECTRON_INSPECTOR_SELECT_FILE').then(([path, data]) => {
+    if (path && data) {
+      callback(dataToHtml5FileObject(path, data))
+    }
+  })
+}
+
+const dataToHtml5FileObject = function (path: string, data: any) {
+  return new File([data], path)
+}
+
+const createFileSelectorElement = function (this: any, callback: () => void) {
+  const fileSelectorElement = document.createElement('span')
+  fileSelectorElement.style.display = 'none'
+  fileSelectorElement.click = showFileChooserDialog.bind(this, callback)
+  return fileSelectorElement
+}

typings/internal-ambient.d.ts

@@ -48,4 +48,19 @@ declare module NodeJS  {
 declare interface Window {
   ELECTRON_DISABLE_SECURITY_WARNINGS?: boolean;
   ELECTRON_ENABLE_SECURITY_WARNINGS?: boolean;
+  InspectorFrontendHost?: {
+    showContextMenuAtPoint: (x: number, y: number, items: any[]) => void
+  };
+  DevToolsAPI?: {
+    contextMenuItemSelected: (id: number) => void;
+    contextMenuCleared: () => void
+  };
+  UI?: {
+    createFileSelectorElement: (callback: () => void) => HTMLSpanElement
+  };
+  Persistence?: {
+    FileSystemWorkspaceBinding: {
+      completeURL: (project: string, path: string) => string;
+    }
+  }
 }