Merge branch 'master' into tabs

Conflicts:
	frontend/Store.js

Author: kassens

agent/Bridge.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);

frontend/Breadcrumb.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);

frontend/Panel.js

@@ -82,6 +82,18 @@ class Panel extends React.Component {
     }
   }
 
+  pauseTransfer() {
+    if (this._bridge) {
+      this._bridge.pause();
+    }
+  }
+
+  resumeTransfer() {
+    if (this._bridge) {
+      this._bridge.resume();
+    }
+  }
+
   reload() {
     if (this._unsub) {
       this._unsub();

frontend/Store.js

@@ -81,6 +81,8 @@ class Store extends EventEmitter {
   _nodes: Map;
   _parents: Map;
   _nodesByName: Map;
+  _eventQueue: Array<string>;
+  _eventTimer: ?number;
 
   // Public state
   contextMenu: ?ContextMenu;
@@ -91,6 +93,7 @@ class Store extends EventEmitter {
   searchText: string;
   selectedTab: string;
   selected: ?ElementID;
+  breadcrumbHead: ?ElementID;
   // an object describing the capabilities of the inspected runtime.
   capabilities: {
     scroll?: boolean,
@@ -110,6 +113,7 @@ class Store extends EventEmitter {
     this.hovered = null;
     this.selected = null;
     this.selectedTab = 'Elements';
+    this.breadcrumbHead = null;
     this.isBottomTagSelected = false;
     this.searchText = '';
     this.capabilities = {};
@@ -125,7 +129,9 @@ class Store extends EventEmitter {
       this.roots = this.roots.push(id);
       if (!this.selected) {
         this.selected = this.skipWrapper(id);
+        this.breadcrumbHead = this.selected;
         this.emit('selected');
+        this.emit('breadcrumbHead');
         this._bridge.send('selected', this.selected);
       }
       this.emit('roots');
@@ -140,6 +146,24 @@ class Store extends EventEmitter {
     });
 
     this._establishConnection();
+    this._eventQueue = [];
+    this._eventTimer = null;
+  }
+
+  emit(evt: string): boolean {
+    if (!this._eventTimer) {
+      this._eventTimer = setTimeout(() => {
+        this._eventQueue.forEach(evt => EventEmitter.prototype.emit.call(this, evt));
+        this._eventQueue = [];
+        this._eventTimer = null;
+      }, 50);
+      this._eventQueue = [];
+    }
+    if (this._eventQueue.indexOf(evt) === -1) {
+      this._eventQueue.push(evt);
+    }
+    // to appease flow
+    return true;
   }
 
   // Public actions
@@ -310,6 +334,13 @@ class Store extends EventEmitter {
     this.emit('hover');
   }
 
+  selectBreadcrumb(id: ElementID) {
+    this._revealDeep(id);
+    this.changeSearch('');
+    this.isBottomTagSelected = false;
+    this.select(id, false, true);
+  }
+
   selectTop(id: ?ElementID, noHighlight?: boolean) {
     this.isBottomTagSelected = false;
     this.select(id, noHighlight);
@@ -320,7 +351,7 @@ class Store extends EventEmitter {
     this.select(id);
   }
 
-  select(id: ?ElementID, noHighlight?: boolean) {
+  select(id: ?ElementID, noHighlight?: boolean, keepBreadcrumb?: boolean) {
     var oldSel = this.selected;
     this.selected = id;
     if (oldSel) {
@@ -329,6 +360,10 @@ class Store extends EventEmitter {
     if (id) {
       this.emit(id);
     }
+    if (!keepBreadcrumb) {
+      this.breadcrumbHead = id;
+      this.emit('breadcrumbHead');
+    }
     this.emit('selected');
     this._bridge.send('selected', id);
     if (!noHighlight) {

frontend/TreeView.js

@@ -12,6 +12,7 @@
 
 var React = require('react');
 var Node = require('./Node');
+var Breadcrumb = require('./Breadcrumb');
 
 var decorate = require('./decorate');
 
@@ -72,9 +73,12 @@ class TreeView extends React.Component {
 
     return (
       <div style={styles.container}>
-        {this.props.roots.map(id => (
-          <Node key={id} id={id} depth={0} />
-        )).toJS()}
+        <div style={styles.scroll}>
+          {this.props.roots.map(id => (
+            <Node key={id} id={id} depth={0} />
+          )).toJS()}
+        </div>
+        <Breadcrumb />
       </div>
     );
   }
@@ -86,17 +90,24 @@ TreeView.childContextTypes = {
 
 var styles = {
   container: {
-    padding: 3,
-    overflow: 'auto',
     fontFamily: 'Menlo, monospace',
     fontSize: '11px',
     flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
 
     WebkitUserSelect: 'none',
     MozUserSelect: 'none',
     MsUserSelect: 'none',
     userSelect: 'none',
   },
+  scroll: {
+    padding: 3,
+    overflow: 'auto',
+    minHeight: 0,
+    flex: 1,
+  },
 };
 
 var WrappedTreeView = decorate({

shells/chrome/manifest.json

@@ -2,7 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "0.14",
+  "version": "0.14.1",
+  "minimum_chrome_version": "43",
   "icons": {
     "48": "icons/icon48.png",
     "128": "icons/icon128.png"
@@ -14,7 +15,7 @@
   "web_accessible_resources": [ "main.html", "panel.html", "build/backend.js"],
 
   "background": {
-    "scripts": [ "./build/background.js" ],
+    "scripts": [ "build/background.js" ],
     "persistent": false
   },
 
@@ -26,7 +27,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["./build/inject.js"],
+      "js": ["build/inject.js"],
       "run_at": "document_start"
     }
   ]

shells/chrome/src/main.js

@@ -57,10 +57,12 @@ function createPanelIfReactLoaded() {
         // selection
         window.panel.getNewSelection();
         reactPanel = window.panel;
+        reactPanel.resumeTransfer();
       });
       panel.onHidden.addListener(function () {
         if (reactPanel) {
           reactPanel.hideHighlight();
+          reactPanel.pauseTransfer();
         }
       });
     });

shells/plain/index.html

@@ -7,6 +7,7 @@
             #target {
                 flex: 1;
                 border: none;
+                border-bottom: 1px solid #ccc;
             }
             #container {
                 display: flex;

shells/plain/webpack.config.js

@@ -10,7 +10,7 @@
 'use strict';
 
 module.exports = {
-  devtool: 'cheap-module-eval-source-map',
+  devtool: false,//'cheap-module-eval-source-map',
   entry: {
     backend: './backend.js',
     container: './container.js',