Merge branch 'master' into tabs

Conflicts:
	frontend/Store.js

Author: kassens

.eslintignore

@@ -2,3 +2,4 @@
 
 **/build/**
 **/node_modules/**
+flow/*

.eslintrc

@@ -5,10 +5,8 @@
 .*node_modules/node-libs-browser.*
 .*node_modules/webpack.*
 
-[include]
-
 [libs]
-agent/flow.js
+flow
 
 [options]
 suppress_type=$FlowIssue
@@ -18,3 +16,6 @@ suppress_type=$FixMe
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.15.0

.flowconfig

@@ -14,7 +14,7 @@ Atom/Nuclide, and as a standalone Electron app.
 The official extensions represent the current stable release.
 
 - [Chrome extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
-- Firefox extension (coming soon)
+- [Firefox extension](https://addons.mozilla.org/firefox/addon/react-devtools/)
 - Standalone app (coming soon)
 
 If you inspect an element or launch the developer tools on a React page, you

README.md

@@ -236,7 +236,6 @@ class Agent extends EventEmitter {
     }
     var renderer = this.renderers.get(id);
     if (this.reactInternals[renderer].getNativeFromReactElement) {
-      // $FlowFixMe I literally just checked this
       return this.reactInternals[renderer].getNativeFromReactElement(component);
     }
   }
@@ -268,7 +267,7 @@ class Agent extends EventEmitter {
       try {
         // $FlowFixMe possibly null - it's not null
         component = this.reactInternals[renderer].getReactElementFromNative(node);
-      } catch (e){}
+      } catch (e) {}
       if (component) {
         return this.getId(component);
       }

agent/Agent.js

@@ -45,6 +45,10 @@ type PayloadType = {
   type: 'callback',
   id: string,
   args: Array<any>,
+} | {
+  type: 'pause',
+} | {
+  type: 'resume',
 } | EventPayload;
 
 /**
@@ -113,6 +117,7 @@ class Bridge {
   _waiting: ?number;
   _wall: Wall;
   _callers: {[key: string]: AnyFn};
+  _paused: boolean;
 
   constructor() {
     this._cbs = new Map();
@@ -123,6 +128,7 @@ class Bridge {
     this._waiting = null;
     this._lastTime = 5;
     this._callers = {};
+    this._paused = false;
   }
 
   attach(wall: Wall) {
@@ -172,6 +178,18 @@ class Bridge {
     this._callers[name] = handler;
   }
 
+  pause() {
+    this._wall.send({
+      type: 'pause',
+    });
+  }
+
+  resume() {
+    this._wall.send({
+      type: 'resume',
+    });
+  }
+
   sendOne(evt: string, data: any) {
     var cleaned = [];
     var san = dehydrate(data, cleaned);
@@ -182,7 +200,7 @@ class Bridge {
   }
 
   send(evt: string, data: any) {
-    if (!this._waiting) {
+    if (!this._waiting && !this._paused) {
       this._buffer = [];
       var nextTime = this._lastTime * 3;
       if (nextTime > 500) {
@@ -245,6 +263,20 @@ class Bridge {
   }
 
   _handleMessage(payload: PayloadType) {
+    if (payload.type === 'resume') {
+      this._paused = false;
+      this._waiting = null;
+      this.flush();
+      return;
+    }
+
+    if (payload.type === 'pause') {
+      this._paused = true;
+      clearTimeout(this._waiting);
+      this._waiting = null;
+      return;
+    }
+
     if (payload.type === 'callback') {
       this._cbs.get(payload.id)(...payload.args);
       this._cbs.delete(payload.id);
@@ -325,7 +357,6 @@ class Bridge {
         if (isFn && (name === 'arguments' || name === 'callee' || name === 'caller')) {
           return;
         }
-        // $FlowFixMe flow thinks `val` might be null
         result[name] = dehydrate(val[name], cleaned, [name]);
       });
 

agent/Bridge.js

@@ -27,7 +27,9 @@ function getData(element: Object): DataType {
   var text = null;
   var publicInstance = null;
   var nodeType = 'Native';
-  if (element._renderedComponent) {
+  if (element._currentElement === null || element._currentElement === false) {
+    nodeType = 'Empty';
+  } else if (element._renderedComponent) {
     nodeType = 'NativeWrapper';
     children = [element._renderedComponent];
     props = element._instance.props;

backend/getData.js

@@ -11,7 +11,7 @@
 'use strict';
 
 export type DataType = {
-  nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text',
+  nodeType: 'Native' | 'Wrapper' | 'NativeWrapper' | 'Composite' | 'Text' | 'Empty',
   type: ?(string | AnyFn),
   name: ?string,
   props: ?Object,

backend/types.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+declare var chrome: {
+  devtools: {
+    network: {
+      onNavigated: {
+        addListener: (cb: (url: string) => void) => void,
+        removeListener: (cb: () => void) => void,
+      },
+    },
+    inspectedWindow: {
+      eval: (code: string, cb?: (res: any, err: ?Object) => any) => void,
+      tabId: number,
+    },
+    panels: {
+      create: (title: string, icon: string, filename: string, cb: (panel: {
+        onHidden: {
+          addListener: (cb: (window: Object) => void) => void,
+        },
+        onShown: {
+          addListener: (cb: (window: Object) => void) => void,
+        }
+      }) => void) => void,
+    },
+  },
+  tabs: {
+    executeScript: (tabId: number, options: Object, fn: () => void) => void,
+  },
+  runtime: {
+    getURL: (path: string) => string,
+    connect: (config: Object) => {
+      disconnect: () => void,
+      onMessage: {
+        addListener: (fn: (message: Object) => void) => void,
+      },
+      onDisconnect: {
+        addListener: (fn: (message: Object) => void) => void,
+      },
+      postMessage: (data: Object) => void,
+    },
+    onConnect: {
+      addListener: (fn: (port: {
+        name: string,
+        sender: {
+          tab: {
+            id: number,
+          },
+        },
+      }) => void) => void,
+    },
+  },
+};

flow/chrome.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * 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.
+ *
+ * @flow
+ */
+'use strict';
+
+import type Store from './Store';
+import type {ElementID} from './types';
+
+var React = require('react');
+var assign = require('object-assign');
+var decorate = require('./decorate');
+
+class Breadcrumb extends React.Component {
+  render() {
+    return (
+      <ul style={styles.container}>
+        {this.props.path.map(({id, node}) => {
+          var isSelected = id === this.props.selected;
+          var style = assign(
+            {},
+            styles.item,
+            node.get('nodeType') === 'Composite' && styles.composite,
+            isSelected && styles.selected
+          );
+          return (
+            <li
+              style={style}
+              onMouseOver={() => this.props.hover(id, true)}
+              onMouseOut={() => this.props.hover(id, false)}
+              onClick={isSelected ? null : () => this.props.select(id)}
+            >
+              {node.get('name') || '"' + node.get('text') + '"'}
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+}
+
+var styles = {
+  container: {
+    borderTop: '1px solid #ccc',
+    backgroundColor: 'white',
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+  },
+
+  selected: {
+    cursor: 'default',
+    backgroundColor: 'rgb(56, 121, 217)',
+    color: 'white',
+  },
+
+  composite: {
+    color: 'rgb(136, 18, 128)',
+  },
+
+  item: {
+    padding: '3px 7px',
+    cursor: 'pointer',
+    display: 'inline-block',
+  },
+};
+
+function getBreadcrumbPath(store: Store): Array<{id: ElementID, node: Object}> {
+  var path = [];
+  var current = store.breadcrumbHead;
+  while (current) {
+    path.unshift({
+      id: current,
+      node: store.get(current),
+    });
+    current = store.skipWrapper(store.getParent(current), true);
+  }
+  return path;
+}
+
+module.exports = decorate({
+  listeners: () => ['breadcrumbHead', 'selected'],
+  props(store, props) {
+    return {
+      select: id => store.selectBreadcrumb(id),
+      hover: (id, isHovered) => store.setHover(id, isHovered),
+      selected: store.selected,
+      path: getBreadcrumbPath(store),
+    };
+  },
+}, Breadcrumb);

agent/flow.js renamed to flow/performance.js

@@ -16,13 +16,11 @@ var HighlightHover = require('./HighlightHover');
 var assign = require('object-assign');
 var decorate = require('./decorate');
 
-type MenuItem = {
+export type MenuItem = {
   title: string,
   action: () => void
 };
 
-export type MenuItem = MenuItem;
-
 class ContextMenu {
   _clickout: (evt: Object) => void;
 

frontend/Breadcrumb.js

@@ -101,33 +101,44 @@ class Node {
       onMouseDown: this.props.onSelect,
     };
 
-    if (node.get('name') === null) {
-      var content = children || node.get('text');
+    var nodeType = node.get('nodeType');
+    if (nodeType === 'Text' || nodeType === 'Empty') {
+      var tag;
+      if (nodeType === 'Text') {
+        var content = node.get('text');
+        tag =
+          <span style={styles.tagText}>
+            <span style={styles.openTag}>
+              "
+            </span>
+            <span style={styles.textContent}>{content}</span>
+            <span style={styles.closeTag}>
+              "
+            </span>
+          </span>;
+      } else if (nodeType === 'Empty') {
+        tag =
+          <span style={styles.tagText}>
+            <span style={styles.falseyLiteral}>null</span>
+          </span>;
+      }
       return (
         <div style={styles.container}>
           <div style={headStyles} ref={h => this._head = h} {...tagEvents}>
-            <span style={styles.tagText}>
-              <span style={styles.openTag}>
-                "
-              </span>
-              <span style={styles.textContent}>{content}</span>
-              <span style={styles.closeTag}>
-                "
-              </span>
-            </span>
+            {tag}
           </div>
         </div>
       );
     }
 
-    var isCustom = node.get('nodeType') === 'Composite';
+    var isCustom = nodeType === 'Composite';
 
     var tagStyle = isCustom ? styles.customTagName : styles.tagName;
 
     // Single-line tag (collapsed / simple content / no content)
     if (!children || typeof children === 'string' || !children.length) {
       var name = node.get('name');
-      var content = children || node.get('text');
+      var content = children;
       return (
         <div style={styles.container}>
           <div style={headStyles} ref={h => this._head = h} {...tagEvents}>
@@ -280,6 +291,10 @@ var styles = {
   textContent: {
   },
 
+  falseyLiteral: {
+    fontStyle: 'italic',
+  },
+
   closeTag: {
   },