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,45 +6,73 @@
  * 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 = {
-  'executeApplicationScript': function(message, sendReply) {
-    for (var key in message.inject) {
-      self[key] = JSON.parse(message.inject[key]);
-    }
-    var error;
-    try {
-      importScripts(message.url);
-    } catch (err) {
-      error = JSON.stringify(err);
-    }
-    sendReply(null /* result */, error);
-  }
-};
+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).'
+      );
+    };
+  })();
 
-onmessage = function(message) {
-  var object = message.data;
-
-  var sendReply = function(result, error) {
-    postMessage({replyID: object.id, result: result, error: error});
+  var messageHandlers = {
+    'executeApplicationScript': function(message, sendReply) {
+      for (var key in message.inject) {
+        self[key] = JSON.parse(message.inject[key]);
+      }
+      var error;
+      try {
+        importScripts(message.url);
+      } catch (err) {
+        error = JSON.stringify(err);
+      }
+      sendReply(null /* result */, error);
+    },
+    'setDebuggerVisibility': function(message) {
+      visibilityState = message.visibilityState;
+    },
   };
 
-  var handler = messageHandlers[object.method];
-  if (handler) {
-    // Special cased handlers
-    handler(object, sendReply);
-  } else {
-    // Other methods get called on the bridge
-    var returnValue = [[], [], [], 0];
-    try {
-      if (typeof __fbBatchedBridge === 'object') {
-        returnValue = __fbBatchedBridge[object.method].apply(null, object.arguments);
-      }
-    } finally {
-      sendReply(JSON.stringify(returnValue));
+  return function(message) {
+    if (visibilityState === 'hidden') {
+      showVisibilityWarning();
     }
-  }
-};
+
+    var object = message.data;
+
+    var sendReply = function(result, error) {
+      postMessage({replyID: object.id, result: result, error: error});
+    };
+
+    var handler = messageHandlers[object.method];
+    if (handler) {
+      // Special cased handlers
+      handler(object, sendReply);
+    } else {
+      // Other methods get called on the bridge
+      var returnValue = [[], [], [], 0];
+      try {
+        if (typeof __fbBatchedBridge === 'object') {
+          returnValue = __fbBatchedBridge[object.method].apply(null, object.arguments);
+        }
+      } finally {
+        sendReply(JSON.stringify(returnValue));
+      }
+    }
+  };
+})();