RN: Show Warning for Background Remote Debuggers

Summary:
Some recent change to Chrome causes the remote debugger to be throttled unexpectedly if it is in a background tab. Although this does not fix the problem, it raises the issue and suggests a workaround.

I also cleaned up some littering of the global namespace in the debugger web worker.

Reviewed By: jingc

Differential Revision: D4104515

fbshipit-source-id: 56e46c0e759bec4c42d3baedd4d2d46cdea2e4a0

local-cli/server/util/debugger.html

@@ -48,6 +48,7 @@ function connectToDebuggerProxy() {
       return 'If you reload this page, it is going to break the debugging session. ' +
         'You should press' + refresh_shortcut + 'in simulator to reload.';
     };
+    updateVisibility();
   }
 
   function shutdownJSRuntime() {
@@ -58,6 +59,15 @@ function connectToDebuggerProxy() {
     }
   }
 
+  function updateVisibility() {
+    if (worker) {
+      worker.postMessage({
+        method: 'setDebuggerVisibility',
+        visibilityState: document.visibilityState,
+      });
+    }
+  }
+
   ws.onopen = function() {
     setStatus(INITIAL_MESSAGE);
   };
@@ -103,6 +113,10 @@ function connectToDebuggerProxy() {
     }
     setTimeout(connectToDebuggerProxy, 500);
   };
+
+  // Let debuggerWorker.js know when we're not visible so that we can warn about
+  // poor performance when using remote debugging.
+  document.addEventListener('visibilitychange', updateVisibility, false);
 }
 
 connectToDebuggerProxy();

local-cli/server/util/debuggerWorker.js

@@ -6,11 +6,31 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */
+
 /* global __fbBatchedBridge, self, importScripts, postMessage, onmessage: true */
 /* eslint no-unused-vars: 0 */
+
 'use strict';
 
-var messageHandlers = {
+onmessage = (function() {
+  var visibilityState;
+  var showVisibilityWarning = (function() {
+    var hasWarned = false;
+    return function() {
+      // Wait until `YellowBox` gets initialized before displaying the warning.
+      if (hasWarned || console.warn.toString().includes('[native code]')) {
+        return;
+      }
+      hasWarned = true;
+      console.warn(
+        'Remote debugger is in a background tab which may cause apps to ' +
+        'perform slowly. Fix this by foregrounding the tab (or opening it in ' +
+        'a separate window).'
+      );
+    };
+  })();
+
+  var messageHandlers = {
     'executeApplicationScript': function(message, sendReply) {
       for (var key in message.inject) {
         self[key] = JSON.parse(message.inject[key]);
@@ -22,10 +42,17 @@ var messageHandlers = {
         error = JSON.stringify(err);
       }
       sendReply(null /* result */, error);
-  }
+    },
-};
+    'setDebuggerVisibility': function(message) {
+      visibilityState = message.visibilityState;
+    },
+  };
+
+  return function(message) {
+    if (visibilityState === 'hidden') {
+      showVisibilityWarning();
+    }
 
-onmessage = function(message) {
     var object = message.data;
 
     var sendReply = function(result, error) {
@@ -47,4 +74,5 @@ onmessage = function(message) {
         sendReply(JSON.stringify(returnValue));
       }
     }
-};
+  };
+})();