Merge pull request #118 from facebook/fix-show-elements-pane

fix "show elements pane" in chrome extension #109

Author: jaredly

agent/Bridge.js

@@ -15,7 +15,7 @@ var hydrate = require('./hydrate');
 var dehydrate = require('./dehydrate');
 
 type AnyFn = (...x: any) => any;
-type Wall = {
+export type Wall = {
   listen: (fn: (data: PayloadType) => void) => void,
   send: (data: PayloadType) => void,
 };

frontend/Panel.js

@@ -22,20 +22,21 @@ var NativeStyler = require('../plugins/ReactNativeStyle/ReactNativeStyle.js');
 var consts = require('../agent/consts');
 
 import type {DOMEvent} from './types';
+import type {Wall} from '../agent/Bridge';
 
-type Props = {
+export type Props = {
   alreadyFoundReact: boolean,
-  inject: () => void,
+  inject: (done: (wall: Wall, onDisconnect?: () => void) => void) => void,
   checkForReact: (cb: (isReact: boolean) => void) => void,
   reload: () => void,
 
   // optionals
   showComponentSource: ?() => void,
-  reloadSubscribe: ?() => () => void,
-  showAttrSource: ?() => void,
-  executeFn: ?() => void,
-  selectElement: ?() => void,
-  getNewSelection: ?() => void,
+  reloadSubscribe: ?(reloadFn: () => void) => () => void,
+  showAttrSource: ?(path: Array<string>) => void,
+  executeFn: ?(path: Array<string>) => void,
+  selectElement: ?(id: string, bridge: Bridge) => void,
+  getNewSelection: ?(bridge: Bridge) => void,
 };
 
 class Panel extends React.Component {
@@ -107,6 +108,7 @@ class Panel extends React.Component {
       return;
     }
     invariant(this.props.selectElement, 'cannot send selection if props.selectElement is not defined');
+    // $FlowFixMe either id or this._store.selected is a string
     this.props.selectElement(id || this._store.selected, this._bridge);
   }
 

shells/chrome/src/panel.js

@@ -13,6 +13,8 @@
 var checkForReact = require('./checkForReact');
 var inject = require('./inject');
 
+import type {Props} from '../../../frontend/Panel';
+
 type Listenable = {
   addListener: (fn: (message: Object) => void) => void,
 }
@@ -43,9 +45,10 @@ declare var chrome: {
   },
 };
 
-var config = {
+var config: Props = {
   reload,
   checkForReact,
+  alreadyFoundReact: false,
   reloadSubscribe(reloadFn) {
     chrome.devtools.network.onNavigated.addListener(reloadFn);
     return () => {
@@ -56,7 +59,7 @@ var config = {
     chrome.devtools.inspectedWindow.eval('window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0');
     bridge.send('checkSelection');
   },
-  selectElement(bridge, id) {
+  selectElement(id, bridge) {
     bridge.send('putSelectedNode', id);
     setTimeout(() => {
       chrome.devtools.inspectedWindow.eval('inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$node)');
@@ -94,7 +97,7 @@ var config = {
   },
   inject(done) {
     inject(chrome.runtime.getURL('build/backend.js'), () => {
-      var port = this._port = chrome.runtime.connect({
+      var port = chrome.runtime.connect({
         name: '' + chrome.devtools.inspectedWindow.tabId,
       });
       var disconnected = false;