Bring back ability to open a chrome panel

Related to #52.

Author: zalmoxisus

README.md

@@ -115,6 +115,8 @@ To include it in a chrome extension's content script follow [the example](https:
 ```js
 window.devToolsExtension.open();
 ```
+#### How to keep DevTools window focused all the time in a chrome panel
+To enable chrome panels feature in Chrome, type in `chrome://flags/#enable-panels` in the url bar and click on "enable" under "enable panels". Make sure to click on "relaunch now " at the bottom of the page, to take effect.
 #### How to include DevTools in the page
 You may open DevTools in a new window (by opening context menu with right mouse click), from popup (clicking on the browser action button) or from Chrome dev panel. If you still, for some reason, want to include it directly in your page, load the following url in iframe: `chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/window.html`. You'd probably include it in a docker or in a resizeable component.
 #### How to enable/disable errors notifying

src/app/containers/App.js

@@ -61,7 +61,7 @@ export default class App extends Component {
             : null }
             <Button
               Icon={RemoteIcon}
-              onClick={() => { this.openWindow('panel'); }}
+              onClick={() => { this.openWindow('remote'); }}
             >Remote</Button>
             <Button
               Icon={SettingsIcon}

src/browser/extension/background/contextMenus.js

@@ -4,7 +4,8 @@ const menus = [
   { id: 'devtools-left', title: 'To left' },
   { id: 'devtools-right', title: 'To right' },
   { id: 'devtools-bottom', title: 'To bottom' },
-  { id: 'devtools-panel', title: 'In panel' }
+  { id: 'devtools-panel', title: 'Open in a chrome panel (enable in Chrome settings)' },
+  { id: 'devtools-remote', title: 'Open Remote DevTools' }
 ];
 let pageUrl;
 let pageTab;
@@ -31,7 +32,7 @@ export default function createMenu(forUrl, tabId) {
   menus.forEach(({ id, title }) => {
     chrome.contextMenus.create({
       id: id,
-      title: title + ' (' + shortcuts[id] + ')',
+      title: title + (shortcuts[id] ? ' (' + shortcuts[id] + ')' : ''),
       contexts: ['all'],
       documentUrlPatterns: [url],
       onclick: () => { openDevToolsWindow(id); }

src/browser/extension/background/messaging.js

@@ -41,7 +41,7 @@ function messaging(request, sender, sendResponse) {
     }
     if (request.type === 'OPEN') {
       let position = 'devtools-left';
-      if (['panel', 'left', 'right', 'bottom'].indexOf(request.position) !== -1) position = 'devtools-' + request.position;
+      if (['remote', 'panel', 'left', 'right', 'bottom'].indexOf(request.position) !== -1) position = 'devtools-' + request.position;
       openDevToolsWindow(position);
       return true;
     }

src/browser/extension/background/openWindow.js

@@ -25,7 +25,7 @@ export default function openDevToolsWindow(position) {
       };
       if (action === 'open') {
         getMonitorName(position, monitorName => {
-          options.url = chrome.extension.getURL(url + '#' + monitorName + '/' + position);
+          options.url = chrome.extension.getURL(url + (monitorName ? '#' + monitorName + '/' + position : ''));
           chrome.windows.create(options, (win) => {
             windows[position] = win.id;
           });
@@ -46,6 +46,9 @@ export default function openDevToolsWindow(position) {
       params.width = window.screen.availWidth;
       break;
     case 'devtools-panel':
+      params.type = 'panel';
+      break;
+    case 'devtools-remote':
       params = { width: 850, height: 600 };
       url = 'remote.html';
       break;

src/browser/extension/manifest.json

@@ -31,12 +31,12 @@
       },
       "description": "DevTools window to bottom"
     },
-    "devtools-panel": {
+    "devtools-remote": {
       "suggested_key": {
         "default": "Alt+Shift+Up",
         "mac": "Command+MacCtrl+Up"
       },
-      "description": "DevTools in panel"
+      "description": "Remote DevTools"
     }
   },
   "icons": {