Replace applescript with https://github.com/sindresorhus/opn

Summary: This allows opening the Chrome debugger on OS X, Linux, and Windows, and succeeds the previous PR which used [browser-launcher2](https://github.com/benderjs/browser-launcher2) and included a `--dangerouslyDisableChromeDebuggerWebSecurity` option: #2406

[opn](https://github.com/sindresorhus/opn) is cross-platform and much simpler than browser-launcher2 (since we don't have to manage the opened Chrome instance; the OS will just use the default instance).
Closes #3394

Reviewed By: mkonicek

Differential Revision: D2550996

Pulled By: frantic

fb-gh-sync-id: fa4cbe55542562f30f77e0a6ab4bc53980ee13aa

Author: elliottsj

packager/getDevToolsMiddleware.js

@@ -10,9 +10,21 @@
 
 var execFile = require('child_process').execFile;
 var fs = require('fs');
+var opn = require('opn');
 var path = require('path');
 
-module.exports = function(options) {
+function getChromeAppName() {
+  switch (process.platform) {
+  case 'darwin':
+    return 'google chrome';
+  case 'win32':
+    return 'chrome';
+  default:
+    return 'google-chrome';
+  }
+}
+
+module.exports = function(options, isDebuggerConnected) {
   return function(req, res, next) {
     if (req.url === '/debugger-ui') {
       var debuggerPath = path.join(__dirname, 'debugger.html');
@@ -29,19 +41,18 @@ module.exports = function(options) {
         'If you still need this, please let us know.'
       );
     } else if (req.url === '/launch-chrome-devtools') {
+      if (isDebuggerConnected()) {
+        // Dev tools are already open; no need to open another session
+        res.end('OK');
+        return;
+      }
       var debuggerURL = 'http://localhost:' + options.port + '/debugger-ui';
-      var script = 'launchChromeDevTools.applescript';
       console.log('Launching Dev Tools...');
-      execFile(
-        path.join(__dirname, script), [debuggerURL],
-        function(err, stdout, stderr) {
-          if (err) {
-            console.log('Failed to run ' + script, err);
-          }
-          console.log(stdout);
-          console.warn(stderr);
+      opn(debuggerURL, {app: [getChromeAppName()]}, function(err) {
+        if (err) {
+          console.error('Google Chrome exited with error:', err);
         }
-      );
+      });
       res.end('OK');
     } else {
       next();

packager/launchChromeDevTools.applescript

@@ -22,7 +22,7 @@ function attachToServer(server, path) {
       try {
         cn.send(JSON.stringify(message));
       } catch(e) {
-        console.warn('WARN: ' + e.message);
+        // Sometimes this call throws 'not opened'
       }
     });
   }
@@ -57,7 +57,14 @@ function attachToServer(server, path) {
     });
   });
 
-  return wss;
+  return {
+    server: wss,
+    isChromeConnected: () =>
+      clients
+        .map(ws => ws.upgradeReq.headers['user-agent'])
+        .filter(Boolean)
+        .some(userAgent => userAgent.includes('Chrome'))
+  };
 }
 
 module.exports = {

packager/webSocketProxy.js

@@ -20,11 +20,13 @@ const path = require('path');
 const ReactPackager = require('../../../packager/react-packager');
 const statusPageMiddleware = require('../../../packager/statusPageMiddleware.js');
 const systraceProfileMiddleware = require('../../../packager/systraceProfileMiddleware.js');
+const webSocketProxy = require('../../../packager/webSocketProxy.js');
 
 function runServer(args, config, readyCallback) {
+  var wsProxy = null;
   const app = connect()
     .use(loadRawBodyMiddleware)
-    .use(getDevToolsMiddleware(args))
+    .use(getDevToolsMiddleware(args, () => wsProxy && wsProxy.isChromeConnected()))
     .use(openStackFrameInEditorMiddleware)
     .use(statusPageMiddleware)
     .use(systraceProfileMiddleware)
@@ -39,7 +41,15 @@ function runServer(args, config, readyCallback) {
     .use(connect.compress())
     .use(connect.errorHandler());
 
-  return http.createServer(app).listen(args.port, '::', readyCallback);
+  const serverInstance = http.createServer(app).listen(
+    args.port,
+    '::',
+    function() {
+      wsProxy = webSocketProxy.attachToServer(serverInstance, '/debugger-proxy');
+      webSocketProxy.attachToServer(serverInstance, '/devtools');
+      readyCallback();
+    }
+  );
 }
 
 function getAppMiddleware(args, config) {

private-cli/src/server/runServer.js

@@ -15,7 +15,6 @@ const parseCommandLine = require('../../../packager/parseCommandLine');
 const path = require('path');
 const Promise = require('promise');
 const runServer = require('./runServer');
-const webSocketProxy = require('../../../packager/webSocketProxy.js');
 
 /**
  * Starts the React Native Packager Server.
@@ -138,12 +137,9 @@ function _server(argv, config, resolve, reject) {
 }
 
 function startServer(args, config) {
-  const serverInstance = runServer(args, config, () =>
+  runServer(args, config, () =>
     console.log('\nReact packager ready.\n')
   );
-
-  webSocketProxy.attachToServer(serverInstance, '/debugger-proxy');
-  webSocketProxy.attachToServer(serverInstance, '/devtools');
 }
 
 function argToArray(arg) {