Open DevTools window to left, right, bottom or as a chrome panel

Related to #24.

Author: zalmoxisus

.eslintrc

@@ -26,7 +26,8 @@
     "no-undef": 0,
     "id-length": 0,
     "indent": [2, 2, {"SwitchCase": 1}],
-    "new-cap": [2, { "capIsNewExceptions": ["Test"] }]
+    "new-cap": [2, { "capIsNewExceptions": ["Test"] }],
+    "default-case": 0
   },
   "plugins": [
     "react"

src/browser/extension/background/contextMenus.js

@@ -1,5 +1,5 @@
+import openDevToolsWindow from './openWindow';
 import { MENU_DEVTOOLS } from '../../../app/constants/ContextMenus.js';
-let windows = {devtools: 0};
 
 function addToMenu(id, title, contexts, onClick) {
   chrome.contextMenus.create({
@@ -11,37 +11,6 @@ function addToMenu(id, title, contexts, onClick) {
   });
 }
 
-function focusIfExist(type, callback) {
-  if (!windows[type]) {
-    callback();
-  } else {
-    chrome.windows.update(windows[type], {focused: true}, () => {
-      if (chrome.runtime.lastError) callback();
-    });
-  }
-}
-
-function popWindow(action, url, type, customOptions) {
-  focusIfExist(type, () => {
-    let options = {
-      type: 'panel',
-      left: 5, top: 100,
-      width: 800, height: 700,
-      ...customOptions
-    };
-    if (action === 'open') {
-      options.url = chrome.extension.getURL(url);
-      chrome.windows.create(options, (win) => {
-        windows[type] = win.id;
-      });
-    }
-  });
-}
-
-export function openDevToolsWindow() {
-  popWindow('open', 'window.html', 'devtools', {width: 320});
-}
-
 export default function createMenu() {
   addToMenu(MENU_DEVTOOLS, 'Open Redux DevTools', ['all'], openDevToolsWindow);
 }

src/browser/extension/background/messaging.js

@@ -1,7 +1,7 @@
 import { onConnect, onMessage, sendToTab } from 'crossmessaging';
 import syncOptions from '../options/syncOptions';
 import { MENU_DEVTOOLS } from '../../../app/constants/ContextMenus';
-import { openDevToolsWindow } from './contextMenus';
+import openDevToolsWindow from './openWindow';
 let connections = {};
 
 window.syncOptions = syncOptions; // Used in the options page

src/browser/extension/background/openWindow.js

@@ -0,0 +1,49 @@
+let windows = {devtools: 0};
+let lastPosition = null;
+
+export default function openDevToolsWindow(position) {
+  function popWindow(action, url, type, customOptions) {
+    function focusIfExist(callback) {
+      if (!windows[type]) {
+        callback();
+        lastPosition = position;
+      } else {
+        let params = {focused: true};
+        if (lastPosition !== position && position !== 'devtools-panel') params = {...params, ...customOptions};
+        chrome.windows.update(windows[type], params, () => {
+          lastPosition = null;
+          if (chrome.runtime.lastError) callback();
+        });
+      }
+    }
+
+    focusIfExist(() => {
+      let options = {
+        type: 'popup',
+        ...customOptions
+      };
+      if (action === 'open') {
+        options.url = chrome.extension.getURL(url);
+        chrome.windows.create(options, (win) => {
+          windows[type] = win.id;
+        });
+      }
+    });
+  }
+
+  let params = { left: 0, top: 0, width: 320, height: window.screen.availHeight };
+  switch (position) {
+    case 'devtools-right':
+      params.left = window.screen.availWidth - params.width;
+      break;
+    case 'devtools-bottom':
+      params.height = 320;
+      params.top = window.screen.availHeight - 320;
+      params.width = window.screen.availWidth;
+      break;
+    case 'devtools-panel':
+      params.type = 'panel';
+      break;
+  }
+  popWindow('open', 'window.html', 'devtools', params);
+}

src/browser/extension/manifest.json

@@ -9,6 +9,32 @@
     "default_title": "Redux DevTools",
     "default_popup": "window.html"
   },
+  "commands": {
+    "devtools-left": {
+      "suggested_key": {
+        "default": "Alt+Shift+Left"
+      },
+      "description": "DevTools window to left"
+    },
+    "devtools-right": {
+      "suggested_key": {
+        "default": "Alt+Shift+Right"
+      },
+      "description": "DevTools window to right"
+    },
+    "devtools-bottom": {
+      "suggested_key": {
+        "default": "Alt+Shift+Down"
+      },
+      "description": "DevTools window to bottom"
+    },
+    "devtools-panel": {
+      "suggested_key": {
+        "default": "Alt+Shift+Up"
+      },
+      "description": "DevTools in panel"
+    }
+  },
   "icons": {
     "16": "img/logo/16x16.png",
     "48": "img/logo/48x48.png",