├── .travis.yml
├── example-webview.html
├── .editorconfig
├── package.json
├── example.html
├── test.js
├── license
├── .gitignore
├── index.js
└── readme.md
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 'stable'
4 | sudo: false
5 |
--------------------------------------------------------------------------------
/example-webview.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | example - webview
5 |
6 |
7 |
8 |
9 | Hola in webview
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | root = true
3 |
4 | [*]
5 | end_of_line = lf
6 | insert_final_newline = true
7 | trim_trailing_whitespace = true
8 |
9 | [*.js]
10 | indent_style = tab
11 |
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "debug-menu",
3 | "version": "0.6.1",
4 | "description": "Chrome-like \"inspect element\" context-menu",
5 | "repository": "parro-it/debug-menu",
6 | "author": "andrea@parro.it",
7 | "scripts": {
8 | "test": "xo --env=node --env=browser",
9 | "start": "electron test.js"
10 | },
11 | "license": "MIT",
12 | "keywords": [
13 | "electron",
14 | "debug",
15 | "inspect",
16 | "element"
17 | ],
18 | "files": [
19 | "index.js"
20 | ],
21 | "devDependencies": {
22 | "electron": "^1.6.2",
23 | "electron-contextmenu-middleware": "^1.0.1",
24 | "xo": "^0.18.1"
25 | },
26 | "dependencies": {
27 | "electron-debug": "^1.1.0",
28 | "electron-is-dev": "^0.3.0"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | example
5 |
6 |
7 |
8 |
9 | Hola
10 |
11 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const electron = require('electron');
3 | const debugMenu = require('.');
4 |
5 | electron.app.on('ready', () => {
6 | const win = new electron.BrowserWindow({
7 | show: true
8 | });
9 |
10 | const menu = electron.Menu.buildFromTemplate([
11 | {
12 | label: 'Debug',
13 | submenu: debugMenu.windowDebugMenu(win)
14 | }
15 | ]);
16 |
17 | if (process.platform === 'darwin') {
18 | electron.Menu.setApplicationMenu(menu);
19 | } else {
20 | win.setMenu(menu);
21 | }
22 |
23 | win.webContents.executeJavaScript(`
24 | require('${__dirname}').install();
25 | `);
26 |
27 | win.loadURL('https://google.com');
28 |
29 | const win2 = new electron.BrowserWindow({
30 | show: true
31 | });
32 |
33 | win2.loadURL(`file://${__dirname}/example.html`);
34 | });
35 |
--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | Copyright (c) 2016 Andrea Parodi
3 |
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
18 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
19 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
20 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
21 | OR OTHER DEALINGS IN THE SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | #### joe made this: http://goel.io/joe
2 |
3 | #####=== SublimeText ===#####
4 | # cache files for sublime text
5 | *.tmlanguage.cache
6 | *.tmPreferences.cache
7 | *.stTheme.cache
8 |
9 | # workspace files are user-specific
10 | *.sublime-workspace
11 |
12 | # project files should be checked into the repository, unless a significant
13 | # proportion of contributors will probably not be using SublimeText
14 | # *.sublime-project
15 |
16 | # sftp configuration file
17 | sftp-config.json
18 |
19 | #####=== Node ===#####
20 |
21 | # Logs
22 | logs
23 | *.log
24 |
25 | # Runtime data
26 | pids
27 | *.pid
28 | *.seed
29 |
30 | # Directory for instrumented libs generated by jscoverage/JSCover
31 | lib-cov
32 |
33 | # Coverage directory used by tools like istanbul
34 | coverage
35 |
36 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
37 | .grunt
38 |
39 | # node-waf configuration
40 | .lock-wscript
41 |
42 | # Compiled binary addons (http://nodejs.org/api/addons.html)
43 | build/Release
44 |
45 | # Dependency directory
46 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
47 | node_modules
48 |
49 | # Debug log from npm
50 | npm-debug.log
51 |
52 |
53 | private
54 | init
55 | yarn.lock
56 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const electron = require('electron');
4 |
5 | let menu = null;
6 | let posX = 0;
7 | let posY = 0;
8 | let elm = null;
9 |
10 | function inspectMenuTemplate() {
11 | return {
12 | label: 'Inspect element',
13 | click: () => (elm || electron.remote.getCurrentWindow()).inspectElement(posX, posY)
14 | };
15 | }
16 |
17 | function inspectElementMenu() {
18 | const Menu = process.type === 'renderer' ?
19 | electron.remote.Menu :
20 | electron.Menu;
21 |
22 | const MenuItem = process.type === 'renderer' ?
23 | electron.remote.MenuItem :
24 | electron.MenuItem;
25 |
26 | const mnu = new Menu();
27 |
28 | mnu.append(new MenuItem(
29 | inspectMenuTemplate()
30 | ));
31 |
32 | return mnu;
33 | }
34 |
35 | function ifInspectable(elm) {
36 | if (elm && (typeof elm.inspectElement === 'function')) {
37 | return elm;
38 | }
39 | }
40 |
41 | function onContextMenu(e) {
42 | if (menu === null) {
43 | menu = inspectElementMenu();
44 | }
45 |
46 | posX = e.x;
47 | posY = e.y;
48 | elm = ifInspectable(e.target);
49 |
50 | e.preventDefault();
51 | menu.popup(electron.remote.getCurrentWindow());
52 | }
53 |
54 | exports.middleware = (ctx, next) => {
55 | posX = ctx.click.x;
56 | posY = ctx.click.y;
57 | elm = ifInspectable(ctx.elm);
58 |
59 | ctx.menu.push(inspectMenuTemplate());
60 | next();
61 | };
62 |
63 | exports.install = () => {
64 | window.addEventListener('contextmenu', onContextMenu);
65 | };
66 |
67 | exports.uninstall = () => {
68 | window.removeEventListener('contextmenu', onContextMenu);
69 | };
70 |
71 | function openDevTools(_win) {
72 | const win = _win || electron.BrowserWindow.getFocusedWindow();
73 |
74 | if (win) {
75 | if (win.webContents.isDevToolsOpened()) {
76 | win.webContents.closeDevTools();
77 | }
78 |
79 | win.webContents.openDevTools();
80 | }
81 | }
82 |
83 | exports.windowDebugMenu = _win => {
84 | const electronDebug = require('electron-debug');
85 | const win = _win || electron.BrowserWindow.getFocusedWindow();
86 |
87 | return [
88 | {
89 | label: 'Devtools',
90 | submenu: [{
91 | label: 'Toggle',
92 | click: () => {
93 | electronDebug.devTools(win);
94 | },
95 | accelerator: 'F12'
96 |
97 | }, {
98 | label: 'Show',
99 | click: () => {
100 | openDevTools(win);
101 | },
102 | accelerator: 'CmdOrCtrl+F12'
103 | }]
104 | }, {
105 | label: 'Current window',
106 | submenu: [{
107 | label: 'Close',
108 | click: () => win.close(),
109 | accelerator: 'CmdOrCtrl+Q'
110 | }, {
111 | label: 'Reload',
112 | click: () => electronDebug.refresh(win),
113 | accelerator: 'F5'
114 | }]
115 | }, {
116 | label: 'App',
117 | submenu: [{
118 | label: 'Quit',
119 | click: () => electron.app.quit(),
120 | accelerator: 'Shift+CmdOrCtrl+Q'
121 | }, {
122 | label: 'Exit',
123 | click: () => electron.app.exit(0),
124 | accelerator: 'Shift+CmdOrCtrl+Esc'
125 | }]
126 | }
127 | ];
128 | };
129 |
130 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # debug-menu
2 |
3 | [](https://greenkeeper.io/)
4 |
5 | Chrome-like "inspect element" context-menu for [Electron](http://electron.atom.io)
6 |
7 | > This module was extracted from [electron-debug](https://github.com/sindresorhus/electron-debug) to keep it focused on its main features.
8 |
9 | [](http://travis-ci.org/parro-it/debug-menu)
10 | [](https://npmjs.org/package/debug-menu)
11 | [](https://npmjs.org/package/debug-menu)
12 |
13 | # Context menu items
14 |
15 | ## Inspect element
16 |
17 | Inspect the clicked HTML element.
18 | It shows DevTools if it's not already opened.
19 |
20 |
21 | # Install
22 |
23 | ```
24 | $ npm install --save-dev debug-menu
25 | ```
26 |
27 | # Usage
28 |
29 | When you use this module in renderer process code,
30 | `BrowserWindow` instance need to be opened with node integration enabled.
31 |
32 | We usually load this module only if the `DEBUG` environment variable is defined, to avoid end users of the app inadvertently opening DevTools.
33 |
34 | ```js
35 | const debugMenu = require('debug-menu');
36 | debugMenu.install(); // activate context menu
37 |
38 | // later, if needed
39 | debugMenu.uninstall(); // deactivate context menu
40 | ```
41 |
42 | # API
43 |
44 | ## debugMenu.install()
45 |
46 | Activate context menu. This method add a listener on `window` DOM object `contextmenu` event.
47 |
48 | ## debugMenu.middleware
49 |
50 | Expose a middleware context menu that can be mounted with [electron-contextmenu-middleware](https://github.com/parro-it/electron-contextmenu-middleware). See [related example](#middleware-example)
51 |
52 |
53 |
54 | ## debugMenu.uninstall()
55 |
56 | Deactivate context menu. This method remove the listener on `window` object.
57 |
58 | ## debugMenu.windowDebugMenu(win);
59 |
60 | The debug [Menu](http://electron.atom.io/docs/latest/api/menu/) object template. You can use it to integrate with your own app context or `BrowserWindow` menu.
61 |
62 | ### Arguments
63 |
64 | * win
65 |
66 | `BrowserWindow` instance to use for this Menu.
67 |
68 | Type: `BrowserWindow`
69 | Default: the currently focused `BrowserWindow`.
70 |
71 | # Example
72 |
73 | ```js
74 | // ... require electron module
75 |
76 | const debugMenu = require('debug-menu');
77 | const win = new BrowserWindow();
78 |
79 | const menu = Menu.buildFromTemplate([{
80 | label: 'Debug',
81 | submenu: debugMenu.windowDebugMenu(win)
82 | }]);
83 |
84 | if (process.platform !== 'darwin') {
85 | win.setMenu(menu);
86 | } else {
87 | electron.Menu.setApplicationMenu(menu);
88 | }
89 |
90 | // ... show window
91 | ```
92 |
93 | # Middleware example
94 |
95 | ```js
96 | const debugMenu = require('debug-menu').middleware;
97 | const context = require('electron-contextmenu-middleware');
98 |
99 | context.use(debugMenu);
100 |
101 | context.activate();
102 | ```
103 |
104 | # Related projects
105 |
106 | * [electron-contextmenu-middleware](https://github.com/parro-it/electron-contextmenu-middleware) - Build `electron` context menus composing multiple middlewares functions.
107 |
108 | * [electron-input-menu](https://github.com/parro-it/electron-input-menu) - Context menu for [electron](https://github.com/atom/electron) input elements.
109 |
110 |
111 | # License
112 |
113 | The MIT License (MIT)
114 |
115 | Copyright (c) 2016 Andrea Parodi
116 |
117 |
118 |
119 |
--------------------------------------------------------------------------------