Refactored bridge to support transferrables (e.g. typed array buffers) and added transferable param to postMessage for op codes

shells/browser/chrome/test.js

@@ -3,7 +3,7 @@
 const chromeLaunch = require('chrome-launch'); // eslint-disable-line import/no-extraneous-dependencies
 const { resolve } = require('path');
 
-const EXTENSION_PATH = resolve('shells/chrome/build/unpacked');
+const EXTENSION_PATH = resolve('shells/browser/chrome/build/unpacked');
 const START_URL = 'https://facebook.github.io/react/';
 
 chromeLaunch(START_URL, {

shells/browser/firefox/test.js

@@ -4,7 +4,7 @@ const { exec } = require('child-process-promise');
 const { Finder } = require('firefox-profile');
 const { resolve } = require('path');
 
-const EXTENSION_PATH = resolve('shells/firefox/build/unpacked');
+const EXTENSION_PATH = resolve('shells/browser/firefox/build/unpacked');
 const START_URL = 'https://facebook.github.io/react/';
 
 const main = async () => {

shells/browser/shared/src/backend.js

@@ -42,13 +42,14 @@ function setup(hook) {
       listeners.push(listener);
       window.addEventListener('message', listener);
     },
-    send(data) {
+    send(event: string, payload: any, transferable?: Array<any>) {
       window.postMessage(
         {
           source: 'react-devtools-bridge',
-          payload: data,
+          payload: { event, payload },
         },
-        '*'
+        '*',
+        transferable
       );
     },
   });

shells/browser/shared/src/panel.js

@@ -50,11 +50,11 @@ inject(chrome.runtime.getURL('build/backend.js'), () => {
     listen(fn) {
       port.onMessage.addListener(message => fn(message));
     },
-    send(data) {
+    send(event: string, payload: any, transferable?: Array<any>) {
       if (disconnected) {
         return;
       }
-      port.postMessage(data);
+      port.postMessage({ event, payload }, transferable);
     },
   });
 

shells/dev/src/backend.js

@@ -10,8 +10,8 @@ const bridge = new Bridge({
       fn(event.data);
     });
   },
-  send(data) {
-    window.parent.postMessage(data, '*');
+  send(event: string, payload: any, transferable?: Array<any>) {
+    window.parent.postMessage({ event, payload }, '*', transferable);
   },
 });
 

shells/dev/src/devtools.js

@@ -46,8 +46,8 @@ initDevTools({
             fn(data);
           });
         },
-        send(data) {
-          contentWindow.postMessage(data, '*');
+        send(event: string, payload: any, transferable?: Array<any>) {
+          contentWindow.postMessage({ event, payload }, '*', transferable);
         },
       });
 

src/backend/agent.js

@@ -44,7 +44,7 @@ export default class Agent extends EventEmitter {
 
   onHookOperations = (operations: Uint32Array) => {
     debug('onHookOperations', operations);
-    this._bridge.send('operations', operations);
+    this._bridge.send('operations', operations, [operations.buffer]);
   };
 
   onHookRootCommitted = (rootID: string) => {

src/bridge.js

@@ -12,7 +12,7 @@ type Message = {|
 |};
 
 export default class Bridge extends EventEmitter {
-  _messageQueue: Array<Message> = [];
+  _messageQueue: Array<any> = [];
   _time: number | null = null;
   _timeoutID: TimeoutID | null = null;
 
@@ -22,33 +22,20 @@ export default class Bridge extends EventEmitter {
     super();
 
     this.wall = wall;
-    wall.listen(messages => {
-      if (Array.isArray(messages)) {
-        messages.forEach(message => this._emit(message));
-      } else {
-        this._emit(messages);
-      }
+
+    wall.listen((message: Message) => {
+      this._emit(message);
     });
   }
 
-  /**
-   * Send an event.
-   *
-   * @param {String} event
-   * @param {*} payload
-   */
-
-  send(event: string, payload: any) {
+  send(event: string, payload: any, transferable?: Array<any>) {
     const time = this._time;
 
     if (time === null) {
-      this.wall.send([{ event, payload }]);
+      this.wall.send(event, payload, transferable);
       this._time = Date.now();
     } else {
-      this._messageQueue.push({
-        event,
-        payload,
-      });
+      this._messageQueue.push(event, payload, transferable);
 
       const now = Date.now();
       if (now - time > BATCH_DURATION) {
@@ -59,24 +46,20 @@ export default class Bridge extends EventEmitter {
     }
   }
 
-  /**
-   * Log a message to the devtools background page.
-   *
-   * @param {String} message
-   */
-
   log(message: string): void {
     this.send('log', message);
   }
 
   _flush() {
-    if (this._messageQueue.length) {
-      this.wall.send(this._messageQueue);
+    while (this._messageQueue.length) {
+      this.wall.send.apply(this.wall, this._messageQueue.splice(0, 3));
     }
+
     if (this._timeoutID !== null) {
       clearTimeout(this._timeoutID);
       this._timeoutID = null;
     }
+
     this._messageQueue = [];
     this._time = null;
   }

src/devtools/store.js

@@ -102,6 +102,11 @@ export default class Store extends EventEmitter {
   }
 
   onBridgeOperations = (operations: Uint32Array) => {
+    if (!(operations instanceof Uint32Array)) {
+      // $FlowFixMe TODO HACK Temporary workaround for the fact that Chrome is not transferring the typed array.
+      operations = Uint32Array.from(Object.values(operations));
+    }
+
     debug('onBridgeOperations', operations);
 
     let haveRootsChanged = false;

src/types.js

@@ -8,5 +8,5 @@ export type Hook = any;
 
 export type Wall = {|
   listen: (fn: Function) => void,
-  send: (data: any) => void,
+  send: (event: string, payload: any, transferable?: Array<any>) => void,
 |};