Merge pull request #6459 from electron/devtools-context-menu

Add edit menu items to editable elements in dev tools

lib/browser/api/menu-item-roles.js

@@ -138,7 +138,11 @@ exports.execute = (role, focusedWindow) => {
   if (webContentsMethod && focusedWindow != null) {
     const {webContents} = focusedWindow
     if (webContents) {
-      webContents[webContentsMethod]()
+      if (webContents.isDevToolsFocused()) {
+        webContents.devToolsWebContents[webContentsMethod]()
+      } else {
+        webContents[webContentsMethod]()
+      }
     }
     return true
   }

lib/renderer/inspector.js

@@ -6,12 +6,9 @@ window.onload = function () {
   window.WebInspector.createFileSelectorElement = createFileSelectorElement
 }
 
-var convertToMenuTemplate = function (items) {
-  var fn, i, item, len, template
-  template = []
-  fn = function (item) {
-    var transformed
-    transformed = item.type === 'subMenu' ? {
+const convertToMenuTemplate = function (items) {
+  return items.map(function (item) {
+    const transformed = item.type === 'subMenu' ? {
       type: 'submenu',
       label: item.label,
       enabled: item.enabled,
@@ -28,53 +25,89 @@ var convertToMenuTemplate = function (items) {
       label: item.label,
       enabled: item.enabled
     }
+
     if (item.id != null) {
       transformed.click = function () {
         window.DevToolsAPI.contextMenuItemSelected(item.id)
         return window.DevToolsAPI.contextMenuCleared()
       }
     }
-    return template.push(transformed)
-  }
-  for (i = 0, len = items.length; i < len; i++) {
-    item = items[i]
-    fn(item)
-  }
-  return template
-}
 
-var createMenu = function (x, y, items) {
-  const remote = require('electron').remote
-  const Menu = remote.Menu
-  const menu = Menu.buildFromTemplate(convertToMenuTemplate(items))
-
-  // The menu is expected to show asynchronously.
-  return setTimeout(function () {
-    return menu.popup(remote.getCurrentWindow())
+    return transformed
   })
 }
 
-var showFileChooserDialog = function (callback) {
-  var dialog, files, remote
-  remote = require('electron').remote
-  dialog = remote.dialog
-  files = dialog.showOpenDialog({})
+const createMenu = function (x, y, items) {
+  const {remote} = require('electron')
+  const {Menu} = remote
+
+  let template = convertToMenuTemplate(items)
+  if (useEditMenuItems(x, y, template)) {
+    template = getEditMenuItems()
+  }
+  const menu = Menu.buildFromTemplate(template)
+
+  // The menu is expected to show asynchronously.
+  setTimeout(function () {
+    menu.popup(remote.getCurrentWindow())
+  })
+}
+
+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 getEditMenuItems = function () {
+  return [
+    {
+      role: 'undo'
+    },
+    {
+      role: 'redo'
+    },
+    {
+      type: 'separator'
+    },
+    {
+      role: 'cut'
+    },
+    {
+      role: 'copy'
+    },
+    {
+      role: 'paste'
+    },
+    {
+      role: 'pasteandmatchstyle'
+    },
+    {
+      role: 'delete'
+    },
+    {
+      role: 'selectall'
+    }
+  ]
+}
+
+const showFileChooserDialog = function (callback) {
+  const {dialog} = require('electron').remote
+  const files = dialog.showOpenDialog({})
   if (files != null) {
-    return callback(pathToHtml5FileObject(files[0]))
+    callback(pathToHtml5FileObject(files[0]))
   }
 }
 
-var pathToHtml5FileObject = function (path) {
-  var blob, fs
-  fs = require('fs')
-  blob = new Blob([fs.readFileSync(path)])
+const pathToHtml5FileObject = function (path) {
+  const fs = require('fs')
+  const blob = new Blob([fs.readFileSync(path)])
   blob.name = path
   return blob
 }
 
-var createFileSelectorElement = function (callback) {
-  var fileSelectorElement
-  fileSelectorElement = document.createElement('span')
+const createFileSelectorElement = function (callback) {
+  const fileSelectorElement = document.createElement('span')
   fileSelectorElement.style.display = 'none'
   fileSelectorElement.click = showFileChooserDialog.bind(this, callback)
   return fileSelectorElement